ES6新增常用特性及详解

ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

JavaScript发展的时间轴：

1、1995：JavaScript诞生，它的初始名叫LiveScript。
2、1997：ECMAScript标准确立。
3、1999：ES3出现，与此同时IE5风靡一时。
4、2000–2005： XMLHttpRequest又名AJAX。
5、2009： ES5出现，也就是我们现在用的，例如foreach，Object.keys，Object.create和JSON标准。
6、2015：ES6/ECMAScript2015出现。

一，不一样的变量声明：const和let

ES6新增了let和const来声明变量，主要是解决var声明变量所造成的困扰和问题：

• var不能用于定义常量
• var可以重复声明变量
• var存在变量提升
• var不支持块级作用域

let和const解决了以上问题如下：

不可以重复声明变量

let site = ‘itLike’;
let site = ‘itLike’;
console.log(site);

不存在变量提升

console.log(site);
let site = ‘itLike’;

可以定义常量

const E = 2.718;
E = 2.71;
console.log(E);
// 引用类型
const LK = {
name:‘itLike’,
intro: ‘喜欢IT, 就上撩课(itLike.com)’
};
LK.name = ‘撩课’;
console.log(LK);

块级作用域
如果用var定义变量，变量是通过函数或者闭包拥有作用域；但，现在用let定义变量，不仅仅可以通过函数/闭包隔离，还可以通过块级作用域隔离。
块级作用域用一组大括号定义一个块，使用 let 定义的变量在大括号的外部是访问不到的，此外，let声明的变量不会污染全局作用域。

{let site = ‘itLike’;}
console.log(site);
if(1){ let str = ‘04’; }
console.log(str);

二，解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

*解构的目标=解构源。

1,变量解构赋值（数组解构）

let nameArr = [‘撩课’, ‘小撩’, ‘小煤球’];
let name1 = nameArr[0];
let name2 = nameArr[1];
let name3 = nameArr[2];
// 解构写法
let [name1, name2, name3] = nameArr;
console.log(name1, name2, name3);

2,变量解构赋值（对象解构）

// 写法1
let {name, age, sex}
= {name: ‘小煤球’, age: 1, sex: ‘公’};
// 结果: 小煤球 1 公
console.log(name, age, sex);
// 写法2： 解构重命名
let {name: lkName, age: lkAge, sex: lkSex}
= {name: ‘小煤球’, age: 1, sex: ‘公’};
// 结果: 小煤球 1 公
console.log(lkName, lkAge, lkSex);
// 写法3： 可以设置默认值
let {name, age, sex = ‘公’}
= {name: ‘小煤球’, age: 1};
console.log(sex); // 公
// 写法4：省略解构
let [, , sex] = [‘小煤球’, 1, '公 '];
console.log(sex);

三，箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

箭头函数最直观的三个特点：
不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字

基本用法：

var f = v => v;
//等价于
var f = function(a){
return a;
}
f(1); //1

当箭头函数没有参数或者有多个参数，要用 () 括起来

var f = (a,b) => a+b;
f(6,2); //8

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8

箭头函数适合使用的场景
ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样的代码，为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 this 就行。

四，模板字符串

而对ES6来说

基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定；
ES6反引号(``)直接搞定；

$(“body”).html(This demonstrates the output of HTML content to the page, including student's ${name}, ${seatNumber}, ${sex} and so on.);

五，新数据类型Symbol

Es6新增的一种数据类型，表示独一无二的值

{
let a1 = Symbol.for(‘a1’)
//后面再对a1赋值也是无效的，a1的值依旧是’a1’
}

六，数组的扩展

数组创建：
1，Array.from() 遍历数组元素，也可遍历类似数组的兑现和可遍历的对象
2，Array.of() 将一组值转换为数组

扩展的方法：
1，find() 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
2，findIndex() 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
3，fill() 将一定范围索引的数组元素内容填充为单个指定的值。
4，entries() 遍历键值对，返回下标和值
5，keys() 遍历键名。
6，includes() 数组是否包含指定值。
注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。
7，flat() 嵌套数组转一维数组
8，flatMap() 先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

七，对象的扩展

1，Object.is(value1,value2)：判断两个参数是否相等
2，Object.assign(value1,value2)：浅拷贝，拷贝出来的结果是 [value1,value2]（value1和value2都是对象）
3，扩展运算符：{a,b,…c}={a:’a’,b:’b’,c:’c’,d:’d’}→c={c:’c’,d:’d’}
4，for…in循环遍历对象自身的和继承的可枚举属性
5，Object.keys(obj)：返回一个数组，返回的是数组成员的下标
6，Object.getOwnPropertySymbols(obj)：返回的是Symbol定义的值
7，Object.ownKeys(obj)：可以拿到所有的值，包括Symbol定义的和非Symbol定义的

八，iterator 和 for …of 循环

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费

for…of 是 ES6 新引入的特性是为了修复了 ES5 引入的 for…in 的不足

在循环对象属性时使用 for…in。在遍历数组时使用for…of。
for…in 循环出的是 key，for…of 循环出的是 value
for…of 不能循环普通的对象，需要通过和 Object.keys()搭配使用

const fruits = [‘apple’,‘coconut’,‘mango’,‘durian’];
fruits.fav = ‘my favorite fruit’;
//ES6中的for…of循环，遍历属性值
for(let fruit of fruits){
console.log(fruit);
}
//支持终止循环，也不会遍历非数字属性
for(let fruit of fruits){
if(fruit === ‘mango’ ){
break;
}
console.log(fruit); //apple coconut durian
}

九，set 和 map 数据结构

都是用来存储数据用的，但是存储的数据格式不同
set 直接存储 任意类型数据
map 存储数据的时候，必须以key，value的形式，
set 使用forEach 遍历的时候，key和value值是一样的
而map 遍历的时候，key就是存进去的对象的key，value就是存在的值

基本用法

set 数据容器 能够存储无重复值数据的有序列表

• 通过 new set() 方法创建容器 通过add() 方法添加
• set.size获取存储的数据的数量

var set = new Set()
set.add(1);
set.add(‘1’);
console.log(set)
console.log(set.size)
Set内部使用Object.is()方法来判断两个数据项是否相等
利用数组来构造set 且set 构造器不会存在重复的数据

十，Promise

主要用于异步计算。可将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。可在对象间传递和操作 promise，帮助我们处理队列

promise 有三个状态：
1，pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败

resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤；promise状态一经改变不会再变。

Promise 对象的状态改变，只有两种可能： 从 pending 变为 fulfilled。从 pending 变为 rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

方法

.then()方法 ：
then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。
可有两个参数，第一个是成功 resolve 调用的方法，第二个是失败 reject 调用的方法

.catch()方法：

• 它可以和 then 的第二个参数一样，用来指定 reject 的回调
• 它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中

.all()方法：
Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
只有全部为resolve才会调用 通常会用来处理 多个并行异步操作

特点：

对象的状态不受外界影响

使用场景

• 主要用于异步计算
• 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
• 可以在对象之间传递和操作promise，帮助我们处理队列
• 封装API接口和异步操作

十一，ES6中的类(class)

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。
class其实是对function的简化 class的声明

//基本定义和生成实例
class Parent{
constructor(name){
this.name = name;
}
}
let parent = new Parent(‘xiaomao’)
//继承
class Child extends Parent{
//子类怎么去覆盖父类,this一定要放在super后面
constructor(name = ‘child’){
super(name); //若super()，则所有参数都是父类的
this.type = ‘child’; //子类增加的属性
}
}

十二， Generator函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
形式上，Generator 函数是一个普通函数，但是有两个特征。
一是，function关键字与函数名之间有一个星号；
二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）
三是，执行yield的时候要配合next（）使用

function* helloWorldGenerator() {
yield ‘hello’;
yield ‘world’;
return ‘ending’;
}
var hw = helloWorldGenerator();
hw.next()
上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。

然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。
不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，
也就是前面介绍的遍历器对象（Iterator Object）。