现在学习也不晚

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

本章探讨如何将 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，...

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 是一个对象， 从它可以获取异...

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（ array-like object ）和可遍历（ iterable ）的对象（包括 ES6 新增的数据结构 Set 和Map ）。let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3};// ES5 的写法var arr1 = [].slice.call(ar...

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。Array(3) // [, , ,]上面代码中，Array(3)返回一个具有 3 个空位的数组。注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。0 in [undefined, undefined, undefined] // tr...

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于 ES7 ，但 Babel 转码器已经支持。[1, 2, 3].includes(2); // true[1, 2, 3].includes(4); // false[1, 2, NaN].includes(NaN); // true该方法的第二个参...

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历for (let index of ['a', 'b'].keys()) {console.log(index);}// ...

fill方法使用给定值，填充一个数组。['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。fill方法还可以接受第二个和第三个参数，...

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 函数会返回一个遍历...

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

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

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

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

正常使用js的数据放入页面的时候需要自己手动拼接字符串的，现在es6提供了一种模板字符串解决了这个问题模板字符串（ template string ）是增强版的字符串，用反引号（ ` ）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。ps：反引号别告诉我不知道是啥，键盘一左边的按键在里面的变量写法不用再拼接了，只需要用${}来划定范围就行了,大括号内部可以放入任意...

1  含义扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, &...

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...

ES6 引入 rest 参数（形式为 “... 变量名 ” ），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。 rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。function add(...values) {let sum = 0;for (var val of values) {sum += val;}return sum;}add(2,...

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。[1, 4, -5, 10].find((n) => n < 0)// -5[1, 5, 10, 15].find(function(value, index, ar...

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...

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...

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。Array.prototype.copyWithin(target, start = 0, end = this.length)它接受三个参数。target （必需）：从该位置开始替换数据。start （可选）：从该位置开始读取数据，默认为...

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) { ...

Array.of方法用于将一组值，转换为数组。Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异Array() // []Array(...

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 ...

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

1  基本用法ES6 允许使用 “ 箭头 ” （=>）定义函数。var f = v => v;//上面的箭头函数等同于：var f = function(v) {return v;};//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;// 等同于var f = function () { return 5 }...

函数的name属性，返回该函数的函数名。function foo() {}foo.name // "foo"这个属性早就被浏览器广泛支持，但是直到 ES6 ，才将其写入了标准。需要注意的是， ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量， ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。var func1 = function (...