ES6部分新特性

1. let和const

   let和const是ES6新增的块级作用域变量声明方式。

   • let关键字要先定义再使用，而且只作用于定义的块级作用域中，常用于for或if之类的结构中

     //和var的对比
     for(var i = 0;i < 3;i++){
         for(var i = 0;i < 3;i++){
             console.log(i)  //0 1 2
         }
     }
     //-------------------------------
     for(let i = 0;i < 3;i++){
         for(let i = 0;i < 3;i++){
             console.log(i)   //0 1 2 0 1 2 
         }
     }
     

   • const和let类似，只是const声明的是一个不能被重新赋值的变量。

2. symbol

   symbol是ES6新增的原始数据类型（Object、String、Boolean、Number、Null、Undefined、Array、Function），表示独一无二的值，即每个symbol类型的值都不相同。

   创建symbol数据类型的值时需要给symbol函数传递一个字符串，值得注意的是：不能用new关键字调用。另外，每个symbol类型值都是独一无二的，即使传递的是相同的字符串。

   var sy = Symbol('test')
   var sy1 = Symbol('test')
   console.log(typeof sy)   //'symbol'
   sy == sy1   //false
   var sy2 = new Symbol('test')   //error: Symbol is not a constructor
   

3. 解构赋值

   解构赋值是对赋值运算符的扩展，是一种针对数组或对象进行模式匹配，然后对其中的变量进行赋值。

   let [a,b,c] = [1,2,3]
   console.log(a,b,c)   //1,2,3
   
   let [a,b,c] = [1,,3]
   console.log(a,b,c)   //1,undefined,3
   
   let [a,,c] = [1,2,3]
   console.log(a,c)   //1,3
   
   let [a,...b] = [1,2,3]   //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋给b
   console.log(a,b)   //1,[2,3]
   

   所有可枚举的（iterable）的对象都可以使用解构赋值，例如数组、字符串对象，以及ES6新增的Map和Set类型

   对象的解构赋值和数组类似，不过左边的变量名需要使用对象的属性名，并且用大括号{}括起来

   let oobj = {name:'1',age:'2'}
   let {name,age} = obj
   cosnole.log(name,age)   //1,2
   let {name:myName,age:myAge} = obj   //自定义变量名
   console.log(myName,myAge)   //1,2
   

   实际使用：

   • 交换两个变量的值

     [x,y] = [y,x]
     

   • 函数的封装：函数参数是一个对象，不会像(x,y)的形式这样固定参数的顺序，而{} = {}后面又赋一个空的对象是为了在调用fn时不传参数而不会抛出错误导致程序中止。

     function fn({x,y} = {}){
         console.log(x,y)
     }
     

   • 函数返回值的结构：函数返回多个值

     //有次序的
     function fn(){
         return [a,b,c]
     }
     const [a,b,c] = fn()
     
     //无次序的
     function fn(){
         return {a,b,c}
     }
     const {a,b,c} = fn()
     

4. 模板字符串

   使用``包裹的js代码

   const h = 'hello'
   console.log(`${h} world`)   //hello world
   

   特点：

   • ${}中可以使用任意的JavaScript表达式、运算、引用对象属性、函数调用等。结果是其返回值。

   • 可以换行，所有的空格和换行都会被保留。

5. 函数的扩展

   • 函数的默认值

     function fn(x = 1){}
     

   • rest参数（用于获取函数的多余参数）

     function fn(...args){
         //args是一个数组，元素是传入的各个参数
     }
     

   • 箭头函数

     书写方式：参数 => 函数体

     let add = (a,b) = {
         return a + b
     }
     let fn = a => a * a   //当只有一个参数时，()可以省略，当函数体只有单行return语句时，{}可以省略
     

     当函数体需要直接返回对象时，必须用小括号把对象包裹起来，否则将抛出错误

     const fn = () => {name:'1',age:'2'}   //SyntaxError
     const fn = () => ({name:'1',age:'2'})
     

     特点：

     • 函数体内的this指向定义时所在的作用域
     • 不可以当作构造函数（不能用new）
     • 不可以用arguments对象，可以用rest
     • 不可以使用yield命令（不能用作Generator函数）

6. 扩展运算符和rest运算符

   扩展运算符（spread）是三个点（...)，可以将一个数组转为用逗号分隔的参数序列

   基本用法：拆解字符串与数组

   var arr = [1,2,3,4]
   console.log(...arr)   //1 2 3 4
   var str = 'hello'
   console.log(...str)   //h e l l o
   

   • 扩展运算符应用

     • 某些场景可以替代apply

       在使用Math.max()求数组的最大值时，ES5可以通过apply做到

       var arr = [1,2,4,5,3]
       var max = Math.max.apply(null,arr)
       console.log(max)   //5
       

       ES6中可以使用扩展运算符（...）

       var arr = [1,2,4,5,3]
       var max = Math.max(...arr)
       console.log(max)   //5
       

     • 代替数组的push、concat等方法

       实现把arr2push到arr1中

       var arr1 = [0,1,2]
       var arr2 = [3,4,5]
       //ES5
       Array.prototype.push.apply(arr1,arr2)
       //[0,1,2,3,4,5]
       
       //ES6
       arr1.push(...arr2)
       //[0,1,2,3,4,5]
       

       合并（concat）

       var arr 1 = ['a','b']
       var arr 2 = ['c','d']
       var arr 3 = ['e','f']
       
       //ES5
       arr1.concat(arr2,arr3)
       
       //ES6
       [...arr1,...arr2,...arr3]
       

       拷贝数组或对象

       //拷贝数组
       var arr1 = [1,2,3]
       var arr2 = [...arr1]
       console.log(arr2)   //[1,2,3]
       
       //拷贝对象
       var obj1 = {
           age:1,
           name:'q',
           arr:{
               a1:[1,2]
           }
       }
       var obj2 = {...obj1}
       console.log(obj2)   //{age:1,name:'q',arr:{a1:[1,2]}}
       

       将伪数组转换为数组

       var List = document.querySelectorAll('div')
       console.log([...List])   //[div,div,...]
       

       上面代码中，List是一个伪数组对象，扩展运算符可以将其转换为真正的数组，原因就是List对象实现了Iterator

       注意：使用扩展运算符将伪数组转换为数组有局限性，这个类数组必须得有默认的迭代器且可遍历

   rest运算符：

   剩余运算符（the rest oprator），和扩展运算符一样都是...，但它用于结构数组或对象。在某种程度上，剩余运算符与展开运算符相反，展开运算符会"展开"数组变成多个元素，剩余元素hui收集多个元素"压缩"成一个单一的元素。

   • rest运算符应用

     • rest参数代替arguments变量

       //arguments变量的写法
       function sotNumbers(){
           return Array.prototype.slice.call(arguments).sort()
       }
       
       //rest参数写法
       const sortNumber = (...numbers) => numbers.sort()
       

       rest参数和arguments对象的区别：

       rest参数	arguments对象
       rest参数只包含那些没有对应形参的实参	arguments对象包含了传给函数的所有实参
       rest参数是真实的Array实例，也就是说你能在它上面直接使用所有的数组方法	arguments对象不是一个真实的数组
       rest参数无附加的属性	arguments对象还有一些附加的属性（比如callee）

     • 与结构赋值结合使用

       var arr = [1,2,3,4,5]
       var [a,b,...c] = arr
       console.log(a,b,c)   //1,2,[3,4,5]
       

       注意：rest参数可以理解为剩余的参数，必须在最后定义，如果在中间定义会报错

       var arr = [1,2,3,4,5]
       var [a,...b,c] = arr
       // Uncaught SyntaxError: Rest element must be last element
       

   总结：

   • 扩展运算符和rest运算符是逆运算

     • 扩展运算符：数组 => 分割序列
     • rest运算符：分割序列 => 数组

   • 扩展运算符的应用场景

     由于繁琐的语法，apply 方法使用起来并不是很方便。当需要拿一个数组的元素作为函数调用的参数时，扩展运算符是一个不错的选择。

     扩展运算符还改善了数组字面量的操作，你可以更方便的初始化、连接、复制数组了。

     使用析构赋值你可以提取数组的一部分。通过与迭代器协议的组合，你可以以一种更灵活的方式使用该表达式。

   • rest运算符应用场景

     rest运算符主要是处理不定数量参数，rest参数使得收集参数变得非常简单。它是类数组对象arguments一个合理的替代品。

     rest参数还可以与解构赋值组合使用。

     在实际项目中灵活应用扩展运算符、rest运算符，能写出更精简、易读性高的代码。

参考文献：

https://es6.ruanyifeng.com/