ES6新特性整理

最新推荐文章于 2025-12-24 14:17:09 发布

原创最新推荐文章于 2025-12-24 14:17:09 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

本文介绍了JavaScriptES6中的关键特性，包括变量声明（let,const）、解构赋值、字符串和数值扩展、函数和数组的增强、运算符拓展、数据结构（Set,Map,Proxy,Reflect）以及异步编程工具（Promise,async/await）。还涵盖了类与继承和模块化的概念。

一、let和const命令

let：在代码块内有效|不能重复声明|不存在变量提升|不影响作用域链

用于声明变量。用法类似于var，但是声明的变量只在let命令所在的代码块内有效，它声明的变量会绑定这个区域，不受外部的影响。let不允许在相同作用域内重复声明同一个变量。

const：在代码块内有效|不能重复声明|声明之后不允许修改|声明必须赋初试值

用于声明常量。一旦声明必须初始化，初始化后不能修改，但是如果声明的常量是一个引用数据类型，那么该数据内部的数据是可以修改的，只是不能重新赋值。const、let声明的变量没有变量提升。const声明的变量只在作用域内有效。

暂时性死区

使用let和const声明的变量需要特别注意，可能会出现暂时性死区，也就是在同一个作用域中使用let、const声明数据前是无法使用的，一旦使用就会报错。

使用var可以重复声明变量，let和const不可以

声明变量的六种方式：

var、function、let、const、import、class

二、变量的解构赋值

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构，如var [a,b] = [1,2]（按照索引值）

在解构出来的变量名后面加上：新的名字，可以给变量重新命名。

对象的解构赋值

对象按照属性名进行赋值，没有顺序

 let { name, age } = { name : ”zs ”,age : 20  };

字符串结构赋值

字符串也可以解构赋值。这是因为字符串被转换成了一个类似数组的对象。

const [ a , b , c , d , e ] = ’hello ’;

函数参数的解构赋值

functionmove({x,y)= {x:0,y:0 )} {
    return[x,y];
}
move( { x : 3,y:8 } ) ;II[3,8)

解构赋值的用途

1、交换变量的值

2、从函数返回多个值

三、字符串的扩展

模板字符串

` 我叫 ${ name } `

字符串的新增方法

includes（）：返回布尔值，表示是否找到了参数字符串

startsWith（）：返回布尔值表示参数字符串是否在源字符串的头部

endsWith（）：返回布尔值，表示参数字符串是否在源字符串的尾部

四、数值的拓展

bigInt大整型 var n = 123n; 声明时在数字后面加n，可以解决精度缺失问题。

指数运算符（**） 2 ** 3 就是2的3次方

五、函数的拓展

1、函数参数的默认值

2、rest剩余参数，解决了argument不方便的问题

3、箭头函数：很大程度上解决了this指向的问题。使用“箭头”（＝＞）定义函数。

六、数组的拓展

1、扩展运算符。（spread）是三个点（．．．）

2、findIndex方法（返回第一个符合条件的数组成员的位置）、includes方法（返回一个布尔值，表示某个数组是否包含给定的值）、at方法

3、数组的空位：指数组的某个位置没有任何值。

七、对象的拓展

1、属性的简写 {name} 等同于 {name：name}

2、属性名表达式，对象的属性名可以是一个表达式

3、对象的扩展运算符（. . .）

4、对象的新增方法

（1）Object.keys()方法 : 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历enumerable）属性的键名。

（2）Object.values()方法 : 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历enumerable）属性的键值。

（3）Object.entries()方法 : 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（numerable）属性的键值对数组。

八、运算符的拓展

1、可选链，为了避免连续读取属性会报错的问题

2、空值合并，为了排除null和undefined在布尔值判断

九、Symbol数据类型

一种新的原始数据类型Symbol，表示独一无二的值。。它是JavaScript语言的第7种数据类型，前6种分别是UndefinedNull、布尔值（Boolean）、字符串（String）、数值（Number）和对象（Object）

var a = Symbol(’111’);

十、Set和Map数据结构

set ：用来实现去重（只能去基本数据类型）,Set本身是一个构造函数，用来生成Set数据结构.

Map：是一种完善的键值对的数据结构，可以当做一种增强版的对象

WeakSet，WeakMap：是Set和Map的补充。

十一、Proxy代理

Vue3的响应式原理就是用Proxy，其实就是中间商，用于修改某些操作的默认行为。

十二、Reflect反射

Reflect 是一个内置对象，它提供了一系列操作对象的方法，这些方法都是静态的（类似 Math 对象）。Reflect 的目的是提供一种在运行时动态地检查和修改对象属性的方式。Reflect 对象不是构造函数，因此你不能通过 new 关键字来创建它的实例。

十三、Promise承诺

本身是一个构造函数，是为了解决异步处理回调地狱而产生的，可以进行链式调用。

Promise的详细介绍和使用可点进本人主页查看往期博客Promise解决异步处理回调地狱-优快云博客

十四、Iterator接口

Iterator接口是一个内置的接口，它定义了遍历器和生成器对象的行为。Iterator对象用于迭代集合对象，如数组、字符串和其他可迭代对象。Iterator接口也定义了next()方法，该方法返回一个对象。

十五、Generator遍历器/生成器

因为JS是一个异步的语言，所以在执行异步代码的时候需要等待结果的返回才能执行后面的代码，

Generator可以执行函数的懒执行

十六、async函数

async函数是为了实现异步代码同步化。

它就是Generator函数的语法糖，但是它返回的Promise对象。

async关键字表示后面的函数里有异步代码，await关键字表示要等待后面Promise对象的执行有结果。