JavaScript中的ES6语法

let和const关键字

在es6里面新增了两个声明变量的关键字，let和const，用法和var相似

let、const与var的区别

1.let和const不能重复声明变量

         var num = 100;
         var num = 100;

         let num = 100;
         let num = 100;//会报错

         const num = 100;
         const num = 100;//会报错

可以看到用let和const重复声明的变量，会报错。

2.let和const定义的变量是块级作用域，会被{}限制作用范围

       
         {
             let num = 100
             console.log(num)
         }
         console.log(num)//会报错
         {
             const num = 100
             console.log(num);
         }
         console.log(num);//会报错

3.let和const没有预解析

        console.log(num)
        var num = 100;
        let num = 100;//会报错
        const num = 100;//会报错

let与const的区别

1.let可以重复赋值，const不可以重复赋值

        let num = 100;
        num = 200;

        const num = 100;
        num = 200;//会报错

2.let定义的时候可以不赋值，const定义的时候就要赋值

       let num;
       const num;//会报错

箭头函数

(箭头函数导致this总是指向函数定义生效时所在的对象)

基本用法

ES6允许使用“箭头”（=>）定义函数。

var f = v => v;

上面的箭头函数等同于：

var f = function(v) {
  return v;
};

如果箭头函数不需要参数或多个参数：

var f = () => 5;
//等同于
var f = function(){return 5};

var sum = (num1,num2) => num1 + num2;
//等同于
var sum = function(num1,num2){return num1 + num2}

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({first,last}) => first + ' ' + last;

//等同于
function full(person){
   return person.first + ' ' + person.last;
}

箭头函数的一个用处是简化回调函数。

//ES5写法
[1,2,3].map(function(x)){
    return x * x;
}

//ES6写法
[1,2,3].map(x => x * x);

使用注意点

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

箭头函数this指向问题
箭头函数里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

函数传递参数设置默认值

语法:function 函数名(形参1=默认值1,形参2=默认值2){ }

       function fn(a){
            // 如果没传参，直接输出10，如果传参了，直接输出传入的值
            a = a||10;
            console.log(a)
        }
        fn(20)

        //可以使用函数参数的默认值简写
        function fn(a=10){
            console.log(a)
        }
        fn(100)
// 当箭头函数的形参只有一个，但是有默认值的情况下，不能省略()
        var fn = (a=10)=>console.log(a)

解构赋值

就是可以快速的从对象或者数组里面取出值的语法

解构对象

首先创建一个对象

       let obj = {
            username:"zhangsan",
            age:12,
            password:"123456"
        }

按照之前的写法，获取对象值的方法就是：

       let username = obj.username;
       let age = obj.age;
       let password = obj.password;

现在用解构赋值就可以简写成：

        let {age,username,password} = obj;
        console.log(username,age,password)

解构数组

首先创建一个数组

       let arr = ['hello','world','how'];

按照之前的写法，获取数组元素的方法就是：

       let a = arr[0];
       let b = arr[1];
       let c = arr[2];

现在用解构赋值就可以简写成：

        let [a,b,c] = arr;
        console.log(a,b,c)

模板字符串

es6里面新增了一个定义字符串的符号:反引号 ``，类似于单引号 ‘’ 和双引号 “”。

反引号有两个好处

1.反引号里面可以使用换行

// 反引号里面可以使用换行
        var str = `<ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>`;

2.反引号里面可以使用变量，写在${}里面

// 反引号里面可以使用变量，写在${}里面
        var num = 100;
        var str = `我今年${num}岁`;
        console.log(str)

展开运算符

在es6里面新增一个运算符… 叫做展开运算符

可以数组里面的内容展开

        let arr = ['hello','world'];
        console.log(...arr)

可以把对象里面的内容展开,合并到一个新的对象里面

        let obj = {
            name:"zhangsan",
            age:12
        }
        let obj2 = {
            gender:'男',
            love:"meat",
            ...obj
        }
        console.log(...obj);

可以把数组里面的内容展开，合并到一个新的数组里面

        let arr1 = [12,34,56]
        let arr2 = ['hello','lucy',...arr1];
        console.log(arr2);

可以把展开结果作为函数的实参

        let arr1 = [12,34,56]
        let fn = (a,b,c)=>{
            console.log(a+b+c)
        }
        fn(...arr1)