ES6-ES11新特性学习

1、let关键字

let关键字用来声明变量，使用let声明的变量有几个特点：

• 不允许重复声明
• 块级作用域
• 不存在变量提升
• 不影响作用域链

应用场景：以后声明变量使用let就对了

2、const 关键字

const 关键字用来声明常量，const声明有一下特点

• 声明必须赋初始值
• 标识符一般为大写
• 不允许重复声明
• 值不允许修改

注意：对象属性修改和数组元素变化不会触发const错误

应用场景：声明对象类型使用const, 非对象类型声明选择let

3、变量的解构赋值

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

//数组的解构赋值
const arr = ['张学友', '刘德华', '李敏', '郭富城'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const obj = {
    name: '山里的闲人',
    tags: ['野人', '美女', '程序员']
}
let {name, tags} = obj
//复杂结构

4、模板字符串

• 模板字符串是增强版的字符串，用反引号（`)标识，特点：
• 字符串中可以出现换行符
• 可以使用${×××}形式输出变量

5、简化对象写法

​ ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

注意：对象简写形式简化了代码，所以以后用简写就对了

6、箭头函数

​ ES6 允许使用「箭头」（=>）定义函数。

箭头函数的注意点：

• 如果形参只有一个，则小括号可以省略
• 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
• 箭头函数 this 指向声明时所在作用域下 this 的值
• 箭头函数不能作为构造函数实例化
• 不能使用 arguments

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

7、rest参数

//ES6引入rest参数，用于获取函数的实参，用来代替arguments
//es5获取实参的方式
function fn(){
    console.log(arguments)
}
fn('萧山','劳拉', '密密')
//rest参数
function fn(...args){
    console.log(args)
}
fn(1,2,3,4,5)
//rest参数必须放在最后面
function fn(a,b,...args){
    console.log(a)
    console.log(b)
    console.log(args)
}

8、spread 扩展运算符

​ 扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包

9、Symbol 基本使用

​ ES6 引入了一种新的原始数据类型 Symbol， 表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol 特点：

• Symbol 的值是唯一的，用来解决命名冲突的问题
• Symbol 值不能与其他数据进行运算
• Symbol 定义的对象属性不能使用 for…in 循环遍历， 但是可以使用Reflect.ownKeys 来获取对象的所有键名
• 箭头函数不能作为构造函数实例化
• 不能使用 arguments

注意：遇到唯一性场景时可以使用Symbol

Symbol 内置值：

Symbol.hasInstance	当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开
Symbol.unscopables	该对象指定了使用with关键字时，哪些属性会被with环境排除
Symbol.match	当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值
Symbol.replace	当该对象被str.replace方法调用时，会返回该方法的返回值
Symbol.search	当该对象被str.search方法调用时，会返回该方法的返回值
Symbol.split	当该对象被str.split方法调用时，会返回该方法的返回值
Symbol.iterator	对象进行for...of循环时，回调用Symbol.iterator方法，返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返回该对象的原始类型
Symbol.toStringTag	在该对象上面调用toSting方法时，返回该方法的返回值
Symbol.species	创建衍生对象时，会使用该属性

10、迭代器

​ 遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

• ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费
• 原生具备 iterator 接口的数据(可用 for of 遍历)
• • Array
  • Arguments
  • Set
  • Map
  • String
  • TypedArray
  • NodeList
• 工作原理
• • 创建一个指针对象，指向当前数据结构的起始位置
  • 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
  • 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
  • 每调用 next 方法返回一个包含 value 和done 属性的对象

注意：需要自定义遍历数据的时候，要想到迭代器。

迭代器的应用__自定义遍历数据

<script>
    const banji = {
        name: "终极一班",
        stus: [
            'xiaoming',
            'xiaohang',
            'laoda',
            'xiejia'
        ],
        [Symbol.iterator]() {
            let index = 0;
            return {
                next: function(){
                    if(index<this.stus.length){
                        const result ={value : _this.stus[i],done:false};
                        index++;
                        return result;
                    }else{
                        return {value : undefined, done:true}
                    }
                }
            }
        }
    }
    for(let v of banji){
        console.log(v)
    }
</script>