ES6、ES7、ES8学习指南（二）模板字符串、解构赋值、延展操作符、对象属性简写、Promise、支持let与const
| 版本 | 发布时间 | 新特性 |
|---|---|---|
| ES5 | 2009年11月 | 扩展了Object、Array、Function的功能等 |
| ES6 | 2015年6月 | 类、模块化、箭头函数、函数参数默认值等 |
| ES7 | 2016年3月 | includes，指数操作符 |
| ES8 | 2017年6月 | async/await，Object.values()，Object.entries()，String padding等 |
ES6特性
5.模板字符串
模板字符串，使得字符串的拼接更加的简洁、直观。
不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.';
使用模板字符串
var name = 'Your name is ${first} &{last}.';
6.解构赋值
解构赋值语法是JavaScript的一种表达式，可以方便的从数组或对象中快速提取值给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one);//"one"
console.log(two);//"two"
console.log(three);//"three"
//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first);//"one"
console.log(last);//"four"
//你也可以这样写
var a, b;//先声明变量
[a, b] = [1, 2];
console.log(a);//1
console.log(b);//2
如果没有从数组中的获取到值，你可以为变量设置一个默认值
var a, b;
[a = 5,b = 7] = [1];
console.log(a);//1
console.log(b);//7
通过解构赋值可以方便的交换两个变量的值
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a);//3
console.log(b);//1
获取对象中的值
const student = {
name: 'Ming',
age:'18',
city:'Shanghai'
};
const {name,age,city} = student;
console.log(name);//"Ming"
console.log(age);//"18"
console.log(city);//"Shanghai"
7.延展操作符（Spread operator）
延展操作符...可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造对象时，将对象表达式按key-value的方式展开。
语法
函数调用：
myFunction(...iterableObj);
数组构造或字符串：
[...iterableObj, '4', ...'hello', 6];
构造对象时，进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：
let objClone = { ...obj };
应用场景
在函数调用时使用延展操作符
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
//不使用延展操作符
console.log(sum.apply(null, numbers));
//使用延展操作符
console.log(sum(...numbers));//6
构造数组
没有展开语法的时候，只能组合使用push，splice，concat 等方法，来将已有数组元素变成新数组的一部分。有了展开语法，构造新数组更简单优雅：
const students = ['Jine', 'Tom'];
const persons = ['Tony', ... students,'Aaron','Anna'];
console.log(persons);//['Tony', 'Jine', 'Tom','Aaron','Anna']
和参数列表的展开类似，...在构造字数组时，可以在任意位置多次使用
数组拷贝
var arr = [1, 2, 3];
var arr2 = [...arr];//等同于arr.slice()
arr2.push(4);
console.log(arr2);//[1, 2, 3, 4]
展开语法和Object.assign()行为一致，执行的都是浅拷贝（只遍历一层）。
连接多个数组
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr, ...arr2];//将arr2中所有元素附加到arr1 后面并返回
//等同于
var arr4 = arr1.concat(arr2);
在ECMAScript 2018中延展操作符增加了对对象的支持
var obj1 = { foo: 'bar', x: 42};
var obj2 = { foo: 'baz', y: 13};
var cloneObj = { ...obj1 };
//克隆后的对象： { foo: "bar", x: 42}
var mergeObj = { ...obj1, ...obj2 };
//合并后的对象：{ foo: "baz", x: 42, y: 13}
在React中的应用
通常我们在封装一个组件时，会对外公开一些 props 用于实现功能。大部分情况下在外部使用都应显示的传递 props 。但是当传递大量的 props 时，会非常繁琐，这时我们可以使用...（延展操作符，用于取出参数对象的所有可遍历属性）来进行传递。
一般情况下我们应该这样写
<CustomComponent name = 'Jine' age = {21} />
使用…， 等同于上面的写法
const params = {
name: 'Jine',
age: 21
}
<CustomComponent {...params} />
配合解构赋值避免传入一些不需要的参数
var params = {
name: '123',
title: '456',
type: 'aaa'
}
var { type, ...other } = params;
<CustomComponent type = 'normal' number = {2}{...other}>
//等同于
<CustomComponent type = 'normal' number = {2} name = '123' title = '456'>
8.对象属性简写
在ES6中允许我们在设置一个对象的属性时不指定属性名。
不使用ES6
const name = 'MIng', age = '18', city = 'Shanghai';
const student = {
name: name,
age: age,
city: city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
对象中必须包含属性和值，显得非常冗余
使用ES6
const name = 'MIng', age = '18', city = 'Shanghai';
const student = {
name,
age,
city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
对象中直接写变量，非常简洁
9.Promise
Promise是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现，ES6将其写进了语义标准，统一了用法，原生提供了Promise对象。
不适用ES6
嵌套两个setTimeout回调函数：
const name = 'MIng', age = '18', city = 'Shanghai';
const student = {
name,
age,
city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
使用ES6
var waitSecond = new Promise(function(resolve, reject){
setTimeout(resolve,1000);
});
waitSecond
.then(function(){
console.log("Hello");//1秒后输出"Hello"
return waitSecond;
})
.then(function(){
console.log("Hi");//2秒后输出"Hi"
});
上面的代码用两个then来进行异步编程串行化，避免了回调地狱
10.支持let与const
在之前JS是没有块级作用域的，const与let填补了这方面的空白，const与let都是块级作用域。
使用var定义的变量为函数级作用域：
{
var a = 10;
}
console.log(a);//输出10
使用let与const定义的变量为块级作用域
{
let a = 10;
}
console.log(a);//-1 or Error"ReferenceError: a is not defined"
啊啊啊啊啊看完了。加油！