ES6

前端学习笔记

Tutorial _via_ruanyf_es2015

ES6 简介

发展历程

1996年 Javascript发布第一个版本
1997年 EcmaScript 1.0 发布
1998年 EcmaScript 2.0 发布
1999年 EcmaScript 3.0 发布
2008年 EcmaScript 3.1 发布，即 ES5
2015.6 EcmaScript2015 发布，即ES6

支持程度

目前的浏览器，并不是所有都支持ES6的，还是有一些特性是不支持的，所以需要使用一个转码器，即 JS Compiler，即通常所使用的 Babel去实现，将ES6转成ES5
具体Babel的使用方法，可以看官网如何进行使用，需要配置 babelrc 当中的 presets 来进行配置babel的转码规则，根据需要进行安装即可。

Babel-cli
Babel-node
Babel-register 为 require添加一个钩子，当使用.js .jsx .es .es6后缀名文件，就先用 babel进行转码
Babel-polyfill Babel默认不转码很多新的API，所以需要增加一个垫片，来进行使用

浏览器环境

目前使用 Babel的话，在babel 6.0之后，是不能直接在浏览器当中使用了，如果想要使用可以通过5版本当中 browser.min.js 载入到文件当中，然后代码写在 script 标签当中，就可以了，当然，也可以是cdn

别的转码器 Traceur

有兴趣可以了解一下，google公司的。

下面就要进行正式的学习了，请端正态度，认真学习。

let和const命令

let命令

let 类似于 var，以下主要对比以下let和var之间的区别。

一、块级作用域内有效

let其所声明的变量只有在 块级作用域内 才有效

# 基本语法
{
    let a = 10;
    var b = 1;
}
a   // ReferenceError: a is not defined.
b   // 1

二、不存在变量提升

let所定义的变量不存在变量提升，而使用var，会产生变量提升。

# var 
console.log(a); // undefined.
var a = 10;
# 实际上，使用var，上面代码实际形式如下
var a;
console.log(a);
a = 10;
# 但如果使用let，不存在提升，必须 **先声明，后使用**
console.log(b); // 报错ReferenceError
let b = 10;

三、暂时性死区 TDZ temporal dead zone

由于不存在变量提升，只要块级作用域内存在let
命令，它声明的变量就会绑定在这个区域内，不会受外部的影响。

var tmp = 123;
if (1) {
    tmp = 'abc';    // ReferenceError
    let tmp;
}

在使用let之后，在块级作用域内，必须先声明变量，再使用变量。同名的变量不受全局变量的影响

if (true) {
    // TDZ开始
    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError
    let tmp; // TDZ结束
    console.log(tmp); // undefined
    tmp = 123;
    console.log(tmp); // 123
}

四、不允许重复声明

// 报错
function() {
    let a = 10;
    var a = 1;
}
// 报错
function() {
    let a = 10;
    let a = 1;
}

为什么需要块级作用域

1. 内层变量会覆盖外层变量，因为会变量声明提升

   var tmp = new Date();
   function f() {
       console.log(tmp);
       if (false) {
           var tmp = 'hello world';
       }
   }
   f();    // undefined

   因为变量提升，导致内层的变量覆盖了外层的变量

2. 用来计数的循环变量泄露为 全局变量

   var s = 'hello';
   for (var i = 0; i < s.length; i++) {
       console.log(s[i]);
   }
   console.log(i); // 5

   上面的i在循环结束之后没有消失，而泄露成了全局变量，这是因为es5当中，最小的作用域是函数，所以i实际上是属于全局作用域，所以可以访问到。

块级作用域当中，内部可以访问外部的作用域，但是外部不能访问内部的作用域，这也是遵循了es5当中的作用域链的要求。但是其内外部之分从原来的函数，变为了块级作用域
有了块级作用域，实际上可以替代经常使用 IIFE 立即执行匿名函数，使用立即执行匿名函数的目的，就是为了创造局部作用域而不会影响其他。但是现在用let就OK了

const命令

声明

const声明一个只读的常量。一旦声明，常量的值就不能改变。并且必须 立即初始化

const PI = 3.1415
PI  // 3.1415
PI = 3;  // TypeError: Assignment to constant variable

因为不能改变const的变量值，所以在声明之后必须马上定义，即初始化。但是不要担心，只声明不初始化会报错。

const foo;
// SyntaxError: Missing initializer in const declaration

作用域

const 的作用域 和 let 的相同，只在块级作用域内有效。也不提升，所以也存在暂时性死区。特性见上面的let

注意

由于const声明的变量只能有一次初始化，这意味着后面的初始化都是错误的，倘若如果声明的变量类型是对象(object 或者 array之类的)，那么const的意思就是 一开始就绑定了变量所指向的地址，但是其内容可以改变

什么意思？
简单来说，就是只能new一次，然后可以随意采取对象所有的方法，但是不可以再次初始化这个对象。

const a = [];
a.push('h');
a.length = 0;
a = []; // 报错

上面报错的原因是 因为 a = []相当于又 new Array() 一次，但是 const已经将 a指向的地址指向了第一个 []，所以不可以再次改变其地址。

全局变量与顶层对象(window or global)

除了es5当中的 var 和 function 命令还会使全局变量直属于顶层对象，es6当中的 let const class import 命令声明的变量都会与顶层对象脱钩

var a = 1;
window.a;   // 1
let b = 1;
window.b    // undefined

变量的解构赋值

数组的解构赋值

ES6允许按照一定模式，即模式匹配来从数组当中提取值，进行赋值

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

采取 模式匹配 的方式，只要等号两边的模式相同，左边的变量就会被赋予相应的值，当然如果两边模式不匹配，只有匹配的那些能够成功匹配到，未匹配到，则为 undefined，即解构不成功

# case 1
let [bar, foo] = [1];
foo;    // undefined
# case 2
let [bar] = [1, 2];
bar;    // 1
# case 3
let [foo] = 1;  // error，右边必须是可以遍历的解构

解构赋值不仅适用于 var，也适用于 let 和 const命令

指定默认值

let [foo = true] = [];
foo;    // true

默认值的工作原理是，判断左边被赋值 是否 === undefined，如果是 严格等于 undefined 的话，默认值有效，否则无效。看下面的代码展示

var [x = 1] = [undefined];  // x = 1
var [x = 1] = [];           // x = 1
var [x = 1] = [null];       // x = null. 因为 x 被赋予了 null

上面最后一种方式，因为x被赋予了 null值，即 x === undefined 为 false，则默认值不起作用。

默认值还可以使用解构赋值的其他变量

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

但是，其他解构变量必须已经声明了，才不会出错，因为 let不可以变量提升。

对象的解构赋值

对象的解构赋值和数组的解构赋值相似，但是和数组解构赋值最不同的一点在于，其顺序是可以打乱的，因为其赋值匹配模式是由其属性名所决定的。如下

var {foo, bar} = {bar: 'world', foo: 'Hello'};
foo // 'Hello'
bar // 'world'

但是，实际上，赋值的过程，是，然后再赋给对应的变量。真正的变量是后者。见代码

var {foo: baz} = {foo: 'aaa', bar: 'bbb'};
baz;    // 'aaa'
foo;    // error: foo is not defined

foo 是匹配的模式， baz 才是真正的变量，被赋值的是变量 baz，而不是匹配模式 foo。当然，如果不写成上面的形式，而是第一段代码中的省略变量，则匹配模式名 和 变量名为同一个。

要区分好 匹配的模式 和真正的变量 是什么！

由于 let 和 const 不可以重复命名变量，所以如果是使用 let 或者 const 来声明了变量再使用对象的解构赋值的话，赋值语句需要加上 圆括号 ()，否则。 {} 会被当成代码块来执行， 如下

let foo;
({foo} = {foo: 1});
# error
let foo;
{foo} = {foo: 1};

默认值

默认值的规则和数组解构赋值的一样，都是变量 === undefined，默认值才会起作用

var {x = 3} = {};   // x = 3;
var {x:y = 3} = {x : 1};    // y = 1

字符串的解构赋值

字符串的解构类似于数组的解构，字符串会被转换成一个类似数组的对象

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

数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先将他们转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;

解构的规则是，只要等号右边不是对象，就先将其转为对象，由于 undefined 和 null 无法转为对象，所以会报错

#错误
let {prop: x} = null;
let {prop: y} = undefined;

函数参数的解构赋值

函数的参数也可以使用解构赋值，当然，函数的参数解构就能使用数组、对象、字符串、数值和布尔值来进行了。

#example 1
function add([x, y]) {
    return x + y;
}
add([2, 3]);    // 5
#example 2
[[1, 2], [3, 4]].map(([a, b]) => a + b);    // [3, 7]

但是，在使用默认值的时候，要注意分清楚 是 函数的默认值 还是 函数参数解构变量的默认值，具体看下面的例子。

function move({x = 0, y = 0} = {}) {
    return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3});       // [3, 0]
move({});           // [0, 0]
move();             // [0, 0]

上面的例子，其实使用到了解构变量的默认值，同时也有用到 函数的默认值，即 {}，如果不给函数传参数，默认值会是 {}，但是又因为变量自己本身有默认值，所以，会盖过函数的默认值。来看下面一个例子会更加明显

function move({x, y} = {x: 0, y: 0}) {
    return [x, y];
}
move();     // [0, 0]
move({});   // [undefined, undefined]
move({x: 3})    // [3, undefined]

实际上，能触发函数默认值的条件是函数参数为 undefined，如果传入 undefined 或者不传入参数，就会使用函数参数默认值，然后如果解构变量有默认值，则使用解构变量默认值。

圆括号问题

不要在模式当中放置圆括号
以下几种情况不能使用圆括号

1. 变量声明语句中，不能带有圆括号

   #全部报错
   var [(a)] = [1];
   var {x: (c)} = {};
   var ({x: c}) = {};
   var {(x: c)} = {};
   var {(x): c} = {};
   var {o: ({p: p})} = {o: {p: 2}};

   上面的声明当中使用圆括号，都是错误的。在声明当中，模式不能使用圆括号

2. 函数参数中，模式不能带圆括号

   # 报错
   function f([(z)]) {return z;}

3. 赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号中。

   #报错
   ({p:a}) = {p: 42}
   ([a]) = [5]

可以使用圆括号的情况
可以使用圆括号的情况，只有一种，记得可以使用的情况就好。
赋值语句的非模式部分 可以使用，注意不是声明

#正确
[(b)] = [3];
({p: (d)} = {});
[(parseInt.prop)] = [3];

提醒：没什么必要，还是不要使用圆括号了。不要用！！！

用途

1) 交换变量的值

[x, y] = [y, x]

2) 从函数返回多个值

// 返回一个数组
function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

3) 函数参数的定义
能更好地将参数与变量名对应起来

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4) 提取JSON数据
很有用，能够很方便地提取出JSON的数据

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

5) 遍历Map解构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
#获取键名
for (let [key] of map) {
  // ...
}
#获取键值
for (let [,value] of map) {
  // ...
}

字符串的拓展

字符的Unicode表示法

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

如果直接用 \u007A 的方式来表示字符，那么其表示范围是 \u0000 ~ \uFFFF之间的字符，如果是超过这个范围，即为中文，那么需要用两个字符来表示。
通常，更多时候，也可以用最后一种方式，es6使花括号包含起来，其范围不限制。

codePointAt() 相当于es5当中的 charCodeAt()

受限于ES5当中的，对于字符串的操作，读取字符串，其不能读取两个字符的情况，charAt() 和 charCodeAt() 都不可以，都只能读取一个字符的类型，如果是一个字符占据4个字节的话，那么，无法读取，es6新增加 codePointAt()，可以正确处理 四个字节 存储的字符，返回一个字符的码点。

比较好的应用，是用来检测一个字符是由两个字节还是四个字节组成

function is32Bit(c) {
    return c.codePointAt(0) > 0xFFFF;
}
is32Bit('𠮷');  // true

String.fromCodePoint()

es5当中，提供了 String.fromCharCode() 的方法来从码点返回对应字符，但其不能识别32位的UTF-16的字符，即一个字符占4个字节。

String.fromCodePoint(0x20BB7)
// "ஷ"

字符串的遍历器接口

字符串可被 for ... of 循环遍历，此遍历器的最大优点是可以识别大于 0xFFFF 的码点

at() 相当于es5当中的 charAt()

es6对es5的补充实现，能识别utf-16的完整编码，但是需要通过垫片库来实现，即 es-shims

字符串查找

es5: indexOf(××, pos)
es6: includes startsWith endsWith

repeat

返回一个新的字符串

'x'.repeat(3);  // 'xxx'

若为小数，则会被 向下取整

参数为 负数 或 Infinity，报错！
参数为 0 ~ -1之间，等同于 0，即返回 ''
参数为 NaN，等同于 0
参数为字符串，则先转为number，再根据上面情况进行选择

pad-start pad-end

如果没有第二个参数，默认为 空格
补全功能，es7的。主要用途有以下两个

1. 为数值补全指定位数

   '1'.padStart(10, '0');  // '0000000001'

2. 提示字符串格式

   '12'.padStart(12, 'YYYY-MM-DD');    // 'YYYY-MM-12'

模板字符串 这个真是666666666

在原本的 js语言当中，如要要插入html模板代码，通常是如下的形式

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

有了es6之后，一切都变成了下面这个样子

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

以 `` 开始结束，还可以直接js当中使用变量当做模板

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串中嵌入变量，需要将变量名写在${}之中

正则的拓展

u修饰符

用于正确处理匹配四个字节的UTF-16编码

/\uD83D/u.test('\uD83D\uDC2A');  // false

以前有 gim三种模式，现在多一种 u 模式

var r = /xyz/u

y修饰符 粘连(sticky)

y修饰符和 g修饰符的作用类似，也是全局匹配，但是与g不同的是，g修饰符只要剩余位置存在匹配就可以了，但是y修饰符确保匹配必须从剩余字符串的第一个位置开始，就有匹配，否则，返回null

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]
r1.exec(s) // ["aa"]
r2.exec(s) // null，接着开始第一个是 _

从效果上来看，y修饰符号隐含了头部匹配的标志 ^，用y 修饰符的目的就是为了让 ^ 也能全局匹配，而不会只匹配一次。

如果是将 y修饰符 应用于 match 方法的话，则是使用 gy 修饰符，才能达到全局效果

s 修饰符 dotALL模式

引入s修饰符，使得 . 能够匹配任何单个字符，包括换行 \r \n之类的。原本的 . 只能匹配除了 换行意外的所有单个字符

/foo.bar/.test('foo\nbar')
// false
/foo.bar/s.test('foo\nbar')
// true

RegExp.escape()

字符转义的实现

数值的扩展

二进制和八进制表示法

es6当中，二进制和八进制必须添加前缀 0b(或 oB)，八进制则是 0o(或 0O)。十六进制当然还是 0x
如果要将 0b 和 0o 前缀的字符串数值转为十进制，要使用 Number 方法

Number('0b111');    // 7
Number('0o10');     // 8

如果是在 es5当中要进行进制的转换的话，使用 toString()方法即可

var a = 01101;
a.toString(16); // 209
a.toString(10); // ...
a.toString(2);  //

Number.isFinite() 和 Number.isNaN()

与es5当中，全局环境下的 isFinite 和 isNaN 不同的是，绑定在Number上的，如果被检测的变量不是数值，一律返回 false。
但是es5当中的 isFinite() 和 isNaN()，则会先调用 Number方法，将其转为数值，再进行判断。

Number.parseInt() 和 Number.parseFloat()

行为与 es5当中的完全一样，移植到 Number 对象上的原因是，逐步减少全局性方法，使得语言逐步模块化，方法只绑定在特定的对象之上

Number.isInteger()

判断是否为整数，注意，在js当中，整数和浮点数是同样的储存方法，所以 3 和 3.0 视为同一个值

Number.EPSILON

在js当中，浮点数的运算时有误差的，有精度误差，所以通常只要误差＜Number.EPSILON 的话，即认为为正确结果。实质上，其为一个可以接受的误差范围

Math对象的拓展

为Math对象增添一些静态方法

Math.trunc()  去除整数的小数部分
Math.cbrt()     一个数的立方根
...

指数运算符

es7当中支持 指数运算符 (**)

2 ** 2  // 4
2 ** 3  // 8

如果浏览器不支持，就用es5的

Math.pow(2, 2);

数组的拓展

Array.from

Array.from(list, func, context)

能将 伪数组 或者任何可遍历的对象(字符串、set、map)之类的，都可以将其转为数组.
在ES5当中，是只能将伪数组(eg: nodeList、arguments) 转为数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

以上所谓类似数组的对象，其本质特征有一点，就是必须要有 length 属性，所以，任何有length属性的对象，都可以通过 Array.from 方法转为数组。

Array.from 还可以接受第二个参数，作用类似于数组的 map 方法

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.of

用于将一组值，转为数组，用此特性主要是因为弥补 Array 构造函数的不足

new Array(3);   // [undefined * 3]
Array.of(3);    // [3]

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

数组实例的copyWithin

Array.prototype.copyWithin(target, start = 0, end = this.length)
不常用，反正，Array.prototype.splice 还是无敌

数组实例的 find() 和 findIndex()

作用和 Array.indexOf相似，find() 返回 符合条件的第一个数组项，findIndex 则返回符合条件的第一个数组项的位置

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

不过，find和indexOf还是有以下一些不同的地方
1. find的参数是一个回调函数，在函数当中对值进行处理，而indexOf 是直接待查询的值
2. find 可以查询到数组当中为 NaN 的值，但是，indexOf只会返回-1

var a = [1, 2, NaN];
a.indexOf(NaN);     // -1
a.find(function(value) { return isNaN(value);})

数组实例的 fill()

用于填充一个数组，常常用来初始化一个数组的所有项都为同一个值

[].fill(value, startIndex, endIndex) 后两个参数不填则默认为整个数组

[2, 3, 4, 5, 6, 7].fill(0, 2, 4);   // [2, 3, 0, 0, 6, 7]
# 以前不支持，初始化数组，使用 for 循环

数组实例的 entries() keys() 和 values()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

数组实例的 includes()

和字符串的 includes() 差不多，查找值是否存在，并且也可以查找 NaN 值 是否存在

函数的扩展

函数参数的默认值

为什么要使用函数参数默认值，在es5当中，当然也可以实现为函数参数赋予默认值，但是没有那么简介

#es5
function log(x, y) {
    y = y || 'World';
}
console.log('hello', '');   // Hello world

虽然es5也可以实现参数设置默认值，但是这种方式会有一个缺点，就是当函数参数的值所对应的布尔值为 false 的话，那么，将会使用默认值，但是这是不正确的，应该要当没有输入，或者变量值为 undefined 的时候，才使用默认值。

function log(x, y = 'world') {
    console.log(x, y);
}
log('Hello', '');   // Hello

function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}
fetch('http://example.com')
// "GET"

上面代码中，函数 fetch 没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。

函数的length 属性

指定了默认值之后，函数的 length 属性，将返回没有指定默认值的参数个数，同时，如果参数当中也有 rest参数，那么也不算入 length 当中

(function (a) {}).length;   // 1
(function (a, b, c = 1) {}).length;     // 2

函数的length属性的含义是说，预期将会传入的参数的个数，但是，如果设置默认值，说明该参数是可以省略的，就不一定需要这个参数。

如果设置了默认值的参数不是 尾参数，那么 length 属性也不再计入后面的参数

(function (a, b = 1, c) {}).length;     // 1

作用域问题

一个需要注意的地方是，如果参数默认值是一个变量，则该变量所处的作用域，与其他变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

上面代码中，参数 y 的默认值等于 x。调用时，由于函数作用域内部的变量 x 已经生成，所以 y 等于参数 x，而不是全局变量 x。

如果调用时，函数作用域内部的变量 x 没有生成，结果就会不一样。

let x = 1;
function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // 1

如果在赋值的时候，在函数参数部分没有x这个变量，那么就会去访问 全局作用域当中的 x，如果全局作用域下没有 x，那么将会出错

function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // ReferenceError: x is not defined

如果函数参数默认值是一个函数的话，那么，函数所在的作用域，就是其声明时所在的作用域。
下面看一个综合一点的复杂的例子。

var x = 1;
function foo(x, y = function() { console.log(x); }) {
  var x = 3;
  y();
  console.log(x);   // 这里的 x 是函数局部的x
}
foo();
// undefined
// 3
#如果函数参数没有x
var x = 1;
function foo(y = function() { console.log(x); }) {
  var x = 3;
  y();
  console.log(x);   // 这里的 x 是函数局部的x
}
foo();
// 1，y当中访问的是 全局变量 x
// 3
#如果函数内部的x也设置为全局变量，那么，此时，y当中的x和函数内部的x其实是一样的。
var x = 1;
function foo(y = function() { console.log(x); }) {
  x = 3;    // 这里改变了x的值
  y();
  console.log(x);   // 这里的 x 是函数局部的x
}
foo();
// 3
// 3

rest参数

rest 参数（形式为 "...变量名"），用于获取函数的多余参数，注意：rest参数之后不能再有其他参数了，rest参数只能是最后一个参数

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}
var a = [];
push(a, 1, 2, 3);

rest参数获取到的就是 数组了，所以数组的所有方法它都可以使用。

// 报错
function f(a, ...b, c) {}
#rest参数只能放最后一个

扩展运算符

扩展运算符(spread)是三个点(...)，其就像rest参数的逆运算，rest参数是将输入的参数转为一个数组，而spread则是将数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3]);
// 1 2 3，实际上 ...[1, 2, 3] 转为了 1, 2, 3，那么console.log(1, 2, 3) 就是 1 2 3 

扩展运算符的应用

合并数组

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

与解构赋值结合
如果将 扩展运算符用于数组赋值或者函数参数，那么只能放在参数的最后一位，否则会报错，实际上就是 rest参数。

# 报错
const [...butLast, last] = [1, 2, 3, 4, 5]

函数的返回值
JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

字符串
扩展运算符还可以将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

实际上，任何有遍历器接口的都可以用 spread 运算符转为数组

实现Iterator接口的对象
其可以将任何 Iterator接口的对象，转为真正的数组，但是，如果对象本身没有Iterator接口，而只是类似数组的对象，扩展运算符就无法将其转为真正的数组，这是其与 Array.from 的最大区别，Array.from可以将伪数组和任何有Iterator接口的对象转为数组

# 不能转换类数组的对象，但是NodeList、arguments这些本来就是伪数组的就可以, 因为其都有 iterator 接口
let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
# nodelist
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

严格模式

在es5当中，可以在函数的内部设置严格模式，但是在es6当中，明确表示了，如果在函数当中使用了 参数默认值 解构赋值 或者 扩展运算符，那么函数内部就不能显示设定为严格模式，否则会报错。

那么，如果规避这种限制，有以下两种方法

#全局严格模式
'use strict'
function doSomething(a, b = a) {}
#将函数包在一个无参数的立即执行函数里面
const doSomething = (function () {
    'use strict';
    return function(value = 42) {
        return value;
    }
})()

name属性

对于将匿名函数赋值给变量的，es5和es6的显示不一样

var foo = function() {}
#es5
foo.name;   // ''
#es6
foo.name;   // foo

箭头函数 这个很重要，必须掌握

基本用法
函数体代码块部分默认为返回值

#es6
var f = v => v
#等同于es5
var f = function(v) {
    return v;
};

如果箭头函数不需要参数或者需要多个参数，就可以使用一个圆括号代表参数部分。

var f = () => 5;
#等同于
var f = function() {return 5;};
var sum = (num1, num2) => num1 + num2;
#等同于
var sum = function(num1, num2) {
    return num1 + num2;
};

如果代码块部分多于一条语句，就使用大括号将他们括起来，并且使用 return 语句

var sum = (num1, num2) => {return num1 + num2;}

因为加上大括号，其会被js解释为代码块，所以如果使用箭头函数要返回一个对象的话，需要在对象外部加上 圆括号

var getTempItem = id => ({ id: id, name: "Temp" });

使用箭头函数注意几个事项，如下
1. 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。并且，使用箭头函数的话，this绑定之后便不可更改。
2. 不可以当作构造函数，即不可以使用 new 命令，否则会抛出一个错误
3. 不可以使用arguments 对象，该对象在函数体内不存在，若要用，可以使用 rest 参数替代。
4. 不可以使用 yield 命令，因此箭头函数不能作 Generator函数

实际上，箭头函数都没有自己的this值，其并不创建自身的上下文，其上下文this，取决于其在定义时的外部函数。即在调用的时候那个对象是谁就是谁，不可以再改变。

尾递归优化

再去重点学习一些如何优化递归，比如可以用循环解决之类的。

对象的扩展

属性的简洁表示方法

es6允许直接写入变量和函数，如下

var foo = 'baz';
var a = {foo};  // 等同于 {foo: 'baz'}

es6会将变量处理为其属性名，变量的值为其属性值

function f(x, y) {
    return {x, y};
}
#等同于
function f(x, y) {
    return {x: x, y: y};
}

方法也是可以简写的，如下

var o = {
    method() {
        return 'Hello!'
    }
}
#等同于
var o = {
    method: function() {
        return 'Hello!';
    }
}

属性的赋值器(setter) 和 取值器(getter)

#ES5
Object.defineProperty(person, year, {
    get: function() {
        return this._year;
    },
    set: function(value) {
        //...
    }
})
#ES6
var person = {
    _year: 4,
    get year() {
        return this._year;
    },
    set year(value) {
        //...
    }
}

属性名表达式

在用字面量定义对象的时候，允许使用属性名表达式进行定义属性

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
#等同于
let obj = {
    'abc': 123
}

但是属性名表达式不能和属性简洁表示方法共用，会报错。

Object.is()

用于比较两个值是否严格相当，其中可以实现 NaN 相等，这是 == 或者 === 做不到的

Object.assign()

Object.assign()方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象上

var target = {a: 1}
var source1 = {a: 2, b: 3};
var source2 = {b: 4, c: 5};
Object.assign(target, source1, source2);
target; // {a: 2, b: 4, c: 5}

后面的同名属性，会覆盖前面的，即会将原来的同名属性更换掉。
如果对于源对象不是对象的话，那么 undefined 和 null 会报错，因为其不能转为对象，而其他，除了字符串和数组，都会略过

字符串的话，其会将其拆成对象，譬如 abc 拆成 {0: 'a', 1: 'b', 2: 'c'}

var v1 = 'abc';
var v2 = true;
var v3 = 10;
var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

注意点
1. Object.assign 是浅拷贝，即如果源对象的某个属性的属性值是对象，那么，将会拷贝到该引用，而不是独立的
2. 源对象的可枚举属性才能拷贝。
3. 拷贝只会拷贝源对象本身的属性值，不会拷贝其继承的值

应用
1. 为对象添加属性
2. 为对象添加方法
3. 克隆对象
4. ......

属性的遍历

ES6当中总共有5中方法进行遍历对象的属性，在es5的基础之上，增加了两种方式

1. for ... in 属性必须可枚举, 不含 Symbol属性
2. Object.keys(obj) 属性必须可枚举，不含 Symbol属性
3. Object.getOwnPropertyNames(obj) 属性的枚举与否无关，返回对象自身的所有属性
4. Object.getOwnPropertySymbols(obj) 返回一个数组，包含对象自身的所有Symbol属性
5. Reflect.ownKeys(obj) 返回自身的所有属性，包括Symbol属性

以上五种遍历方式的遍历顺序都按照如下的顺序

• 首先遍历所有属性名为 数值 的属性，按照数字排序(由小→大)
• 再遍历所有属性名为 字符串 的属性，按照生成的时间
• 最后遍历所有属性名为Symbol值得属性，按照生成的时间排序

具体例子看一下

Object.keys({[Symbol()]: 0, b: 1, 10: 2, 3: 3, a: 1})
// ["3", "10", "b", "a"]
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

Object.setPrototypeOf() 和Object.getPrototypeOf()

Object.setPrototypeOf()

// 格式
Object.setPrototypeOf(object, prototype)
// 用法
var o = Object.setPrototypeOf({}, null);
#例子
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40

就可以通过 Object.setPrototypeOf()来该表其指向的原型对象，在es5当中，是可以通过隐形指针 __proto__ 来进行改变

Object.getPrototypeOf()
获取对象的原型对象

Object.getPrototypeOf(obj);

Object.keys() Object.values Object.entries

使用 Object.entries() 和 Object.values() 的时候，其返回顺序与上面说的遍历的顺序是一致的，由遍历决定值，既先 数字，然后字符串，最后是symbol

Object.values()
返回一个包含对象值的数组

1. 只返回可遍历的属性值
2. 会过滤属性名为 Symbol值得属性
3. 如果参数是一个字符串，则将字符串转为数组
4. 如果参数不是对象，会先将其转为对象，再进行取值

Object.entries()
其表现形式和 Object.values一样，只不过是值不一样

Symbol

使用Symbol的原因，是比如es5的对象属性名当中，都是字符串，这很容易造成属性名的冲突，如果能够有一种机制，保证每个属性的名字都是独一无二的。这就是ES6引入 Symbol 的原因，确保属性名是独一无二的。
ES6引进的Symbole类型，是JS当中的第七种数据类型，除了原本的ES5的五种基本数据类型和 Object之外，引入的第七种数据类型。

概述

Symbol值通过 Symbol 函数生成，这就是说，对象的属性名可以有两种类型，一种是原来就有的字符串，另外一种则是Symbol值，如果对象的属性名为Symbol值，那么说明，其为独一无二的。如何实现独一无二，且看下面分析。

ES6中的数据类型(共7种)
五种基本数据类型：null、undefined、number、boolean、string
对象：object
Symbol类型，其为原始类型的值，不是对象

所以创建Symbol类型值得时候，不可以使用 new 命令，否则会报错。其存在，类似于一个字符串的数据类型。所以，当然也不可以为其添加属性。

let s = Symbol();
typeof s;   // symbol

在初始化Symbol的时候，可以为其添加一个参数，这个参数表明Symbol实例的描述，这是为了在控制台输出的时候，或者转为字符串的时候，更容易区分，最好是在初始化的时候，加入参数，日后好识别这些symbol值

var s1 = Symbol('foo');
var s2 = Symbol('bar');
s1 // Symbol(foo)
s2 // Symbol(bar)
s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

如果传入的参数是 对象，那么会调用对象的 toString() 方法，之后再进行初始化赋值。

由于Symbol值是独一无二的，所以Symbol与Symbol之间是不相等的，就算是添加了相同的参数

let a = Symbol('aaa');
let b = Symbol('aaa');
a === b;    // false

Symbol值与其他值的转换

Symbol值可以转为字符串 和 布尔值，其他类型都不可以

let s = Symbol();
s.toString();   // 'Symbol()'
Boolean(s); // true

作为属性名的Symbol

由于每一个Symbol值都不相等，这意味着Symbol值作为标识符，用于对象的属性名，就能保证不会出现同名的属性。Symbol值构造为对象的属性

var mySymbol = Symbol();
var a = {};
#第一种写法
a[mySymbol] = 'Hello!';
#第二种写法
a = {
    [mySymbol]: 'Hello!';   注意[]内，是没有引号的
}
#第三种写法
Object.defineProperty(a, mySymbol, {
    value: 'Hello'
})
# 以上写法都得到相同的结果
a[mySymbol];    // 'Hello'

注意，Symbol值是不可以用 . 来进行定义的，对象的 . 定义的后面永远接的字符串，注意，如果使用方括号来访问属性，加上了单引号或者双引号，则代表访问的是字符串属性

var a = {};
var my = Symbol();
a.my = 'hello';
a[my] = 'world';
a['my'];    // 'hello'
a[my];      // 'world'

因为Symbol值是只能唯一的，所以能够确保，如果有一个同名的symbol值，那么在设置对象的属性的时候，是不会覆盖的，是唯一的。

var a = {};
var b = Symbol();
a[b] = 'Hello';
var c = b;
var b = Symbol();
a[c];   // 'Hello'
a[b];   // undefined
a[b] = 'world';
a[b];   // world

属性名的遍历

Symbol值，只能在 Object.getOwnPropertySymbol() 和 Reflect.ownKeys() 两个方法当中获得，其余对象的迭代方法，无法获取属性值为Symbol的属性

var obj = {};
var f = Symbol('f');
obj[f] = 'Hello!';
for (var i in obj) {
    console.log(i); // 无输出
}
Object.keys(obj);   // 无输出
Object.getOwnPropertySymbol(obj);   // [Symbol(f)]

Symbol.for() 和 Symbol.keyFor()

有时候希望重新使用同一个Symbol值，Symbol.for方法可以做到这一点。其接受一个字符串作为参数，然后搜索有没有以该参数为名称的Symbol值，有，则返回该Symbol值，没有就返回一个以该字符串为名称的Symbol值

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

Symbol() 和 Symbol.for() 都可以创建新的Symbol类型的值，但是二者还是有不同点的，首先Symbol.for 会有登记机制，每次调用都会返回同一个值

Symbol.for('foo') === Symbol.for('foo');    // true
Symbol('foo') === Symbol('foo');    // false

内置的Symbol值

ES6提供了11个内置的Symbol值，指向语言内部使用的方法，多用于类的相关函数当中。

Symbol.hasInstance
Symbol.
......

Set 和 Map

Set

Set是ES6当中是一种新的数据结构，其类似于数组，但又不是数组，其最大的特点就是数值没有重复

Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化

var set = new Set([1, 2, 3, 4, 4]);
[...set];   // [1, 2, 3, 4]
#example 2
var set = new Set([1, 2, 3, 4, 5, 5, 5]);
set.size; // 5
#example3
function divs () {
  return [...document.querySelectorAll('div')];
}
var set = new Set(divs());
set.size // 56
// 类似于
divs().forEach(div => set.add(div));
set.size // 56

利用set，能很容易的实现数组去重，以前数组去重需要大费周章，即

function removeArr(arr) {
    var docker = {},
        result = [];
    for (var i of arr) {
        if (!docker[i]) {
            docker[i] = true;
            result.push(i);
        }
    }
    return result;
}

现在要实现数组去重，只需要利用好Set 这个数据结构

[...new Set(array)]

使用Set，应注意如下的几点
1. set内部判断重复使用类似于 === 运算符的方式
2. 为set添加元素值时，其不会发生类型转换，所以5 和 '5' 是不同的
3. 在set当中，NaN是相等的
4. 两个对象在set当中总是不等的

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set;    // Set {NaN}
#对象总不相等
set.add({});
set.size;   // 1
set.add({});
set.size;   // 2

Set实例的属性和方法

Set结构有以下属性
- Set.prototype.constructor: 构造函数，默认是 Set 函数
- Set.prototype.size：返回Set实例的成员及总数

Set结构的方法：主要分为操作方法和遍历方法

操作方法：

• add(value): 添加某个值，返回Set结构本身
• delete(value)：删除某个值，返回一个布尔值，表示删除成功
• has(value)：返回一个值，表示该值是否为 set 的成员
• clear()：清楚所有成员，没有返回值

特别要注意的是，因为 add 返回的是set对象本身，所以是可以链式调用的

s.add(1).add(2).add(2);
// 注意2被加入了两次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false

遍历方法：

• keys()：返回键名的遍历器
• values()：返回键值得遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员
• for ... of：遍历每个成员键值

注意，Set的遍历顺序就是插入顺序，与对象不同，对象的遍历顺序是先数字，再字符串，再Symbol

因为Set结构没有键名，随意其 keys和values的表现一致

let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

forEach 方法，用于对每个成员执行某种操作，没有返回值

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2))

可以用与遍历的还有 ... 扩展运算符、数组的 map、filter

#扩展运算符与数组结合，用于数组去重
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
#Set使用数组的方法，实现并集、交集和差集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

目前暂时还没有直接的方法可以在遍历操作中，同步改变原来的Set结构，但是可以用变通的方法，就是用Set结构映射出一个新的结构，然后赋值给原来的Set结构，另外一个是使用 Array.from 方法

// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6
// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

WeakSet

WeakSet结构与Set类似，也是不重复的值得集合，但是其与Set有两个重要的区别，如下

• WeakSet的值只能为 对象
• WeakSet对对象的引用为弱引用，即当其他对象不再使用该对象，垃圾回收机制就会自动回收该对象所占用的内存。所以，WeakSet是不可遍历的

注意，参数，作为构造函数，WeakSet可以接受一个数组的对象作为参数。但是实例的add方法不可以直接添加。

var a = [[1,2], [3,4]];
var ws = new WeakSet(a);
ws; // WeakSet {[1, 2], [3, 4]}
#错误，数组成员不是对象
var a = [1, 2];
var ws = new WeakSet(a);
// // Uncaught TypeError: Invalid value used in weak set(…)

WeakSet的一个用处，就是储存DOM节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

Map

Map的产生，是因为原本的对象的键值只能是字符串或者Symbol，想要是其他值，并不可行

var data = {};
var element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

会发现，想要使用一个DOM来作为key值，但是发现被转换为字符串了。但是map的key值可以任何属性的值

var m = new Map();
var o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

作为构造函数，Map也接受一个数组作为参数，该数组的成员是一个个表示键值的数组

var map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
#其实际过程如下
var items = [
  ['name', '张三'],
  ['title', 'Author']
];
var map = new Map();
items.forEach(([key, value]) => map.set(key, value));

如果连续对同一个键多次赋值，后面的值将会覆盖前面的值

let map = new Map();
map.set(1, 'aaa').set(1, 'bbb');
map.get(1) // "bbb"

在使用对象作为键值进行引用的时候，要非常注意使用对象的方法，因为在Map当中，只有内存位置一样的键，才将其视为是同一个键。

var map = new Map();
map.set(['a'], 555);
map.get(['a']); // undefined
#正确
var a = ['a'];
map.set(a, 555);
map.get(a); // 555

实际上，map.get当中是新创建了 array的一个实例，表面上看，二者是相同的键，但是其内存地址不一样，所以会的到undefined的结果。

只有对象是需要考虑内存地址的，如果是简单数据类型的话，其只要严格相等，就视为是同一个键，这其中 NaN 也视为是同一个键

let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123
map.set(-0, 123);
map.get(+0) // 123

实例的属性和操作方法

属性：
- size：返回Map结构的成员总数

操作方法：
- set(key, value)：返回整个Map结构，如果Key已经有值，则键值会被更新，否则则新生成改键，返回Map对象本身，所以可以链式调用
- get(key)：返回key所对应的值，若无，返回undefined
- has(key)：返回一个boolean
- delete(key)：删除某个键，成功则返回true，否则，返回false
- clear()

遍历方法：
- keys()
- values()
- entries()
- forEach(function(value, key, map))

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
  console.log(item[0], item[1]); // 每一项是一个数组
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
#forEach方法
map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

Map转数组，比较快速的方法是使用扩展运算符 ...

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

WeakMap

与Map基本类似，但是有一些不同的地方，不同点如下

1. key值只能是对象
2. 不能遍历，不能使用 clear 操作方法，也没有 size 属性

Proxy 和 Reflect

Proxy

Proxy用于修改某些操作的默认行为，等同于在语言层面作出修改，是一种“元”编程。实际上相当于是一种“拦截”，即外界对该对象的访问，都必须先通过这层拦截。因此，可以对外界的访问进行过滤和改写。
下面先来看一个简单的例子

var obj = new Proxy({}, {
    get(target, key, receiver) {
        console.log(`gettting ${key}`);
        return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
        console.log(`setting ${key}`);
        return Reflect.set(target, key, value, receiver);
    }
});

上面的代码实际上是对一个空对象架设了一层拦截，重定义了属性的读取（get） 和 设置（set）行为看运行结果

obj.count = 1;
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

但是，上面的结果出现，是必须在使用 proxy实例 的前提下使用才可以，如果直接使用对象本身，即空对象本省设置属性，是不需要经过这一层拦截的，即如果不使用定义的 proxy实例来进行操作，对对象本身是不会有任何影响的，其所定义的拦截行为也不会影响对象本省的用法。并且，如果使用了proxy实例，对于可以设置、但没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果。

Proxy对象的所有用法，都是以下的构造函数的方式，只不过不同的是 handler 参数的写法。target 参数表示所要拦截的目标对象，handler 参数也是一个对象，不过是用来定制拦截行为

var proxy = new Proxy(target, handler);