现在学习也不晚

（1） Map 转为数组前面已经提过， Map 转为数组最方便的方法， 就是使用扩展运算符（...）。let myMap = new Map().set(true, 7).set({ foo: 3}, ['abc']);[...myMap]// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]（2） 数组转为 Map将数组转入 Ma

（1） size 属性size属性返回 Map 结构的成员总数。let map = new Map();map.set('foo', true);map.set('bar', false);map.size // 2（2） set(key, value)set方法设置key所对应的键值， 然后返回整个 Map 结构。 如果key已经有值， 则键值会被更新， 否则就新生成该键。

1 Map 结构的目的和基本用法JavaScript 的对象（ Object）， 本质上是键值对的集合（ Hash 结构）， 但是传统上只能用字符串当作键。 这给它的使用带来了很大的限制。var data = {};var element = document.getElementById('myDiv');data[element] = 'metadata';data['[ob

1  概述规格文件是计算机语言的官方标准，详细描述语法规则和实现方法。一般来说，没有必要阅读规格，除非你要写编译器。因为规格写得非常抽象和精炼，又缺乏实例，不容易理解，而且对于解决实际的应用问题，帮助不大。但是，如果你遇到疑难的语法问题，实在找不到答案，这时可以去查看规格文件，了解语言标准是怎么说的。规格是解决问题的 “ 最后一招 ” 。这对 JavaScript 语言很有必要。因为它

ESLint 是一个语法规则和代码风格的检查工具， 可以用来保证写出语法正确、 风格统一的代码。首先， 安装 ESLint。$ npm i - g eslint然后， 安装 Airbnb 语法规则。$ npm i - g eslint - config - airbnb最后， 在项目的根目录下新建一个.eslintrc文件， 配置 ESLint。{ "extends": "eslint-c...

本章探讨如何将 ES6 的新语法， 运用到编码实践之中， 与传统的 JavaScript 语法结合在一起， 写出合理的、 易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范， 具体可参阅 jscs.info， 下面的内容主要参考了 Airbnb 的 JavaScript 风格规范。1 块级作用域（1）let 取代 varES6 提出了两个新的声明变量的命令： let和const。 其中，...

8 循环加载“ 循环加载”（ circular dependency） 指的是， a脚本的执行依赖b脚本， 而b脚本的执行又依赖a脚本。// a.jsvar b = require('b');// b.jsvar a = require('a');通常，“ 循环加载” 表示存在强耦合， 如果处理不好， 还可能导致递归加载， 使得程序无法执行， 因此应该避免出现。但是实际上， 这是很难避免的，...

ES6 的 Class 只是面向对象编程的语法糖， 升级了 ES5 的构造函数的原型链继承的写法， 并没有解决模块化问题。 Module 功能就是为了解决这个问题而提出的。历史上， JavaScript 一直没有模块（ module） 体系， 无法将一个大程序拆分成互相依赖的小文件， 再用简单的方法拼装起来。 其他语言都有这项功能，比如 Ruby 的require、 Python 的import，...

new是从构造函数生成实例的命令。 ES6 为new命令引入了一个new.target属性，（ 在构造函数中） 返回new命令作用于的那个构造函数。 如果构造函数不是通过new命令调用的， new.target会返回undefined， 因此这个属性可以用来确定构造函数是怎么调用的。function Person(name) { if(new.target !== undefined) { ...

类相当于实例的原型， 所有在类中定义的方法， 都会被实例继承。 如果在一个方法前， 加上static关键字， 就表示该方法不会被实例继承， 而是直接通过类来调用， 这就称为“ 静态方法”。class Foo { static classMethod() { return 'hello'; }}Foo.classMethod() // 'hello'var foo = new Foo(...

如果某个方法之前加上星号（ * ），就表示该方法是一个 Generator 函数。class Foo { constructor(...args) { this.args = args; } *[Symbol.iterator]() { for(let arg of this.args) { yield arg; ...

与 ES5 一样， 在 Class 内部可以使用get和set关键字， 对某个属性设置存值函数和取值函数， 拦截该属性的存取行为。class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value);...

1 基本用法Class 之间可以通过extends关键字实现继承， 这比 ES5 的通过修改原型链实现继承， 要清晰和方便很多。class ColorPoint extends Point {}上面代码定义了一个ColorPoint类， 该类通过extends关键字， 继承了Point类的所有属性和方法。 但是由于没有部署任何代码， 所以这两个类完全一样， 等于复制了一个Point类。 下面， 我...

1 概述JavaScript 语言的传统方法是通过构造函数， 定义并生成新对象。 下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function() { return '(' + this.x + ', ' + this.y + ')';};var p = new P...

异步编程对 JavaScript 语言太重要。 Javascript 语言的执行环境是“ 单线程” 的， 如果没有异步编程， 根本没法用， 非卡死不可。ES6 诞生以前， 异步编程的方法， 大概有下面四种。回调函数事件监听发布 / 订阅Promise 对象ES6 将 JavaScript 异步编程带入了一个全新的阶段， ES7 的Async函数更是提出了异步编程的终极解决方案。1 基本概念1.1 ...

5 Promise.all()Promise.all方法用于将多个 Promise 实例， 包装成一个新的 Promise 实例。var p = Promise.all([p1, p2, p3]);上面代码中， Promise.all方法接受一个数组作为参数， p1、 p2、 p3都是 Promise 对象的实例， 如果不是， 就会先调用下面讲到的Promise.resolve方法， 将参数转为 ...

1 Promise 的含义Promise 是异步编程的一种解决方案， 比传统的解决方案—— 回调函数和事件—— 更合理和更强大。 它由社区最早提出和实现， ES6 将其写进了语言标准， 统一了用法， 原生提供了Promise对象。所谓Promise， 简单说就是一个容器， 里面保存着某个未来才会结束的事件（ 通常是一个异步操作） 的结果。 从语法上说， Promise 是一个对象， 从它可以获取异...

5 Generator.prototype.return()Generator 函数返回的遍历器对象， 还有一个return方法， 可以返回给定的值， 并且终结遍历 Generator 函数。function* gen() { yield 1; yield 2; yield 3;}var g = gen();g.next() // { value: 1, done: false }g...

1 简介1.1 基本概念Generator 函数是 ES6 提供的一种异步编程解决方案， 语法行为与传统函数完全不同。 本章详细介绍 Generator 函数的语法和 API， 它的异步编程应用请看《 异步操作》 一章。Generator 函数有多种理解角度。 从语法上， 首先可以把它理解成， Generator 函数是一个状态机， 封装了多个内部状态。执行 Generator 函数会返回一个遍历...

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

WeakMap结构与Map结构基本类似， 唯一的区别是它只接受对象作为键名（ null除外）， 不接受其他类型的值作为键名， 而且键名所指向的对象， 不计入垃圾回收机制。var map = new WeakMap();map.set(1, 2);// TypeError: 1 is not an object!map.set(Symbol(), 2);// TypeError: Inval...

WeakSet 结构与 Set 类似， 也是不重复的值的集合。 但是， 它与 Set 有两个区别。首先， WeakSet 的成员只能是对象， 而不能是其他类型的值。其次， WeakSet 中的对象都是弱引用， 即垃圾回收机制不考虑 WeakSet 对该对象的引用， 也就是说， 如果其他对象都不再引用该对象， 那么垃圾回收机制会自动回收该对象所占用的内存， 不考虑该对象还存在于 WeakSet 之中...

1 基本用法ES6 提供了新的数据结构 Set。 它类似于数组， 但是成员的值都是唯一的， 没有重复的值。Set 本身是一个构造函数， 用来生成 Set 数据结构。var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));for(let i of s) { console.log(i);}// 2 3 5 4上面代码通过a...

Reflect对象的方法清单如下， 共 13 个。Reflect.apply(target, thisArg, args)Reflect.construct(target, args)Reflect.get(target, name, receiver)Reflect.set(target, name, value, receiver)Reflect.defineProperty(targ...

Reflect对象与Proxy对象一样， 也是 ES6 为了操作对象而提供的新 API。 Reflect对象的设计目的有这样几个。（ 1） 将Object对象的一些明显属于语言内部的方法（ 比如Object.defineProperty）， 放到Reflect对象上。 现阶段， 某些方法同时在Object和Reflect对象上部署， 未来的新方法将只部署在Reflect对象上。（ 2） 修改某些 ...

Proxy.revocable 方法返回一个可取消的 Proxy 实例。let target = {};let handler = {};let {proxy,revoke} = Proxy.revocable(target, handler);proxy.foo = 123;proxy.foo // 123revoke();proxy.foo // TypeError: Revoke...

1 get()get方法用于拦截某个属性的读取操作。 上文已经有一个例子， 下面是另一个拦截读取操作的例子。var person = { name: " 张三 "};var proxy = new Proxy(person, { get: function(target, property) { if(property in target) { return target[pro...

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种 “ 元编程 ” （ meta programming ），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层 “ 拦截 ” ，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 Proxy 这个词的原意是代理，用在这里表示由它来 “ 代理 ” 某些操作，可以...

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（ mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入 Symbol 的原因。ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值。它是 JavaS...

ES5 有一个Object.getOwnPropertyDescriptor方法，返回某个对象属性的描述对象（ descriptor ）。var obj = { p: 'a' };Object.getOwnPropertyDescriptor(obj, 'p')// Object { value: "a",// writable: true,// enumerable: true,// ...

目前， ES7 有一个提案，将 Rest 解构赋值 / 扩展运算符（ ... ）引入对象。 Babel 转码器已经支持这项功能。（ 1 ） Rest 解构赋值对象的 Rest 解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4...

1 Object.keys()ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。var obj = { foo: "bar", baz: 42 };Object.keys(obj)// ["foo", "baz"]目前， ES7 有一个提案，引入了跟Object.keys配套的Object.values和...

（ 1 ）__proto__ 属性__proto__属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前，所有浏览器（包括 IE11 ）都部署了这个属性。// es6 的写法var obj = { method: function() { ... }};obj.__proto__ = someOtherObj;// es5 的写法var obj = Objec...

ES6 一共有 5 种方法可以遍历对象的属性。（ 1 ） for...infor...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。（ 2 ） Object.keys(obj)Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）。（ 3 ） Object.getOwnPropertyNames(obj)Object.ge...

对象的每个属性都有一个描述对象（ Descriptor ），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。let obj = { foo: 123 };Object.getOwnPropertyDescriptor(obj, 'foo')// {// value: 123,// writable: true,// enu...

1  基本用法Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。var target = { a: 1 };var source1 = { b: 2 };var source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b...

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。 JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。ES6 提出 “Same-value equality” （同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用...

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。var foo = 'bar';var baz = {foo};baz // {foo: "bar"}// 等同于var baz = {foo: foo};上面代码表明， ES6 允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。下面是另一个例子。function f(x, y) { ...

ES7 有一个提案，允许函数的最后一个参数有尾逗号（ trailing comma ）。目前，函数定义和调用时，都不允许有参数的尾逗号。function test(a,b,){ /********/}test(1,2);如果以后要在函数的定义之中添加参数，就势必还要添加一个逗号。这对版本管理系统来说，就会显示，添加逗号的那一行也发生了变动。这看上去有点冗余，因此新提案允许定义和调用时，尾部...

1  什么是尾调用？尾调用（ Tail Call ）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x){ return g(x);}上面代码中，函数 f 的最后一步是调用函数 g ，这就叫尾调用。以下三种情况，都不属于尾调用。// 情况一function f(x){ let y = g(x); return ...