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"

啊啊啊啊啊看完了。加油！