ES6新增特性

1. 变量作用域 即 let的产生

变量提升和作用域的概念，大家都耳熟能详，在这里简单说一下var、let、const三者的区别：

1. var声明的变量有变量提升
2. let和const不存在变量提升,且具有自己的块级作用域
3. const 常量 声明时必须赋值，且不能修改

住：

function也存在变量提升，且优先级比var高

2. 模块化

模块化主要是为了实现高内聚低耦合
js的模块化主要是 export 和 import

• export 用于导出模块的接口
• import 用于导入模块

3. 增加了promise API

• promise是异步编程的一种解决方案，解决了常用回调方式产生的回调地狱，并且可以在外层捕获函数异常信息。

• promise有三种状态，且状态只能改变一次

  • pending 进行中
  • fulfilled 成功
  • rejected 失败

• promise用法
  promise对象可以通过构造函数来创建，且构造函数要传入一个函数fn()用来改变promise的状态。fn()含有两个函数作为参数 resolve, reject 。当需要执行的操作成功后，可以调用resolve并将操作结果作为其参数传递出去，否则调用reject函数，跳转到失败的回调函数。

    <script>

        var pro = new Promise((resolve,reject)=>{
            // 由于promise状态只能改变一次，所以reslove和reject只能执行其中一个
            resolve("我成功了！")
            // reject("我失败了！")
        }).then(
            // 当执行的是resolve 时，调用下面的函数 value= 我成功了！
            value=>{
                console.log(value)
            },
            // 当执行的是reject 时，调用下面的函数 reason = 我失败了！
            reason=>{
                console.log(reason)
            }
        ).catch(err=>{
            console.log(err)
        })
    </script>

• .then()
  - .then() 是对promise状态改变的处理，且then本身也是一个promise。
  - then()也是有两个函数作为参数then(foo1,foo2), foo1是成功时调用的函数，foo2 是失败时调用的函数。
  - 注：只有在状态改变后，才会创建then 的微任务。（执行reject或resolve后）
• .catch()
  - catch也是对失败操作的一种处理函数，当执行 reject 后，会被catch捕获。但如果 .then 中设置了 foo2 , 则catch会失去作用。

4. 运算符

4.1 扩展运算符...

可以将数组或对象转化为以“,” 分割的参数序列

    <script>
        var arr = [1,2,3,"aa"]
        console.log(...arr) // 相当于 console.log(1,2,3,"aa")
    </script>

4.2 指数运算符 **

2**4 = 2的四次方 = 16

4.3 可链选运算符 ?.

    <script>
        var data = {
            user:{
                item1:{
                    name:'aa'
                }
            }
        }
        // data&&data.user&&data.user.item1&&data.user.item1.name = data?.user?.item1?.name
        if(data&&data.user&&data.user.item1&&data.user.item1.name){
            console.log(data.user.item1.name)
        }
        if(data?.user?.item1?.name){
            console.log(data.user.item1.name)
        }

    </script>

如上代码所示：

data&&data.user&&data.user.item1&&data.user.item1.name = data?.user?.item1?.name

4.4 空值运算符 ??

当左侧操作数为null或undefind时，返回右侧操作数否则返回左侧
console.log(null??"bbb")

5. 箭头函数

• 简化了函数的编写方法

   <script>
       function fn(){
           // 无参数
           ()=>{
               return 0
           }
           // 一个参数
           ele=>{
               return 1
           }
           // 两个参数
           (ele1,ele2)=>{
               return 2
           }
       }
   </script>

• 有关this指向的问题，看这篇文章

6. 添加了set、map方法

• set类似于一种数组的数据结构，但不可以有重复值，可以用来数组去重！

    <script>
        var arr = [1,2,3,4,5,2,3]

        var arr2 = new Set(arr)
        console.log(arr2)  // 1,2,3,4,5
    </script>

• Map是类似Object的一种键值对集合，但是Map的键不仅限于是字符串，其他各种类型的值包括对象都可以成为Map的键

    <script>
        var temp = new Map()
        temp.set(1,'我是1')
        temp.set(true,'我是2')
        
        console.log(temp.get(1))
        console.log(temp)
    </script>

输出为：

7. 解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

// 数组模型的解构 
let [a, b, c] = [1, 2, 3]; // a=1；b=2；c=3
// 还可以解构字符串 
let [a,b,c]  =  '123';    // a=1；b=2；c=3

//对象解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };// foo = 'aaa'； bar = 'bbb'