ES6（一）：let和const、模板字符串、函数默认值、剩余参数、扩展运算符、箭头函数

一、let和const声明变量

关于ES6的内容如果遇到不会的可以查阅文档：阮一峰ES6

1.变量不能重复声明

下面这样会报错，而var就不会

let a = 1;
let a = 2;

2.块儿级作用域

大括号里（if else while for等）使用let声明变量的话，在外边是找不到的。但是var就可以

if (1==1){
    let b = 2;
}
console.log(b);

3.不存在变量提升

这样写会报错

console.log(c);
let c = 3;

但是如果用var 的话，就相当于是

var c;
console.log(c);
c = 3;

4.const声明变量

const也不能重复声明，也是块级作用域，也不存在变量提升，但是和let不同的是，const赋值之后，不能再修改，还有就是for循环不能用const
比如我这么写，var和let都不会报错，但是const会报错

const d = 1;
d = 2;
console.log(d);

5.优点

（1）for循环中用let比较奶思

比如下面这个for循环，如果用var i = 0，那么最后结果是 5 5 5 5 5 ，这是因为用var是在全局只声明一个变量i，那么每一次循环，全局的i都会改变，里面的console.log(i)指向的都是同一个i，所以最后输出的是55555

for(let i = 0; i < 5; i++){
  setTimeout(()=>console.log(i),1000)//0 1 2 3 4
}

但是如果使用let声明就不一样了，i只在当前作用域生效，每一次循环都会重新声明变量，上面的代码其实就类似这样：

for(let i = 0; i < 5; i++){
	let i = 当前i的值;
  	setTimeout(()=>console.log(i),1000)//0 1 2 3 4
}

你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算（如+1运算）。

也正是因为如此，for循环中不能使用const定义变量，因为const定义后的变量不可更改，不能在上一轮循环的基础上进行计算(如++)再重新赋值给本轮声明

（2）for循环分为父作用域和子作用域

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域（同一个作用域不可使用 let 重复声明同一个变量）。

（3）不会污染全局变量

除此之外，let和const不会污染全局变量，比如我如果这么写

var RegExp = 100;
console.log(RegExp);
console.log(window.RegExp);

那么最后的结果是两个100，window对象直接被改了，但是如果用let
第一个是100，第二个结果还是window对象的RegExp函数

let RegExp = 100;
console.log(RegExp);
console.log(window.RegExp);

综上所述：默认情况下用const，如果变量后面需要被修改再用let

二、模板字符串

比如有一个div，我想往里面塞下面这些内容：

<ul>
      <li>
            <p id="dj">从蓬莱写到仙台，哥们儿代码信手拈来</p>
      </li>
</ul> 

按照往常的写法，我们是这么写的：

const div = document.querySelector('div');
let id = 'dj';
let text = '从蓬莱写到仙台，哥们儿代码信手拈来';
div.innerHTML = "<ul><li><p id=" + id + ">" + text + "</p></li></ul>";

真的是相当麻烦啊，但是现在，我们可以这么写：
使用tab上面那个小点点包起来，里面的变量使用${变量名}来替换，非常奈斯

let id = 'dj';
let text = '从蓬莱写到仙台，哥们儿代码信手拈来';
div.innerHTML = `<ul>
    <li>
        <p id=${id}>${text}</p>
    </li>
</ul>`;

三、函数默认值、剩余参数、扩展运算符

1.函数默认值

如果我们想写一个求和函数，要给个默认值的话，搁以前得这么写：

function add(a, b) {
    a = a || 10;
    b = b || 20;
    return a + b;
}
console.log(add());

但是在ES6中，就非常easy了：

function addd(a = 10, b = 20) {
    return a + b;
}
console.log(addd());

当然啊，如果下面这么写会报错：

function addd(a = 10, b) {
    return a + b;
}
console.log(addd(20));

这是因为啥捏，调用函数给的值是按顺序的，这么写a是20，b没赋值，所以不行

当然啊，这个默认值也可以是一个函数

function add2(a = 10, b = getVal(5)) {
    return a + b;
}

function getVal(val) {
    return val + 5;
}
console.log(add2());  //20

2.剩余参数

我把它理解为代替arguments伪数组的一个真正的数组
比如说我要干一件事儿，我要干啥呢，我要把一个对象儿中的属性名和属性值拿出来传给另一个对象。按照ES5的写法，如果不确定用户传几个参数，我们肯定是使用arguments伪数组来接收

let book = {
    title: '前端之王',
    name: 'zzy',
    age: 18
}

function pick(obj) {
    let result = {};
    for (let i = 1; i < arguments.length; i++) {
        result[arguments[i]] = obj[arguments[i]];
    }
    return result;
}
let bookData = pick(book, 'title', 'name', 'age');
console.log(bookData);

但是在ES6中，我们可以获取一个真正的数组。使用（…+名字）这种语法来做形参，返回的是一个数组，但是这个一定要写在形参的最后一个。比如下面这个例子，obj对应book，args就是后面那三个属性名构成的数组
慢慢理解理解，问题不大。

let book = {
    title: '前端之王',
    name: 'zzy',
    age: 18
}

function pick(obj, ...args) {
	console.log(args);  //['title', 'name', 'age']
    let result = {}; // 定义一个空对象
    for (let i = 0; i < args.length; i++) {
    //把对象中的属性值拿过来，给空对象（如果该对象没有这个属性，那么就添加一个）
        result[args[i]] = obj[args[i]];
    }
    return result;
}
let bookData = pick(book, 'title', 'name', 'age');
console.log(bookData);

3.扩展运算符

扩展运算符：将一个数组（或对象）分割，并将数组的各个项作为分离的参数传给函数。其实就是把数组或对象拆开
1、比如我要获取数组的最大值，以前我们会使用apply

const arr = [123, 545, 34, 234, 5];
console.log(Math.max.apply(null, arr));

但是现在我们可以这样写

console.log(Math.max(...arr));

2、其实也可以把对象里的东西拆开

let obj1 = {x:100, y:200};
let obj2 = {
    a:1,
    ...obj1,
    b:2
}
console.log(obj2);  //{a: 1, x: 100, y: 200, b: 2}

四、箭头函数

1.箭头函数的语法

在ES5中这样定义函数：

let add = function (a,b) {
    return a + b;
}

但是在ES6中，我们可以这么写：

let add = (a,b) => {
    return a + b;
}

如果只有一个返回值，我们甚至可以把return省略：

let add = (a, b) => a + b;

如果我们返回的是一个对象或者数组什么的，要加()把它包起来才行，不然会报错

let getObj = id => ({ id: id, name: 'zzy' });
console.log(getObj(007)); // id: 007, name: 'zzy'

2.对象中的函数和箭头函数

比如一个Person对象，里面有eat方法：

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
    // 简写版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

3.箭头函数的this指向

简单来说，想知道箭头函数中的this指向谁，就看这个箭头函数外边有没有包裹函数，如果它外面有函数，那么this指向的就是外层包裹函数的this，如果没有包裹函数，this指向的就是window。

看几个例子就明白了：

（1）例1

定义一个函数，定义一个对象，使用bind让函数中的this指向这个对象
这样的话，fn里的this指向的就是obj，返回值返回一个匿名箭头函数，箭头函数中的this指向的和包裹它的fn中的this指向相同，也是obj。
这里还要注意bind的特性，bind不会更改原函数，而是复制一份原函数生成一个新函数，新函数中this的指向改变，所以如果bind更改绑定后，调用fn的话，还是输出window

let obj = { name: 'zzy' };  //定义一个对象，让fn的this指向这个对象
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}
//更改fn函数的this指向
let newfn = fn.bind(obj);  //bind不会更改原函数，复制一份新的给newfn
fn();  //window
newfn(); //obj

（2）例2

如果我定义一个对象，里面写个方法，方法里面的this指向的是函数的调用者，也就是Person这个对象，所以最后输出的结果是18

let Person = {
    name: 'zzy',
    age: 18,
    getAge: function () {
        console.log(this.age);
    }
}
Person.getAge();  //18

但是我如果把这个函数写成箭头函数，那么this就往外边查找，指向window

let Person = {
    name: 'zzy',
    age: 18,
    getAge: () => {
        console.log(this.age);
    }
}
Person.getAge();  //undefined

这里还有个注意点：对象有大括号，但不产生作用域

（3）例3

比如我定义一个Dj对象，里面有个事件监听，点击页面调用另一个方法
那么这么写会报错，因为this指向的是document，document里面根本没有dance方法

let Dj = {
    id: 007,
    drop: function () {
        document.addEventListener('click', function () {
        	console.log(this);  //document
            this.dance();
        })
    },
    dance: function () {
        console.log('drop the beat');
    }
}
Dj.drop();  //报错

但是如果我把监听事件里的函数写成箭头函数，this的绑定就消失了，此时this指向的是外层包裹函数的this，也就是drop函数里的this，也就是Dj对象，这样的话就可以找到dance方法了

let Dj = {
    id: 007,
    drop: function () {
        document.addEventListener('click', () => {
            console.log(this);  //Dj
            this.dance();
        })
    },
    dance: function () {
        console.log('drop the beat');
    }
}
Dj.drop();  //drop the beat

那如果我把drop也写成箭头函数呢？因为箭头函数没有this绑定，此时就会往上找，而对象的大括号没有作用域，所以this就会找到window，懂了吗baby？

let Dj = {
    id: 007,
    drop: () => {
        document.addEventListener('click', () => {
            console.log(this);  //window
            this.dance();
        })
    },
    dance: function () {
        console.log('drop the beat');
    }
}
Dj.drop();  //报错

4.箭头函数的注意事项

1.使用箭头函数，函数内部没有arguments
2.箭头函数不能用来构造函数，因为function函数是一个对象，但是箭头函数不是一个对象，实际上箭头函数就是个语法糖