let 和 const

这两个声明变量的方式是ES6之中很有代表性的部分，接下来对一些特性进行一下总结记录。

let

不存在变量提升（不会存在var未声明就变成undefiend的情况）
暂时性死区 如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。当变量被声明就解除死区
不允许重复声明
块级作用域 （需配合let）

const

const的本质是无法修改这个变量的内存地址也就是说如果 const a = {}; a.name = "jack" 是可以被接受的

他拥有和let相似的特性：不提升、死区、不允许重复声明，块作用域

全局对象

在浏览器环境中 let a = 1 不会变成window的属性。

解构

解构是指从数组和对象中提取值，对变量进行赋值。

例子

let [a, b, c] = [1, 2, 3];

他尝试进行一种模式匹配，如果不成功，则undefined。两边必须都为数组，如果LHR不可以被迭代器迭代，则会报错。解构赋值允许指定默认值。

解构的常见用途

值的交换

 let x = 1;
	let y = 2;
	
	[x, y] = [y, x]; //直接对xy的值进行交换 而不需要tmp来缓存

遍历map结构

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

输入一个模块的某些方法

const { SourceMapConsumer, SourceNode } = require("source-map");

字符串扩展

Unicode

ES只支持\u0000~\uFFFF之间的UTF表示法

在ES6之中得到了改进可以使用大括号来表示大于这个范围的UTF字符串

"\u{20BB7}"

字符串的遍历

ES6为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

includes(), startsWith(), endsWith()

在ES之中增加了检测一个字符串中是否包含参数字符串的方法只有IndexOf一种，现在增加了三种

var s = 'Hello world!';
	
	s.startsWith('world', 6) // true
	s.endsWith('Hello', 5) // true
	s.includes('Hello', 6) // false

分别为是否包含，是否在起始位置包含，是否在结尾处包含

repeat()

字面意思，返回字符串，代表将原字符串重复指定次数

padStart()，padEnd()

用于字符串的补全

模板字符串

在ES5之中写一个将被插入到HTML之中的HTML代码体验并不是很好，特别是要加入一些变量，这意味着复杂的引号。在ES6之中添加了模版字符串的概念。


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

模版字符串以反引号起始和结束，中途需要用到反引号需转义

如果在模版字符串中使用变量标识符，需要使用 ${varname} 来使用

 let name  = "zhang";
	let box = `<div>${name}</div>`;
	
	$("p").append(box);

标签模板

标签模版实质上是特殊的一种函数调用方式。其调用方法为在函数名的后面接着一个字符模版。字符模版可以被认为是调用的参数

    var a = 5;
	var b = 10;
	
	tag`Hello ${ a + b } world ${ a * b }`;
	// 等同于
	tag(['Hello ', ' world ', ''], 15, 50);

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {
  var result = '';
  var i = 0;

  console.log(literals[0]);
 
  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }

  return result;

  //literals中包含的是一个数组 其中包含了无法被解析的字符串
  //argumens中的0为literals 12...成功被变量解析的部分 并且他从1开始
  //literals中的字符串每一项可以被认为是两个变量之间的部分 
  //也就是说结构基本上是间隔分布的 字符 变量 字符 变量 字符
  //以上代码就是将接受的东西原生去返回
}

以下为tag函数的应用实例。过滤用户的恶意输入。


var message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);

    // 通过正则匹配所有恶意内容替换
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // 拼接后续的字符串
    s += templateData[i];
  }
  return s;
}

数值部分

Number.MAX_SAFE_INTEGER
Number.MIN_SAFE_INTEGER
Number.EPSILON 用于检测浮点精度
Number.isInteger()
Number.parseInt()
Number.parseFloat()
Number.isFinite()
Number.isNaN()

可以看到ES6想让JS往模块化的方向走，上面的parseInt和parseFloat都被整合进了Number里面，尽量减少对全局作用域的依赖。

数组

Array.from() 讲一个类数组或者对象转换成数组
Array.of() 将传入的参数创建成一个数组，弥补传统Array构造函数的不足
数组实例的copyWithin() 用于数组部分的替换
find() 用于找出第一个符合条件的数组成员参数为回调函数如果返回为ture则返回这个值
findIndex() 类似find 但返回是一个index下标

遍历

entries()，keys()和values() ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象。keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

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"

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历。

数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

空位

在ES5中是对于空位的处理不太一致，知道ES6更加严格了一点，但是应该避免空位的出现。

函数

函数的默认值

在ES6之前需要用 var y = y||"world" 这样来做到参数设置默认值，现在允许在直接创建默认值

function log(x, y = 'World') {
  console.log(x, y);
}

如果参数默认值是变量，那么参数就不是传值的，而是每次都重新计算默认值表达式的值。

function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

双重默认值如果没有传入对象就利用一个空对象，如果传入对象就在内部进行一个解构。

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

除非你写Undefined 不然是不能省略参数而调用默认值的。

函数的length

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。因为函数的length属性指的是函数的预期参数的个数，而指定了默认值了之后就会从预期参数中移除。

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

关键在于声明初始化的时候以及后期函数运行期间的变量是分成两个层次的，具有严格的先后顺序。

应用

利用默认值来做到如果不传入参数就爆一个异常


function throwIfMissing() {
throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}

foo()
// Error: Missing parameter

rest参数

以前通常调用函数内部的所有参数数组需要将arguments转换成数组这个rest可以来简化这一操作


function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

//取代arguments取代arguments取代arguments取代arguments

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

箭头函数

var f = () => 5;
// 等同于
var f = function () { return 5 };

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

主要规则如下

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
箭头函数可以与变量解构结合使用。

用法展示

简化回调函数

// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

与rest结合

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

注意点

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

箭头函数导致this总是指向函数定义生效时所在的对象.

转换成ES5代码之后其实利用的也是that这方法来生成一个tmp保存this对象。虽然可能只是一种语法糖，但确实很方便

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。所以你无法对箭头函数使用bind方法apply call方法。

一定要小心这个问题，自身永远不拥有this,都是引用的外层。

非常适合在callback这种情况下下使用，其他情况还是少用为妙。

this绑定

箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案，但是Babel转码器已经支持。

蹦床函数

function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}

上面就是蹦床函数的一个实现，它接受一个函数f作为参数。只要f执行后返回一个函数，就继续执行。注意，这里是返回一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而就消除了调用栈过大的问题。

function tco(f) {
  var value;
  var active = false;
  var accumulated = [];

  return function accumulator() {
    accumulated.push(arguments);
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

var sum = tco(function(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1)
  }
  else {
    return x
  }
});

sum(1, 100000)
// 100001

上面代码中，tco函数是尾递归优化的实现，它的奥妙就在于状态变量active。默认情况下，这个变量是不激活的。一旦进入尾递归优化的过程，这个变量就激活了。然后，每一轮递归sum返回的都是undefined，所以就避免了递归执行；而accumulated数组存放每一轮sum执行的参数，总是有值的，这就保证了accumulator函数内部的while循环总是会执行。这样就很巧妙地将“递归”改成了“循环”，而后一轮的参数会取代前一轮的参数，保证了调用栈只有一层。

对象

属性的简洁表示法

function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

也就是说他允许直接使用变量作为对象的属性或者方法，其中变量的标识符等于属性的名字，变量的内容等同于属性的内容

适用于模块的暴露

module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};

属性名表达式

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

适用于你需要在name上调用表达式的情况

不要与简洁表达式法同用，报错

Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

他的实现原理和jQuery的exanted基本类似，注意是浅复制也就是复制指针的方式，当源对象内部有属性为对象时，这种复制是复制指针的，source和target对象共享一个内部属性对象。如果要深复制完全隔离。可以通过转成字符串对象，然后再转换成js对象。

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

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

主要用途，添加属性，添加方法，克隆对象，实现一个对象合并几个对象，实现默认值（参数1为目标对象，2为默认的对象内部有默认参数，3为用户传入的具体对象参数）

原型对象三大操作

Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）在ES6中都是推荐的标准

Object.keys()，Object.values()，Object.entries()

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for…of循环使用。

这三者单独使用都是返回一个相应内容的数组，前提是可遍历。

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

var obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

Object.entries方法的另一个用处是，将对象转为真正的Map结构。x

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Symbol

一种新的数据类型，用于避免属性名冲突。

所有的symbol都是不相等的，传入的参数也只是描述符而已。


var mySymbol = Symbol();

// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
var a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

所有的symbol都不会被遍历出来，但是可以由Object.getOwnPropertySymbols获取

Set Map

set

类似数组，但里面没有重复的值


const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

上面代码通过add方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

首先，WeakSet 的成员只能是对象，而不能是其他类型的值。其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

所以他比较适合临时存放数据，

map

传统的JS对象也是类似map的键值对，但是键只能为字符串。

而在ES6新增的map中，允许值-值，键可以是任意一种数据。

所以map是一种更加完善的hash结构



const m = new Map();
const 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 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。


const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

map不用考虑键名碰撞的问题，因为实际上键里保存的是内存地址。

结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。


const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

Proxy

可以理解为在某个对象的外层套了一个壳当你set或者get操作的时候，可以进行拦截，比如get的时候检查属性是否存在，set的时候参数是否正确。

Reflect

他的作用有很多，一部分是简化操作，一部分是确保在代理的时候也能调用原生的操作。

promise

promise是一种异步解决方案，


Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 Pending 变为 Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 Pending 变为 Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。


function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

promise新建后会立即执行


var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

Iterator 和 for…of 循环

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。

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

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

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

下面是一个模拟next方法返回值的例子。


function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++]} :
        {done: true};
    }
  };
}

默认 Iterator 接口

Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for…of循环（详见下文）。当使用for…of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是”可遍历的“（iterable）。

原生具备 Iterator 接口的数据结构如下。

Array
Map
Set
String
TypedArray
函数的 arguments 对象

Generator 函数的语法

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API，它的异步编程应用请看《Generator 函数的异步应用》一章。

Generator 函数有多种理解角度。从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。


function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。

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

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

yield

如果把Generator函数看成是一种可以断点的函数，那么yield可以被认为是设置断点的方法。