看这本书是在markdown在做的笔记，更友好的阅读方式访问： github es6.md(https://github.com/EarlyBirdss/Study-Diary/blob/master/es6.md)

ES6

https://babeljs.io/repl/ 在线转码

---

let

---

let 声明一个变量， 只在let命令所在的代码块有效（非常适合在for循环中）

let没有变量提升， 这意味着typeof不再是百分比安全的操作

只要在块级作用域中存在let命令，它所在声明的变量就绑定（binding）在这个区域， 不受外界影响

暂时性死区：在代码块内使用let命令声明变量之前， 该变量都是不可用的

let 不允许在相同作用域内重复声明同一个变量

可以使用let很方便的块级作用域 （IIFE）

---

const

用来声明常量，一旦声明，其值不可修改（很多规则跟let一样，理解成继承吧）

必须一声明就立即初始化，不能留到以后赋值

对于复杂的数据结构（对象，数组）， const只能保证保存该数据的地址不发生变化，不能保证其内部值发生变化。（可以使用Object.freeze()冻结对象）

---

变量的解构赋值

解构： ES6按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为解构

数组

var [a,b,c] = [1,2,3]; //a=1,b=2,c=3

var [head,,third,...tail]=[1,2,3,4]; //tail=[4]

var [foo] = [];//如果解构不成功，变量的值就等于undefined

let [a,[b],d] = [1,[2,3],4]; //b=2;不完全解构，解构依然可以成功

如果等号右边不是数组（可遍历的结构）就会报错；

默认值：

let [x,y=1] = [0]; //x=0,y=1;

let [x,y=1,z] = [0, undefined,2]; //x=0,y=1,z=2;（必须使用undefined/，因为es6内部使用严格等===）

惰性求值， 如果默认值是表达式， 只用用的时候才求值

对象

对象没有次序，变量必须和属性同名或使用以下方式,才能取得正确的值

var {foo:baz} = {foo: 1, bar: 2}; //baz=1;

字符串

因为字符串自带length属性，

let {length: len} = 'jifag';

字符串被转换为类似数组的对象

const [a,b,c,d,e] = 'hello'; //a='h',b='e'...

解构可以嵌套

var {p: [x,{y}]} = {p:['hello',{y:'world'}]}; // x='hello',y='world';此时p是模式不是变量名

函数参数的解构赋值

酷！

圆括号问题

对于编译器来说， 一个式子是模式还是表达式，没有办法从一开始就知道，带来的问题就是， 如果模式中出现圆括号怎么处理。

建议： 不要在模式中放圆括号

几种情况下在模式中使用圆括号会报错

用途！！！！

交换变量的值 [x,y] = [y,x];

获取从函数返回的多个值 var [a,b,c] = test(); //test return [1,2,3];

函数参数的定义

eg1: 参数是有序值function f([x,y,z]){}; f([1,2,3])

eg2: 参数是无序值function f({x,y,z}){}; f({x:1,y:2,z=3})

提取json数据

函数参数的默认值（好用！！！）

let {log, sin, cos} = Math; //很方便就能把想用的拿出来

---

reg

u修饰符： 用于处理4个字节的utf=16编码， 如（根本打不出来， 浏览器跟markdown也显示不了好伐， 这个问题忽略）

y修饰符： ‘粘连’ 跟g一样是全局匹配， 但g是从上一次匹配的剩余位置开始匹配，y限制了只能从剩余位置的第一位匹配

var str = 'aaa_aa_a', g = /a+/g, y = /a+/y;

g.exec(str); //执行两次， ['aaa'],['aa']

y.exec(str); //执行两次， ['aaa'],null

---

Array

() //将类数组（array like）对象和可遍历的对象转化为真正的数组,接受第二次参数类似于数组的map函数Array.from({'0':1, '1': 2, '2': 3}, x => x * x) //[1,4,9];

扩展运算符 (...)

Array.of() //将一组值转化为数组 Array.of(1,2,3) //[1,2,3]

数组实例 Array.prototype.copyWithin(target, start = 0, end = this.length): 在数组内部将指定位置的成员复制到其他位置（覆盖）

数组实例 Array.prototype.find()和findIndex();

find（function(value, index, arr){}）有点像filter， find只找到第一个符合条件的值就返回这个值 findIndex返回该值的位置

数组实例 Array.prototype.fill(value, start = 0, end = this.length) //很方便的初始化空数组，如果不是空数组， 数组中已有的元素将被重置 new Array(3).fill(0) //[0,0,0]

数组实例 Array.prototype.entries(),keys(),values() 返回遍历器对象

数组实例 Array.includes() 返回布尔值

数据推导 [for (year of years) if (year > 2000) year];

---

函数

rest参数(...变量名)： 替代arguments function add(...value){}

扩展运算符(...) 像reset参数的逆运算

console.log(...[1,2,3]) //1 2 3 (1,2,3)

替代数组的apply方法

合并数组 [1,2,...more] //more=[3,4];

与解构赋值结合 const [first, ...rest] = [1,2,3,4];//first=1,rest=[2,3,4];

箭头函数

var sum = (num1, num2) => num1 + num2;

如果函数内代码语句多于一行，要用大括号括起来，并使用return返回

简化回调函数 [1,2,3].map(x => x * x); //[1,4,9]; [6,1,8].sort((a,b) => a - b); //[1,6,8]; const number = (...nums) => nums; // number(1,2,3)=>[1,2,3]

---

对象

属性的简洁表示法 let obj = {x,test(){}}

属性名表达式 let obj = {['a' + 'b']: 'ab'}

属性名表达式与简洁表示法不能同时使用，会报错

Object.is()用来比较两个值是否严格相等，与严格等（===）的行为基本一致，不同之处只有两个

1. +0不等于-0

2. NaN等于自身

Object.assign(): 用来将源对象的所有可枚举属性赋值到目标对象 //Object.assign(target, source1, source2);

---

Symbol

（研究了大半天终于发现意义在哪里，现在表示当前对象的属性有三种 obj.a、obj['a']、obj[a],一二种是ES5的字符串属性名，第三种是Symbol类型，这样就实现唯一的标识了）

ES6引用一种新的原始数据类型Symbol表示独一无二的值

let s = Symbol();typeof s;//symbol没有‘new’

let s = Symbol('foo'),a={};a[s] = function(){};//不能使用点运算符（a.s）,不加引号（a['s']）;

Symbol的参数是没有实际意义的，只表示对Symbol实例的描述，主要是为了方便区分

symbol可以用来定义一组常量，保证这组常量的值都是不相等的

魔术字符串：在代码之中多次出现、与代码行程强耦合的某一个集体的字符串或数值。

消除魔术字符串的常用方便就是把它写成一个常量， 此时比较适合用Symbol

Symbol类型的属性名，不会出现在for...in、for...of遍历中，也不会被Object.keys(),Object.getOwnPropertyNames()返回。也不是私有属性。Object.getOwnPropertySymbols可以获取指定对象的所有Symbol属性名

Symbol.for(name):重新使用同一个symbol值

var s1 = Symbol.for('foo'), s2 = Symbol.for('foo');s1 === s2; //true

var s1 = Symbol('foo'), s2 = Symbol.for('foo');s1 === s2; //false

内置的Symbol值

---

Proxy和Reflect

proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，属于“元程序”（对编程语言进行编程）。代理器，拦截器

作为构造函数Proxy接受两个参数，第一个参数是所要代理的目标对象，第二个参数是配置对象（包含有处理函数），要使Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象

var proxy = new Proxy({},{

get: function(target, property){

return 35;

}

});

proxy.time; //35

set();利用Proxy，可以将读取属性的操作转变为执行某个函数，从而实现属性的链式调用

var pipe = (function() {

var pipe;

return function(value) {

get: function(pipeObject, fnName) {

if(fnName == 'get') {

return pipe.reduce(function(val, fn) {

return fn(val);

}, value);

}

pipe.push(window[fnName]);

return pipeObject;

}

}

});

Proxy中设置set方法可以拦截某个属性的赋值操作

let validator = {

set: function(obj, prop, value) {

if(prop === 'age'){

if(!Number.isInteger(value)) {

throw(new TypeError('The age is not an integer'));

}

if(value > 200) {

throw new RangeError('The age seems invalid');

}

}

obj[prop] = value;

}

}

let person = new Proxy({}, validator);

person.age = 100;

person.age = 400;//报错

apply()方法拦截函数的调用

has()方法可以隐藏某些属性不被in操作符发现

construct()方法用来拦截new命令

deleteProperty()方法拦截delete操作

defineProperty()方法拦截Object.defineProperty();

enumerate()方法拦截for...in循环

ownKeys()方法拦截Object.keys()

Reflect 将Object某些语言层面的方法部署到Reflect之中

---

set

新的数据结构，类似于数组，成员的值都是唯一的，没有重复的值

set函数可以接受一个数组（或类数组）let set = new Set([1,2,3,3]); [...set]; //[1,2,3]

属性和方法set.prototype.size ,add(value), delete(value), has(value), clear()

遍历操作 keys(),values(),entries(),forEach();前三个返回遍历器。set结构只有键值没有键名，keys的返回值等于values

WeakSet 内部成员只能是对象，不可遍历，没有clear方法，没有size属性，引用为存储dom节点，不必担心这些节点从文档移除时会引发内存泄漏（没有理解……）

Map

理解： Object提供“字符串——值”的对应，Map提供“值——值”的对应

map接收一个数组作为参数，数组的成员为一个个表示键值对的数组；

var map = new Map([['name', 'Jack'], ['age', '12']]);

map.size; //2

map.has('name'); //true

map.get('name'); //jack

map.set('gender', 'female'); //

map.delete('age');

map.clear();

WeakMap: 只接收对象为键名（null除外）。同样应用于dom， 部署私有属性

---

Iterator

遍历器，是一种接口，为各种不同的数据结构提供统一的接口的访问机制，任何数据结构只要部署iterator接口就可以完成遍历操作

不断调用next方法 返回（{value:value, done: Boolean}）

for...of 循环

一个数据结构只要具有Symbol.iterator属性，就被认为是可遍历的。调用Symbol.iterator方法就可以得到当前结构的遍历函数

以下三种结构原生具有iterator接口： 数组， 某些类似数组的对象， set和map结构

var map = new Map([['name', 'aya'], ['gender', 'female']]);

var iter1= map[Symbol.iterator]();

iter1.next(); // Object {"done": false,"value": Array ["name","aya"]}

//类数组调用Symbol.iterator

let iterable = {

'0': 1,

'1': 2,

'2': 3,

length: 3,

[Symbol.iterator]: Array.prototype[Symbol.iterator]

};

let ite =  iterable[Symbol.iterator]();

console.log(ite.next());

对象没有默认部署iterator接口，是因为哪个属性先遍历哪个后遍历是不确定的。需要开发者手动指定

// 为对象添加Iterator的一个实例

let obj = {

data: ['hello','world'],

[Symbol.iterator]() {

const self = this;

let index = 0;

return {

next() {

if(index < self.data.length) {

return {

value: self.data[index++],

done: false

};

}else {

return {

value: undefined,

done: true

};

}

}

}

}

}

for(let j of obj){

console.log(j);

}

var i = obj[Symbol.iterator]();

i.next(); //'hello';

调用Iterator接口的场合

1. 解构赋值（会默认调用Symbol.iterator方法）

2. 扩展运算符（...）

3. for...of,Array.from(),Map、Set、WeakMap、WeakSet,Promise.all(),Promise.race();

字符串可以访问Sybmol.iterator方法

for...of(遍历所有数据结构的统一方法)

---

Generator

概念： Generator是ES6提供的一种异步编程解决方案。状态机。执行Generator会返回一个遍历器对象。

function与函数名之间有一个*号， 函数内部使用yield定义不同的内部状态

yeild就像是暂停标志，generator.next()执行一次就从就返回一个{value:yeild语句后的值,done:}，并暂停向下执行，再执行.next()方法再返回再暂停，直到遇到return语句为止，没有return就放回{value: undefined, done: true};

yeild后面的表达式，只有当调用next方法，内部指针指向语句时才会执行（惰性求值）

yeild语句不能出现在普通函数中（foreach改为使用for循环），yield语句如果在表达式中，必须加圆括号

next的参数，会被当做上一条yield语句的返回值

for...of,扩展运算符，解构赋值，Array.from

应用

1. 异步操作的同步化表达： 处理异步操作，改写回调函数

function* main(){

var result = yield request("http://some.url.com");

var resp = JSON.parse(result);

doSomething(resp);

}

2. 在任意对象上部署Iterator接口

function* iterEntries(obj) {

let keys = Object.keys(obj);

for(let i = 0; i < keys.length; i++) {

let key = keys[i];

yield [key, [obj[key]]];

}

}

let testObj = {hello: 'you', world: 'me'};

for(let [key,value] of iterEntries(testObj)){

console.log(key, value);

}

3. 作为数据结构

function* doStuff(){

yield fs.readFile.bind(null, 'hello.txt');

yield fs.readFile.bind(null, 'work.txt');

yield fs.readFile.bind(null, 'as-so-on.txt');

}

---

Promise

一个对象，用来传递异步操作消息

有两个特点

1. 对象的状态不受外界干扰。Pending,Resolved(Fulfilled),Rejected。只有异步操作的结果可以决定当前是哪一种状态。

2. 一旦状态改变就不会再变，任何时候都可以得到这个结果。promise只能从Pending变为Resolved或Pending变成Rejected。只要一种变化发生就不会再发生变化

实例方法then, catch

Promise.all() 将多个Promise实例包装成一个新的promise实例 promise.all([p1,p2,p3]);

Promise.race() 同样将多个promise实例包装成一个新的promise实例 promise.race([p1,p2,p3]);

区别： all方法，只有参数p全部变成resolved，p才为resolved（rejected同样）；race方法，只要有一个参数变成resolved，p就变为resolved（rejected同样）；

Promise.resolve() 将现有对象转为promise对象

promise对象可以不带参数， 如果希望得到一个新的promise对象，可以直接调用 var p = Promise.resolve();

Promise.reject() 返回一个新的promise对象，状态为Rejected

promise.done() 总是处于回调链的尾端，保证抛出任何可能出现的错误

promise.finally() 跟promise.done最大的区别的是： finally接受普通函数作为参数，无论如何都会执行

---

异步操作

ES6的异步编程： 回调函数，事件监听， 发布/订阅， Promise对象

异步： 一个任何分为两段，先执行第一段，然后转而这行其他认识，等做好准备再回头执行第二段（不连续的操作）

Thunk函数： 编译器的传名调用（如var m = 1; f(m+1)，//m+1在f内用到才求值，而不是先求值再调用f(2)），实现往事先将函数放到一个临时函数中，再将这个临时函数传入函数体。这个临时函数就叫Thunk函数。

js是传值调用（var m = 1; f(m+1);// 先求值等于2，在调用f(2)；Thunk函数替换的不是表达式而是多参数函数，替换为单参数版本，且只接受回调函数作为参数。

---

Class基本语法

class Point{

constructor(x, y) {

this.x = x;

this.y =y;

}

toString(){

return "x+y= " + this.x + this.y;

}

}

语法糖

类的内部定义的所有方法都是不可枚举的（跟ES5不同）

constructor方法是类的默认方法，new之后自动调用该函数

如果忘记加new调用Class，会报错

Class表达式

const MyClass = class Me {

getClassName(){

return Me.name;

}

}

调用时使用new MyClass();Me只供Class的内部代码使用

不存在变量提升

代码内部为严格模式

extends 实现继承

class ColorPoint extends Point {

constructor(x, y, color) {

super(x, y);

this.color = color;

}

}

super: 关键字，指代了父类的实例（即父类的this对象）

子类必须在constructor方法中调用super， 否则新建实例时会报错。因为如果不调用super方法，子类就得不到this对象

父类只要用prototype就能被子类继承， 父类可以是任意函数

对象总是继承其他对象的，所以可以再任意一个对象中使用super关键字

static 静态方法：在方法前面添加static关键字，不会被实例继承，通过类直接调用

Class只有静态方法没有静态属性

new.target属性: 返回new命令所作用的构造函数（在构造函数中使用）

---

修饰器

类的修饰（Class）

1. 修饰器是一个表达式，用于修改类的行为

2. 修饰器本质是能在编译时执行的函数

3. 修饰器函数可以接受3个参数： 目标函数（必要），属性名，该属性的描述对象

方法的修饰（Class 内部方法）

不能用于普通的函数（因为函数提升）

@autobind @override @deprecate

---

Module

Class只是语法糖，并没有解决模块化问题

Module应对大型程序

---

编码风格

块级作用域let代替var

全局变量应该只能设置常量，优先使用const

静态字符串使用单引号或反引号，动态字符串使用反引号（`）

解构赋值

---

使用数组成语对变量赋值，优先使用解构赋值

函数的参数如果是对象的成员，优先使用解构赋值

如果函数返回多个值，优先使用对象的解构赋值而不是数组的解构赋值（便于调整顺序）

对象

单行定义的对象，最后一个成员不以逗号结尾；多行定义的对象，最后一个成员使用逗号结尾

对象尽量静态化，如果属性不可避免要添加，使用Object.assign()方法

如果对象的属性名是动态的，创建对象时使用属性表达式定义

使用扩展运算符(...)复制数组

函数

立即执行函数可以写成箭头函数的形式

(() => {

doSomething();

});

使用函数表达式的场合尽量用箭头函数代替（绑定了this）

简单的单行的不会复用的函数用箭头函数

所有的配置项都应该几种在一个对象，放在最后一个参数，布尔值不可以直接作为参数

总是使用Class代替需要prototype的操作（class写法更简洁）

使用extends实现继承