es6新特性

红太狼 2022-03-07 21:24 396阅读 0赞

**1.let && const**  
•都是块级作用域  
•不能重复定义  
•避免了变量提升

① let命令也用于声明对象，但是作用域为局部。  
![在这里插入图片描述][20190313164624740.png]  
在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适合使用let。

② const用于声明一个常量，设定后值不会再改变。  
![在这里插入图片描述][20190313164754115.png]  
强行对其进行重新赋值会报错。

**2.iterable类型**  
为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。  
![在这里插入图片描述][20190313165358714.png]  
Map相关操作方法如下，Set同理：  
![在这里插入图片描述][2019031316594620.png]  
还有一种iterable类型内置的遍历方法，forEach()方法是ES5.1标准引入的。  
Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
    s.forEach(function (element, sameElement, set) {
        console.log(element);
    });

Map的回调函数参数依次为value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    m.forEach(function (value, key, map) {
        console.log(value);
    });

如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得Array的element：  
var a = \[‘A’, ‘B’, ‘C’\];  
a.forEach(function (element) \{  
console.log(element);  
\});

**3.解构赋值**  
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

*  两边结构一致
 *  变量的声明和赋值在一行  
    例如数组：  
    ![在这里插入图片描述][20190313190548490.png]  
    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。  
    ![在这里插入图片描述][20190313191217781.png]  
    **4.箭头函数**  
    ES6中新增箭头操作符用于简化函数的写法，操作符左边为参数，右边为具体操作和返回值。  
    ![在这里插入图片描述][20190313191411965.png]  
    箭头函数还修复了this的指向，使其永远指向词法作用域：  
    ![在这里插入图片描述][20190313191448995.png]  
    **5.延展操作符**  
    通过它可以将数组作为参数直接传入函数：  
    ![在这里插入图片描述][20190313191846282.png]  
    在函数定义时可以通过…rest获取定义参数外的所有参数：  
    ![在这里插入图片描述][2019031319193793.png]  
    **6.类**  
    ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，与多数传统语言类似。  
    ![在这里插入图片描述][20190313192018332.png]

[20190313164624740.png]: /images/20220308/a0783cbae319403da92ed9a9f623cc03.png
[20190313164754115.png]: /images/20220308/77cbb27f7aec453083469ee34a732971.png
[20190313165358714.png]: /images/20220308/435540626f444f948907f843c76f8656.png?
[2019031316594620.png]: /images/20220308/5863a1a27a5444db85ef56c850272af6.png?
[20190313190548490.png]: /images/20220308/019753d390df4ae1bd1b7c7e3caa36d2.png
[20190313191217781.png]: /images/20220308/d11549ede11a47cca5537f8ebbbc5b6f.png?
[20190313191411965.png]: /images/20220308/36db607c9b0d425ea4735d51b84a2d23.png
[20190313191448995.png]: /images/20220308/818ec63044f04acc8715cad5f32d865a.png?
[20190313191846282.png]: /images/20220308/b5c31498b0494084ac53fb3186f07554.png
[2019031319193793.png]: /images/20220308/4ca264e13ba746d59f1e54d8be76c5cc.png
[20190313192018332.png]: /images/20220308/22ee3526e3f34733b17e97587984e535.png?