ECMAScript 6.0已经在2015年6月17日正式发布（以下简称ES6）到现在已经过去了2年时间，发布的很多新的特征已成为了标准，如今ES8草案也公布了，Javascript的未来还是值得期待的；我从去年下半年开始接触ES6的，在代码上搭配babel来开发基于React框架的应用，发现其中许多特性确实简化了很多代码的编写，之前一直没有系统性得去学习这些新的特征，这篇博客算是我的ES6学习笔记，从简单的数组的一些新方法开始，ES6模块系统、class类...到较复杂的generator函数结束。完成之后，我会再陆续记录ES7、ES8..学习笔记。本篇包含以下内容：
新增includes方法，类似于String.prototype.includes，在这之前我们一般是使用下面这样的代码来判断数组中是否存在某个元素,
1if (arr.indexOf(el) !== -1) { 2 ... 3}
这里用indexOf有两个问题：
注意：includes只接受两个参数，接收2参数，查询的项以及查询起始位置
1// include 返回boolean值 2[1, 2].includes(3); // false 3[1, 2, NaN].includes(NaN); // true 4["a", "b", "c"].includes('a', 'b'); // true 5["a", "b", "c"].includes('a', 'd'); // true 6["a", "b", "c"].includes('a', 3); // false
from 方法用于将类似数组的对象（key-value结构）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）转换成数组。 例如：
1console.log(Array.from('hello')); // [ 'h', 'e', 'l', 'l', 'o' ] 2
1const objLike = { 0: 0, 1: 1, 2: 2, length: 3 }; 2console.log(Array.from(objLike)); // [0, 1, 2]
from还接受第二个方法类型的参数，类似map方法返回经方法处理过的值。
1const objLike = { 0: 0, 1: 1, 2: 2, length: 3 }; 2console.log(Array.from(objLike, (k) => k+=1;))); // [1, 2, 3]
of方法比from更简单，将一组值转换成数组,为了弥补使用new Array()构造数组的奇怪行为。 先看下new Array为我们做了什么？
1// 构造函数 new Array 2console.log(new Array()); // [] 3console.log(new Array(1)); // [undefined x 1] 4console.log(new Array(1,2,3)); // [1,2,3]
1// Array.of() 2console.log(Array.of(); // [] 3console.log(Array.of(1)); // [1] 4console.log(Array.of(1,2,3)); // [1,2,3] 5console.log(Array.of(undefined)); // [undefined]
keys 、values很好理解，分别代表获取数组的索引和对应的值,entries则是输出这两个值。
1// keys 2for(let a of [1, 2, 3, 4, 5].keys()) { 3 console.log(a); // 0,1,2,3,4 4} 5// values 6for(let b of [1, 2, 3, 4, 5].values()) { 7 console.log(b); // 1,2,3,4,5 8} 9// entries 10for(let a of ['a', 'b'].entries()) { 11 console.log(a) // [0, 'a'] [1, 'b'] 12}
注意：
1const arr = [1, 4, -5, 10, NaN]; 2console.log(arr.find((k) => k > 5)); // 10 3console.log(arr.findIndex((k) => k > 1)); // 1 4console.log(arr.find((k) => Object.is(NaN, k) )); // NaN
fill可以理解为数组元素替换，可以指定填充开始位置和结束位置，copyWithin则可以理解为用指定元素填充到数组的对应位置， arr.copyWithin(target, start, end) target: 从指定下标开始 index:复制元素的下标 end: 复制元素结束下标 来看下面的例子：
1// fill 2console.log([1,2,3].fill(4)); // [4, 4, 4] 不指定开始和结束，全部替换 3console.log([1,2,3].fill(4,1)); // [1, 4, 4] 4console.log([1,2,3].fill(4,1)); // [1, 4, 4] 5console.log([1,2,3].fill(4,1,1)); // [1, 2, 3]
1// copyWithin 2console.log([1,2,3].copyWithin(1)); // [1, 1, 2] 3console.log([1, 2, 3, 4, 5, 6, 7].copyWithin(2)); // [1, 2, 1, 2, 3, 4, 5] 未指定复制元素的起始位置，默认用原数组进行填充替换 4console.log([1, 2, 3, 4, 5, 6].copyWithin(2, 1, 4)); // [1, 2, 2, 3, 4, 6] 可以理解为从下标为2元素开始，复制下标1-4的数组进行替换填充原数组
使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量; 可以很方便得将值和从数组中、属性从对象中提取到不同的变量中： 在写React的过程中，也会用到JSX的一个类型写法（Spread Attributes），中文名延展属性，例如子组件需要需要父组件传递a、b、c参数：
1// 子组件需要对应的a、b、c三个参数 2<Component a = {this.props.a} b = {this.props.b} c = {this.props.c} />;
JSX延展属性写法：
1// 子组件需要对应的a、b、c三个参数 2<Component {...this.props} />; 3
数组和对象的解构：
1// 数组的解构赋值 2 3[a, b, ...rest] = [1, 2, 3, 4, 5]; 4console.log(a); // 1 5console.log(b); // 2 6console.log(rest); // [3, 4, 5]
1// 对象的解构赋值 2 3let obj = {a:1, b:2, c:3}; 4const {a , b} = obj; 5console.log(a); // 1 6console.log(b); // 2
1// 如果没有实际值，得需要使用‘,’进行占位： 2 3let colors = [ "red", "green", "blue" ]; 4let [ , , thirdColor] = colors; 5console.log(thirdColor); // "blue"
1// 如果你想要获取特定的数组项，并且把剩余的项归在一个数组，那么你可以这样运用 rest操作符 来解构 2 3const color = ['red', 'blue', 'orange']; 4const [red, ...rest] = color; 5console.log(red); // 'red' 6console.log(rest); // ['blue', 'orange']
扩展运算符和剩余操作符都是以三点省略号开头，二者很像，用法上还是有一定区别:
1// 剩余操作符在函数中的使用 2 3function fn(a, b, ...args) { 4 console.log(args); 5} 6fn(1, 2, 3, 4, 5 ); // [3, 4, 5] 7
扩展运算符和剩余操作符都是以三点省略号开头，二者很像，用法上还是有一定区别。扩展运算类似于使用‘...’分解数组中的值、对象属性；而剩余操作符是使用‘...’是用来解构和提取数据，多个元素合成一个元素。
这里将var、let和const进行简单对比：
1// let和const均不能重复声明 2const a = 'Hi'; 3const a = 'Hello'; // Identifier 'a' has already been declared
1// const 、let的块级作用域(block-scoping) 2const city = 'Beijing'; 3{ 4 const city = 'Shanghai'; 5 console.log(city); // Shanghai 6} 7console.log(city); // Shanghai
1// const 、let的块级作用域(block-scoping),let在for循环里 2for(let i=0;i<3;i++) { 3} 4console.log(i); // undefined
1// const 、let的块级作用域(block-scoping),let在if条件 2if(..) { 3 let a = 'boo'; 4} else { 5 ... 6} 7console.log(a); // undefined
1// let和const 声明的变量不再属于window的属性 2const PI = 3.14159; 3console.log(window.c); // undefined
关于暂存死区：在下面的这个例子，在let初始化之前，使用let重复定义在块中的变量，这时会抛错，因为这个变量存在于定义到待初始化处理的一个'暂存死区 '中，具体可以查看MDN上的解释。
1if (x) { 2 let foo; 3 let foo; // TypeError thrown. 4}
在ES6中利用语法糖使用“箭头”（=>）定义函数。
1var f = (x) => x; 2// 等同于 3var f = function (x) { return x };
如果没有参数，圆括号也可以省略了，
1var f = => return true; 2// 等同于 3var f = function () { return true };
1// 箭头函数写法 2[1,2,3].map(x => x + 1 ); 3// 等同于 4[1,2,3].map(function (x) { 5 return x + 1; 6}); 7
箭头函数与普通函数的区别：
ES6引入了一种新型的反撇号（`）字符串字面量语法；
1// 利用ES6反引号定义 2`<div> 3<span>keep the ${things} simple stupid .</span> 4</div>` 5// 等同于 6'<div><span>keep the'+things+' simple stupid .</span>'+ 7+'</div>'
什么是Promise?
Promise是抽象异步处理对象以及对其进行各种操作的组件;
Promise对象出现避免了使用层层嵌套的回调函数，再也不用担心陷入地狱回调了，Promise的意义就在于 then 链式调用 ，它避免了异步函数之间的层层嵌套，将原来异步函数的嵌套关系 转变为便于阅读和理解的 链式步骤关系，代码也更加直观。
1// 回调地狱 2// a请求 3$.ajax({ 4 url: 'a', 5 dataType:'json', 6 success: function(data) { 7 // 获取data数据 传给下一个b请求 8 var id = data.id; 9 $.ajax({ 10 url:'b', 11 data:{"id":id}, 12 success:function(){ 13 // 下一个请求 c 14 } 15 }); 16 } 17});
1// Promise写法 2var a = function() { 3 var promise = new Promise(function(resolve, reject){ 4 $.ajax({ 5 url: 'a', 6 dataType:'json', 7 success: function(data){resolve(data)} 8 error: function(e){reject(e)} 9 }); 10 }) 11 return promise; 12} 13...b,c... 14a.then(b.then())
想要创建一个Promise对象，可以使用new来构造一个新的promise对象,例如：
1var promise = new Promise(function(resolve, reject) { 2 // 必须给定一个function作为参数，不然会报错； 3 // 处理结束后、调用resolve 或 reject 4});
大概流程是：
Promise对象有以下几个特点：
Promise方法链: 其实就是在在Promise里把调用的多个方法连在一起作为一个方法链，例如：
1// Promise chain 2function taskA() { 3 console.log("Task A"); 4} 5function taskB() { 6 console.log("Task B"); 7} 8function onRejected(error) { 9 console.log(error); 10} 11var promise = Promise.resolve(); 12promise 13 .then(taskA) 14 .then(taskB) 15 .catch(onRejected)
正常流程A task成功->B task成功-> C task,如果B task失败，将绕过C直接到catch方法，看下面这个例子：
1function taskA(value) { 2 return value +1; 3} 4function taskB(value) { 5 throw new Error('something wrong!'); 6} 7function taskC(value) { 8 console.log(value); 9} 10function onRejected(error) { 11 console.log('catch error: '+ error); 12} 13var promise = Promise.resolve(1); 14promise 15 .then(taskA) 16 .then(taskB) 17 .then(taskC) 18 .catch(onRejected); 19 // catch error: something wrong! value 是undefined
关于Promise 链里如何传递参数？
答案很简单，只需要在前一个任务中增加return，下一个任务能接受到这个参数。例子：
1// Promise chain 2function taskA(value) { 3 return value +1; 4} 5function taskB(value) { 6 return value +2; 7} 8function taskC(value) { 9 console.log(value); 10} 11function onRejected(error) { 12 console.log(error); 13} 14var promise = Promise.resolve(1); 15promise 16 .then(taskA) 17 .then(taskB) 18 .then(taskC) 19 .catch(onRejected); 20 // 4
之前碰到了一个面试题，都知道promise好用，那Promise有哪些缺点：
关于Promise这一节可以参照promise小人书;
Set和Map是ES6新增的集合类型的数据结构:
1.Set可以接受一个数组（或者类数组对象）作为参数，用来初始化; 2.Set类似于数组,但是没有重复值;
1// Set本身是一个构造函数 2console.log(new Set([1,2,3]))
Set内置的方法和属性：
Map是于对象类似的集合类型数据结构，map与object的不同在与，Object是一种“字符串-值”的对应，Map是“值-值”的对应，map没这个限制。
Map内置的方法和属性：
Symbol既不是值也不是对象，它是第七种原始类型，是可以用来作为对象属性键的值。 Symbol的目的就是为了实现一个唯一不重复不可变的值；有两种方法来生产一个Symbol类型的值：
1// Symbol函数 2console.log(Symbol()); // Symbol() 3// Symbol.for方法 4var a = Symbol.for('symbA'); 5var b = Symbol.for('symbA'); 6console.log(Symbol.for('symbA')); // Symbol(symbA) 7console.log(a == b); // true
1var a = Symbol('a'); 2console.log(a); // Symbol(a) 3console.log(typeof(a)) // 'symbol' 4var b = Symbol('b'); 5console.log(b); // Symbol(a) 6console.log(a == b) // false
Symbol可以用作对象属性名，但是区别是无法通过.来定义该属性：
1var symbola = Symbol(); 2var b = {}; 3var b.symbola = 'this is not a symbola!'; 4console.log(b); //{ 'symbola' : 'this is not a symbola!'} 5b = {symbola:'this is a symbola!'}; // { Symbol() : 'this is a symbola!'}
Symbol无法在for...in、for...of被遍历查找到，看下面的例子：
1var a ={'a': 'a','a':'b'} 2for(var i in a ){console.log(i)} // a, b 3a[Symbol('c')] = 'c'; 4console.log(a); // { a: "a", b: "b", Symbol(c): "c" } 5for(var i in a ){console.log(i)} // a, b
Symbol类型的一些应用途径：
可以把模块理解为是一个独立的Javascript文件，在ES的module出现之前，JavaScript一直没有模块系统，先回顾一下前端的模块系统，了解一下什么是模块化？CommonJS又是什么？AMD和CMD规范分别有什么特点？
CommonJs最先源于nodejs社区，关于CommonJS的规范可以查看这里，先看下它的语法：
1// math.js 2exports.add = function() { 3 var sum = 0, i = 0, args = arguments, l = args.length; 4 while (i < l) { 5 sum += args[i++]; 6 } 7 return sum; 8}; 9// increment.js 10var add = require('math').add; 11exports.increment = function(val) { 12 return add(val, 1); 13}; 14 15// program.js 16var inc = require('increment').increment; 17var a = 1; 18inc(a); // 2
CommonJs原先叫ServerJS,仅看名字就知道这个库服务于后端，也就是说在Nodejs等环境下用是没有问题的，但不适用于浏览器端，到了浏览器中，这样引用会出现问题：
社区在解决这个问题的时候产生了分歧：
AMD(异步模块定义)规范既然在浏览器端不支持，那么就改进CommonJS规范，先定义好你需要引用的模块，进行异步加载，在回调函数里执行逻辑代码，制定了一个Modules/Wrappings规范，具体二者有什么区别点击这里
AMD标准是requireJs定义的标准，而CMD是seaJS定义的标准，这两者有什么区别：
1define(["require"], function(require) { 2 // 在这里，模块 a 已经下载并执行好 3 // ... 4 var a = require("./a"); 5 6})
关于二者的区别可以查看知乎回答AMD 和 CMD 的区别有哪些？
modules规范分两部分，一部分是如何导出export，一部分是如何导入import。 任何的值(例如方法、变量)都可以作为一个modules被导出：
1// 文件 a.js 直接导出变量 2export const PI = 3.14; 3const value = 'module'; 4export function helloworld(){ 5 console.log('Hello world~'); 6} 7// 先定义再导出也是正确的 8export {PI, value}; 9// 你也可以使用as进行重命名 10export {name1 as PI, name2 as value};
使用export命令导出模块后，那么可以在其他文件中通过import命令来导入这个模块
1// 按需导入 2import {PI, helloworld} from './a.js'; 3// 对变量进行重命名 4import {PI as p} from './a.js'; 5// 整体导入 6import * as a from './a.js';
default默认导出,export default是输出一个叫做default的变量或方法；它的后面不能再跟变量声明语句：
1// a.js 模块默认导出 2export default function() { 3 console.log('hello world'); 4} 5// 或者这样写 6function helloworld(){ 7 console.log('hello world'); 8} 9export default helloworld; 10// 这样写会导致错误 11export default const helloworld = function() { 12 console.log('hello world'); 13} 14// 引入的时候,不可以使用 类似{helloworld}这样的写法 15import helloworld from './a.js'; 16helloword(); // 'hello world'
关于default：
class是创建类对象与实现类继承的语法糖，旨在让ES5中对象原型的写法更加清晰，易读。 在ES6前，如果想实现class面向对象的例子，我们通常使用function来模拟：
1// 使用function 2function People(name) { 3 this.name = name; 4 this.toSayHello = function () { 5 return console.log('Hello, my name is' + this.name ); 6 } 7} 8 9var p = new People('ES6');
1// 使用class 2class People { 3 constructor(name) { 4 this.name = name 5 } 6 toSayHello() { 7 return console.log('Hello, my name is' + this.name ); 8 } 9} 10
构造函数的缺点：每次实例化一个对象，就会执行构造函数里的代码，因此每当这个类被实例化的时候，这些方法和属性就会被拷贝到实例化出来的对象中,这样就会重复地在内存中分配一定区域来存储这些变量和方法。为了解决这个方法，可以在prototype中来添加该类的一系列常量和方法。定义在prototype的中的方法和属性，新实例出来的对象会进行引用，不会产生“吃内存”的现象。
1// 使用function 2function People(name) { 3 this.name = name; 4} 5 6People.prototype.toSayHello = function () { 7 return console.log('Hello, my name is' + this.name ) 8}; 9 10var p = new People('ES6');
function声明存在变量提升，但class的定义不存在提升；
1// 不会报错 2console.log(helloWorld()); 3 4function helloWorld() { 5 return "Hello World"; 6} 7 8// 报错 9var p = new People(); 10 11class People() { 12}
constructor属性返回对创建此对象的构造函数的引用。例如：
1var a = new Array(); 2a.constructor // function Array(){...} 3a.constructor === Array // true
类相当于实例的原型，所有在类里定义的方法，实例都能继承。但是在方法面前加上static关键字，就表示该方法不会被实例继承，该方法也被称作“静态方法”。 目前ES6只有静态方法，并没有静态属性，在ES7中有关于静态属性的提案，静态属性或方法需要用类名进行调用。
1 2class People { 3 4 //es7对于实例属性的提案，此属性可以在实例中访问到 5 type = 'animal'; 6 7 //es7对于类的静态属性的提案，同样Babel支持 8 static myType = 'static'; 9 10 constructor(name) { 11 this.name = name 12 } 13 toSayHello() { 14 return console.log('Hello, my name is' + this.name ); 15 } 16} 17
通过原型链实现继承：
1// 定义一个动物类 2function Animal (name) { 3 // 属性 4 this.name = name || 'Animal'; 5 // 实例方法 6 this.sleep = function(){ 7 console.log(this.name + '正在睡觉！'); 8 } 9} 10// 原型方法 11Animal.prototype.eat = function(food) { 12 console.log(this.name + '正在吃' + food + '~~'); 13};
将父类的实例作为子类的原型
1function Cat() { 2} 3Cat.prototype = new Animal(); 4Cat.prototype.name = 'cat'; 5var cat = new Cat(); 6console.log(cat.sleep()); // cat 正在睡觉 7console.log(cat instanceof Animal); // true
可以通过extends关键字继承父类的所有属性和方法。
1// 使用class 2class People { 3 constructor(name) { 4 this.name = name 5 } 6 toSayHello() { 7 return console.log('Hello, my name is' + this.name ); 8 } 9} 10// 使用extends Woman 继承了People的所有属性和方法 11class Woman extends People { 12 constructor(name) { 13 super(name); 14 this.name = name; 15 } 16} 17
子类必须在constructor方法中调用super方法，否则新建实例时会报错。因为子类没有自己的this对象，而是继承父类的this对象;
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态。Generator函数的调用方法与普通函数不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，我们可以通过调用 next 方法，使得指针移向下一个状态。如下例子：
1function* stepGenerator() { 2 yield 'step1'; 3 yield 'step2'; 4 return 'it is a generator'; 5} 6var g1 = stepGenerator(); 7g1; // stepGenerator..... 8g1.next(); // Object {value: "step1", done: false} 9g1.next(); // Object {value: "step2", done: false} 10g1.next(); // Object {value: "it is a generator", done: true} 11g1.next(); // Object {value: undefined, done: true}
调用stepGenerator对象的时候，Generator并没有被立即执行，调用next方法时，函数开始执行，next 方法返回一个拥有 value 和 done 两个字段的对象,下次调用 next，函数会从 yield 的下一个语句继续执行,等到整个函数执行完，next 方法返回的 done 字段会变成true。
不仅仅yield语句会中断执行，如果Generator中在yield前有return，同样也会停止执行。
1function* stepGenerator() { 2 return 'it is a generator'; 3 yield 'step1'; 4 yield 'step2'; 5} 6var g1 = stepGenerator(); 7g1; // stepGenerator..... 8g1.next(); // Object {value: "it is a generator", done: true} 9g1.next(); // Object {value: undefined, done: true} 10
总结一下Generator与常见的函数有一些共同点，但也有一些差异：
更多关于Generator: 迭代器和生成器 generators in v8 ES6 In Depth: Generators （...）
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写, Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
Proxy 已经被几乎所有的现代化浏览器兼容。（当然IE不是一个现代化浏览器）,Proxy 接收两个对象参数，一个是需要代理的 object 对象，另一个handler也是一个对象，在这个对象里定义对所代理的对象进行设置的方法。 例子：
1let obj = { 2 a: 1, 3 b: 2 4} 5let handler = { 6 gets (obj, prop) { 7 console.log(obj) 8 console.log(prop) 9 } 10} 11proxy = new Proxy(obj, handler) 12console.log(proxy) // Proxy {a: 1, b: 2} 13console.log(proxy.a) // {a: 1, b: 2} a
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。