es6新增语法

1.变量声明let和const

1.1.let声明

1. 块级作用域
2. 不存在变量提升
3. 暂时性死区
4. 声明的变量不会挂载在window上
5. 同一作用域不能重复声明

1.2.const声明

用来声名一个有块级作用域的常量(内存地址不能变化的量)

1. 声明常量必须初始化
2. 同样具有块级作用域和暂时性死区
3. 赋值为简单数据类型,不能直接修改
4. 赋值为复杂数据类型,可以修改对象内部的属性和方法

1.3.变量的使用建议

(1)优先使用const声明固定不变的值
(2)使用let关键字声明变化的量
(3)兼容性考虑或者基于jQuery开发使用var声明

1.4.TDZ暂时性死区

JS引擎扫描代码时，如果发现变量声明，使用的是 var 声明变量时会将声明的变量提升到函数或全局作用域的顶部。但是 let 或者 const，会将声明的变量关进一个小黑屋也是TDZ（暂时性死区），只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。

面试题

  var funcs = []
  for (var i = 0; i < 10; i++) {
    funcs.push(
      function () {
        console.log(i)
      }
    )
  }
  funcs.forEach(function(func) {
    func()
  })
  结果输出十次10

如何依次执行0-9

    // ES5知识，我们可以利用“立即调用函数”解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(       
             (function() {
                console.log(value)            
        })(i)
      )
    }
    funcs.forEach(function(func) {
        func()
    })

  // 再来看看es6怎么处理的
    const funcs = []
    for (let i = 0; i < 10; i++) {
        funcs.push(() => console.log(i))
    }
    funcs.forEach(func => func())

2.字符串

2.1.模板字符串

(1)使用反引号(``)代替单双号
特点:使用${变量名或表达式}代替原来的引引加加
(2)支持换行
(3)可以调用函数

2.2.实例方法

• startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
• endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
• repeat(): 表示将原字符串重复n次，返回一个新字符串

3.函数

3.1 函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

    function action(num = 200) {
        console.log(num)
    }
    action(0) // 0
    action() //200
    action(300) //300

3.2 箭头函数

• 不需要 function 关键字来创建函数
• 省略 return 关键字
• 继承当前上下文的 this 关键字

ps:当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return.

4.解构赋值

定义:ES6中允许从数组或者对象中提取值,按照对应的位置,对变量赋值.

4.1.数组解构

let [a, b, c] = [1, 2, 3];
  console.log(a)//1
  console.log(b)//2 
  console.log(c)//3 
  //如果解构不成功，变量的值为undefined

4.2.对象解构

 let person = { name: 'zhangsan', age: 20 };
 let { name, age } = person; 
 console.log(name); // 'zhangsan' 
 console.log(age); // 20 
 let {name: myName, age: myAge} = person; // myName myAge 属于别名 
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

4.3.小结

• 解构赋值就是把数据结构分解，然后给变量进行赋值
• 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
• 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
• 利用解构赋值能够让我们方便的去取对象中的属性跟方法

5.剩余参数

允许我们将一个不定数量的参数表示为一个数组,可以很方便的让我们去声明一个不定数量参数的参数.

function sum (first, ...args) { 
console.log(first); // 10 
console.log(args); // [20, 30] 
}
sum(10, 20, 30)

可以利用剩余参数搭配解构赋值进行浅拷贝

let{...newObj}=obj

6.拓展运算符(展开语法)

拓展运算符可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
 ...ary // 1, 2, 3 
 console.log(...ary); // 1 2 3,相当于下面的代码 
 console.log(1,2,3);

拓展运算符可以用于合并数组

// 方法一
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
   // 方法二
 ary1.push(...ary2);

拓展运算符可以用于浅拷贝

var newObj = {...obj}