块级作用域

let 取代 var：ES6提出了两个新的声明变量的命令let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。var命令存在变量提升效用，let命令没有这个问题。

全局常量和线程安全：在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。

​ const优于let有几个原因。一是const可以提醒阅读代码的人这个变量不应该改变，防止了无意间修改变量值所导致的错误；二是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；三是 JavaScript 编译器会对const进行优化，所以多使用const有利于提高程序的运行效率，也就是说let和const的本质区别其实是编译器内部的处理不同。

​ 所有的函数都应该设置为常量。长远来看，JavaScript 可能会有多线程的实现(比如Intel公司的 River Trail那一类的项目)，这时let表示的变量只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。

ESLint 的使用

​ ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

字符串

​ 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;

解构赋值

​ 使用数组成员对变量赋值时，优先使用解构赋值。

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

​ 如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

// good
const [first, second] = arr;
// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}
// good
function processInput(input) {
  return { left, right, top, bottom };
}
const { left, right } = processInput(input);

对象

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

​ 对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

​ 如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

​ 对象的属性和方法尽量采用简洁表达法，这样易于描述和书写。

// good
const a = { k1: v1, k2: v2 };
const b = {
  k1: v1,
  k2: v2,
};
// good
const a = { x: null };
a.x = 3;
Object.assign(a, { y: 3 }); //if reshape unavoidable
// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true, //这个属性名需要计算得到，这时最好采用属性表达式，在新建obj时，将该属性与其他属性定义在一起
};
// good
const atom = {
  ref,
  value: 1,
  addValue(value) {
    return atom.value + value;
  },
};

数组

​ 使用扩展运算符（…）拷贝数组。

​ 使用Array.from方法将类似数组的对象转为数组。

// good
const itemsCopy = [...items];
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

函数

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

​ 那些使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了this。

​ 箭头函数取代Function.prototype.bind，不应再用self/_this/that绑定this。

​ 简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。所有配置项都应集中在一个对象放在最后一个参数，布尔值不能直接作为参数。

​ 不要在函数体内使用arguments变量，使用rest 运算符（…）代替。因为rest运算符显式表明你想要获取参数，而且arguments是一个类似数组的对象，而rest运算符可以提供一个真正的数组。

​ 使用默认值语法设置函数参数的默认值。

(() => {
  console.log('Welcome to the Internet.');
})();
// good
[1, 2, 3].map((x) => {
  return x * x;
});
// best
[1, 2, 3].map(x => x * x);
// best
const boundMethod = (...params) => method.apply(this, params);
// good
function divide(a, b, { option = false } = {}) {
}
// good
function concatenateAll(...args) {
  return args.join('');
}
// good
function handleThings(opts = {}) {
  // ...
}

Map 结构

​ 注意区分Object和Map，只有模拟现实世界的实体对象时才使用Object。如果只需key: value的数据结构，使用Map结构，因为Map有内建的遍历机制。

let map = new Map(arr);
for (let key of map.keys()) {
  console.log(key);
}
for (let value of map.values()) {
  console.log(value);
}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

Class

​ 总是用Class取代需要prototype的操作，因为Class的写法更简洁，更易于理解。

​ 使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}
// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

模块

​ Module语法是JavaScript模块的标准写法，坚持使用这种写法。使用import取代require，使用export取代module.exports。如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。

​ 不要在模块输入中使用通配符。因为这样可以确保模块中有一个默认输出（export default）。

​ 如果模块默认输出一个函数，函数名的首字母应该小写。

​ 如果模块默认输出一个对象，对象名的首字母应该大写。

// good
import { func1, func2 } from 'moduleA';
// ES6的写法
import React from 'react';
class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};
export default Breadcrumbs;
// good
import myObject from './importModule'; 
function makeStyleGuide() {//如果模块默认输出一个函数，函数名的首字母应该小写
}
export default makeStyleGuide;
const StyleGuide = {//如果模块默认输出一个对象，对象名的首字母应该大写。
  es6: {
  }
};
export default StyleGuide;

读懂规格

概述

​ 规格文件是计算机语言的官方标准，详细描述语法规则和实现方法。规格是解决问题的“最后一招”。这对 JavaScript 语言很有必要。因为它的使用场景复杂，语法规则不统一，例外很多，各种运行环境的行为不一致，导致奇怪的语法问题层出不穷，任何语法书都不可能囊括所有情况。查看规格，不失为一种解决语法问题的最可靠、最权威的终极方法。

术语

抽象操作

​ 抽象操作就是引擎的一些内部方法，外部不能调用。规格定义了一系列的抽象操作，规定了它们的行为，留给各种引擎自己去实现。许多函数的算法都会多次用到同样的步骤，所以ES6规格将它们抽出来定义成抽象操作，方便描述。

Record 和 field

​ ES6规格将键值对的数据结构称为Record，其中的每一组键值对称为field。就是说，一个Record由多个field组成，而每个field都包含一个键名(key)和一个键值(value)。

[[Notation]]

​ ES6规格大量使用[[Notation]]这种书写法，比如[[Value]]、[[Writable]]、[[Get]]、[[Set]]等等。它用来指代field的键名。

​ 举例来说，obj是一个Record，它有一个Prototype属性。ES6规格不会写obj.Prototype，而是写obj.[[Prototype]]。一般来说，使用[[Notation]]这种书写法的属性都是对象的内部属性。

​ 所有的JavaScript函数都有一个内部属性[[Call]]，用来运行该函数。

Completion Record

​ 每一个语句都会返回一个Completion Record，表示运行结果。每个Completion Record有一个[[Type]]属性，表示运行结果的类型，它有五种可能的值。

• normal
• return
• throw
• break
• continue

​ 如果[[Type]]的值是normal，就称为 normal completion，表示运行正常。其他的值都称为 abrupt completion。开发者只需要关注[[Type]]为throw的情况，即运行出错；break、continue、return这三个值都只出现在特定场景，可以不用考虑。

抽象操作的标准流程

Let result be ? AbstractOp().
return result.
//调用抽象操作AbstractOp()，得到result，这是一个Completion Record。如果result属于abrupt completion就直接返回，如果没有返回就表示result属于normal completion
// ?就代表AbstractOp()可能会报错。一旦报错，就返回错误，否则取出值。将result的值设置为resultCompletionRecord.[[Value]]，返回result。
//除了?，ES 6 规格还使用另一个简写符号!
Let result be ! AbstractOp().
return result.
//!代表AbstractOp()不会报错，返回的一定是normal completion，总是可以取出值。

相等运算符

​ 相等运算符用于比较两个值，返回true或false。

0 == null // false 由于0的类型是数值，null的类型是Null运算的结果，因此算法细节里的前11步都得不到结果，要到第12步才能得到false
null==undefined //true
undefined==null //true

数组的空位

​ 数组的空位会反映在length属性，也就是说空位有自己的位置，但是这个位置的值是未定义的，即这个值是不存在的。如果一定要读取，结果就是undefined(因为undefined在JS语言中表示不存在)。

const a1 = [undefined, undefined, undefined];
const a2 = [, , ,];
a1.length // 3
a2.length // 3
a1[0] // undefined
a2[0] // undefined
a1[0] === a2[0] // true
0 in a1 // true
0 in a2 // false （数组a2取不到属性名，这个属性名根本就不存在）
a1.hasOwnProperty(0) // true
a2.hasOwnProperty(0) // false （数组a2取不到属性名，这个属性名根本就不存在）
Object.keys(a1) // ["0", "1", "2"]
Object.keys(a2) // [] （数组a2取不到属性名，这个属性名根本就不存在）
a1.map(n => 1) // [1, 1, 1]
a2.map(n => 1) // [, , ,] (数组a2没有发生遍历)

数组的 map 方法

const arr = [, , ,];
arr.map(n => {
  console.log(n);
  return 1;
}) // [, , ,]

​ 上面代码中，arr是一个全是空位的数组，map遍历成员时发现是空位，就直接跳过，不会进入回调函数。因此回调函数里的console.log语句根本不会执行，整个map方法返回一个全是空位的新数组。