ES6 常用语法

ES6的变量声明

ES6新增了let和const来定义变量，

var：定义全局变量，没有块的概念，可以跨块访问, 不能跨函数访问。

let：定义局部变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问

const：定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

注：const是可以被修改的，对象是引用类型的，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。

var：全局变量

 {
    var a=1
  }
  a=2
    function fn(){
      var b=1
    }
    console.log(a)//a=2
    console.log(b)//b is not defined

let：局部变量

 {
    let a=1
  }
    function fn(){
      let b=1
    }
    console.log(a) //a is not defined
    console.log(b) //b is not defined

const：定义常量

  {
    const a=1
  }
    function fn(){
      const b=1
    }
    const c={
      name:"孙悟空",
      age:12
    }
    const d = 8
    console.log(a) //a is not defined
    console.log(b) //b is not defined
    c.name = "猪八戒"
    console.log(c) //{name: '猪八戒', age: 12}
    d=6
    console.log(d) //Assignment to constant variable.

变量的解构赋值

通过数组或者对象的方式，对一组变量进行赋值，这就是解构

数组解构

     let a=1,b=2,c=3
     let [a,b,c] = [1,2,3]

两者的效果一样

解构是可以有默认值的

    let [a=1]=[]
    console.log(a) //1

    let [b,c] = [2]
    console.log(b+','+c) //2,undefined

null和undefined的区别

null 表示值为null

undefined 表示没有，有默认值会采用默认值

    let [a,b=1]=[2,undefined]
    console.log(a+','+b) //2,1

    let [c,d=5] = [2,null]
    console.log(c+','+d) //2,null

对象解构

    let {a,b}={b:"我是b",a:"我是a"}
    console.log(a+','+b)  //我是a,我是b

对象解构与数组解构不同的是变量的取值，数组变量取值是由它的位置决定的，而对象是根据键来获取值的

注意：如果变量a在之前已经被定义，如果要再去解构a，需加上圆括号（）

    let a="孙悟空";
    ({a}={a:"猪八戒"})
    console.log(a)  //猪八戒

扩展运算符

在写代码过程中，如果定义的方法不知道参数的个数时，可以使用扩展运算符作为参数

    function fn(a,b){
      console.log(a + ','+ b +',' +c)//c is not defined
    }
    fn(1,2)

c参数没有使用，所有报错了，如果用扩展运算符就不会

    function fn(...arg){
      console.log(arg[0] + ','+ arg[1] +',' +arg[2])//1,2,undefined
    }
    fn(1,2)

注意：在数组赋值中，直接赋值会指向同一个内存地址，如果使用扩展运算符会开辟一个新的内存地址，什么意思呢？看下面代码

    let arr1=[1,2,3,4,5]
    let arr2=arr1
    console.log(arr1)
    console.log(arr2)
    console.log('---------------------')
    arr2.push(6)
    console.log(arr1)
    console.log(arr2)

输出结果

 指向同一内存地址，修改其中一个都会把指向该内存地址的值修改，下面使用扩展运算符

    let arr1=[1,2,3,4,5]
    let arr2=[...arr1]
    console.log(arr1)
    console.log(arr2)
    console.log('---------------------')
    arr2.push(6)
    console.log(arr1)
    console.log(arr2)

输出结果

rest运算符

rest表示剩余部分，表示后面剩余的参数

function fn(a,b,...arg){
  console.log(arg.length)
}
fn(1,2,3,4,5,6) //输出:4

 去除前面两个数1和2，后面还剩4个

循环 for...of

在ES6中循环数组，使用for...of，可以避免我们开拓内存空间，增加代码运行效率，

    let arr=[1,2,3,4,5]
    for(let val of arr){
      console.log(val)
    }

箭头函数

 箭头函数有助于我们清楚地找到函数名、参数名和方法体，看看下面代码是什么意思

    let fn = (a, b) => a + b
    console.log(fn(1,2)) 

没错，上面的结果就是输出3，等同于下面的代码

    function fn(a,b) {
      return a+b
    }
    console.log(fn(1,2))

是不是第一种更加简洁呢，在箭头函数中还可以设置默认值，但是要注意的是，如果箭头函数方法体中有两句或两句以上的代码，就要加{ }大括号

模板字符串

在进行拼接字符串的时候，我们一般会这样写

    let name="孙悟空",age=23
    console.log('name:' + name +',age:' +age) //name:孙悟空,age:23

这样是不是很繁琐，也容易出错，如果使用ES6语法中的模板字符串就比较简单，但是是使用反引号` `,而不是单引号

    let name="孙悟空",age=23
    console.log(`name:${name},age:${age}`) //name:孙悟空,age:23