ES6 常用知识点总结模板字符串：`` 模板字符串里面的${}: 可以放：变量、算术计算、三目、对象属性、创建对象、调

模板字符串：``

    console.log(`性别:${sex==1?"男":"女"}`);

模板字符串里面的${}:

可以放：
- 变量、算术计算、三目、对象属性、创建对象、调用函数、访问数组元素
- 有返回值的合法的js表达式
不可以放：
- 没有返回值的js表达式
- 也不能放分支/判断、循环等程序结构。
- 比如: if else for while...等

let

什么是块级作用域

重点：js中没有，其它语言才有；
概念：指除了对象{}和function的{}之外，其余if else、for等分支和循环结构的{}范围在其他语言中称为块级作用域。

全局作用域和块级作用域代码比对：直观理解

全局作用域下：var声明， t 打印出来的值为0.1

    var t=0;
    function fun1(){
      t+=1;
      if(false){ // 这里没有进去执行
          var t = Date.now(); //  var 声明提前
      }
    }
    function fun2(){
      t+=0.1;
    }
    fun1();
    fun2();
    console.log(t) // 0.1

为什么if语句里面的内容没有执行，但是这边得出的是0.1，而不是1.1;
原因：在搜索引擎执行的时候，由于if语句不是函数作用，所以里面申明的变量被提前了！

解析如下：

块级作用域下：let声明，t 打印出来的值为1.1；

     var t=0;
    function fun1(){
      t+=1;
      if(false){ // 这里没有进去执行
          let  t = Date.now(); // 这里用的是let声明，不会声明提前
      }
    }
    function fun2(){
      t+=0.1;
    }
    fun1();
    fun2();
    console.log(t) // 1.1

let 的本质

其底层会被翻译为匿名函数自调；(function(){ })()

let 三个小特点

一：因为不会声明提前，所以不能在声明变量之前，提前使用该变量

    // 这里会报错：Uncaught ReferenceError: Cannot access 'b'before initialization
    console.log(b) 
    
    let b= 10
    console.log(b) 
    
    // 其底层相当于
    console.log(b)
    (function () {
        var b = 10 ;
        console.log(b)
    })()

二：在相同作用域内，禁止声明两个同名的变量！

原因：相同作用域中，不能重复声明两个同名变量

    //报错：Identifier 'a' has already been declared
    var a = 10 ;
    let a = 20

三：因为let底层相当于匿名函数自调，所以，即使在全局创建的let变量，在window中也找不到！

for of 、 forEach 运用

    var arr = ['nick', 'freddy', 'mike'];
     // for 循环 - js 
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i])
    }
     // for in  - ES5
    for (var i in arr){
        console.log(i)
    }
    // for of   - ES6
    for (var item of arr) {
      console.log(item);
    }
    // forEach  - ES6
    arr.forEach(item=>console.log(item));

剩余参数（rest）:...rest

什么是剩余参数

... 可以和其它形参配合使用，

只获得其它形参不要的剩余参数。 用法：

  var 函数名=(形参1, 形参2,...数组名arr)=>{

      //形参1接收实参1

      //形参2接收实参2

      //…数组名arr接收除实参值1、2之外其余实参

  }

问题: 定义函数计算任意多个数的和

一：用arguments实现

    function fun(){
            var result=0
            for(let n of arguments){
              result += n
        }
        console.log(result)
      }
    fun(1,2,3) // 6

二：用rest实现

    var fun= (...rest)=>{
            var result=0
            for(let n of rest){
              result+= n
        }
        console.log(result)
      }
  fun(1,2,3) // 6

思考：为什么不用arguments 呢！

因为：箭头函数不支持arguments;会报：arguments is not defined

var fun= ()=>{
        var result=0
        for(let n of arguments){  // arguments is not defined
          result+= n
    }
    console.log(result)
  }
  fun(1,2,3) // 6

展开运算符（...）

add(1,2,3);
function add(...arr){}  // 表示收集参数

var arr = [1,2,3]
Math.max(...arr)        // 表示拆散

总结：

1). 定义函数时，形参列表中的...，表示收集
2). 调用函数时，实参列表中的...，表示拆散

运用一：获取一个数组中的最大值

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

运用二：复制一个数组（浅拷贝）

var arr = [1,2,3]
var arr1 =  [...arr]  // 把arr 数组复制给 arr1 
arr1[1] = 6
console.log(arr)  //  1,2,3
console.log(arr1) //  1,6,3

运用三：合并多个数组和元素

var arr = [1,2,3]
var arr1 = [5,6,7]  
var arr3 = [...arr,...arr1,8] // 1,2,3,5,6,7,8

运用四：克隆一个对象

var obj = {name : 'zhangsan' , age : 18}
var obj2 = { ...obj }

运用五：合并多个对象和属性

var obj1={ x:1, y:2,i:4};
var obj2={ i:4, j:5 };
var obj3={...obj1, ...obj2, k:6};
console.log(obj3) // {x:1, y:2 , i:4 , j:5 , k:6 }

运用六：解构

// 数组解构：
var arr = [2022,2,22,10] // 年 月 日 时
var [y,m,d] = arr
console.log(`今年是${y}年`) // 2022
console.log(`本月是${m}月`) // 2
console.log(`今天是${y}号`) // 22

// 对象解构
var  obj = {name:"zhangsan", age : 18}
var  {name,age} = obj
console.log(`姓名：${name}`)
console.log(`年龄：${age}`)

ES6 常用知识点总结