web前端规范指南.zip

# es6 规范指南 *用更合理的方式写 JavaScript* <a name="table-of-contents"></a> ## 目录 1. [类型](#types) 1. [引用](#references) 1. [对象](#objects) 1. [数组](#arrays) 1. [解构](#destructuring) 1. [字符串](#strings) 1. [函数](#functions) 1. [箭头函数](#arrow-functions) 1. [构造函数](#constructors) 1. [模块](#modules) 1. [Iterators & Generators ](#iterators-and-generators) 1. [属性](#properties) 1. [变量](#variables) 1. [提升](#hoisting) 1. [比较运算符 & 等号](#comparison-operators--equality) 1. [代码块](#blocks) 1. [注释](#comments) 1. [空白](#whitespace) 1. [逗号](#commas) 1. [分号](#semicolons) 1. [类型转换](#type-casting--coercion) 1. [命名规则](#naming-conventions) 1. [存取器](#accessors) 1. [事件](#events) 1. [jQuery](#jquery) <a name="types"></a> ## 类型 - [1.1](#1.1) <a name='1.1'></a> **基本类型**: 直接存取基本类型。 + `字符串` + `数值` + `布尔类型` + `null` + `undefined` ```javascript const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 ``` - [1.2](#1.2) <a name='1.2'></a> **复制类型**: 通过引用的方式存取复杂类型。 + `对象` + `数组` + `函数` ```javascript const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9 ``` **[⬆ 返回目录](#table-of-contents)** <a name="references"></a> ## 引用 - [2.1](#2.1) <a name='2.1'></a> 对所有的引用使用 `const` ；不要使用 `var`。 > 为什么？这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。 ```javascript // bad var a = 1; var b = 2; // good const a = 1; const b = 2; ``` - [2.2](#2.2) <a name='2.2'></a> 如果你一定需要可变动的引用，使用 `let` 代替 `var`。 > 为什么？因为 `let` 是块级作用域，而 `var` 是函数作用域。 ```javascript // bad var count = 1; if (true) { count += 1; } // good, use the let. let count = 1; if (true) { count += 1; } ``` - [2.3](#2.3) <a name='2.3'></a> 注意 `let` 和 `const` 都是块级作用域。 ```javascript // const 和 let 只存在于它们被定义的区块内。 { let a = 1; const b = 1; } console.log(a); // ReferenceError console.log(b); // ReferenceError ``` **[⬆ 返回目录](#table-of-contents)** <a name="objects"></a> ## 对象 - [3.1](#3.1) <a name='3.1'></a> 使用字面值创建对象。 ```javascript // bad const item = new Object(); // good const item = {}; ``` - [3.2](#3.2) <a name='3.2'></a> 如果你的代码在浏览器环境下执行，别使用 [保留字](http://es5.github.io/#x7.6.1) 作为键值。这样的话在 IE8 不会运行。 [更多信息](https://github.com/airbnb/javascript/issues/61)。 但在 ES6 模块和服务器端中使用没有问题。 ```javascript // bad const superman = { default: { clark: 'kent' }, private: true, }; // good const superman = { defaults: { clark: 'kent' }, hidden: true, }; ``` - [3.3](#3.3) <a name='3.3'></a> 使用同义词替换需要使用的保留字。 ```javascript // bad const superman = { class: 'alien', }; // bad const superman = { klass: 'alien', }; // good const superman = { type: 'alien', }; ``` <a name="es6-computed-properties"></a> - [3.4](#3.4) <a name='3.4'></a> 创建有动态属性名的对象时，使用可被计算的属性名称。 > 为什么？因为这样可以让你在一个地方定义所有的对象属性。 ```javascript function getKey(k) { return `a key named ${k}`; } // bad const obj = { id: 5, name: 'San Francisco', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, }; ``` <a name="es6-object-shorthand"></a> - [3.5](#3.5) <a name='3.5'></a> 使用对象方法的简写。 ```javascript // bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, }; ``` <a name="es6-object-concise"></a> - [3.6](#3.6) <a name='3.6'></a> 使用对象属性值的简写。 > 为什么？因为这样更短更有描述性。 ```javascript const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, }; ``` - [3.7](#3.7) <a name='3.7'></a> 在对象属性声明前把简写的属性分组。 > 为什么？因为这样能清楚地看出哪些属性使用了简写。 ```javascript const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { episodeOne: 1, twoJedisWalkIntoACantina: 2, lukeSkywalker, episodeThree: 3, mayTheFourth: 4, anakinSkywalker, }; // good const obj = { lukeSkywalker, anakinSkywalker, episodeOne: 1, twoJedisWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4, }; ``` **[⬆ 返回目录](#table-of-contents)** <a name="arrays"></a> ## 数组 - [4.1](#4.1) <a name='4.1'></a> 使用字面值创建数组。 ```javascript // bad const items = new Array(); // good const items = []; ``` - [4.2](#4.2) <a name='4.2'></a> 向数组添加元素时使用 Arrary#push 替代直接赋值。 ```javascript const someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra'); ``` <a name="es6-array-spreads"></a> - [4.3](#4.3) <a name='4.3'></a> 使用拓展运算符 `...` 复制数组。 ```javascript // bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items]; ``` - [4.4](#4.4) <a name='4.4'></a> 使用 Array#from 把一个类数组对象转换成数组。 ```javascript const foo = document.querySelectorAll('.foo'); const nodes = Array.from(foo); ``` **[⬆ 返回目录](#table-of-contents)** <a name="destructuring"></a> ## 解构 - [5.1](#5.1) <a name='5.1'></a> 使用解构存取和使用多属性对象。 > 为什么？因为解构能减少临时引用属性。 ```javascript // bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return `${firstName} ${lastName}`; } // good function getFullName(obj) { const { firstName, lastName } = obj; return `${firstName} ${lastName}`; } // best function getFullName({ firstName, lastName }) { return `${firstName} ${lastName}`; } ``` - [5.2](#5.2) <a name='5.2'></a> 对数组使用解构赋值。 ```javascript const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr; ``` - [5.3](#5.3) <a name='5.3'></a> 需要回传多个值时，使用对象解构，而不是数组解构。 > 为什么？增加属性或者改变排序不会改变调用时的位置。 ```javascript // bad function processInput(input) { // then a miracle occurs return [left, right, top, bottom]; } // 调用时需要考虑回调数据的顺序。 const [left, __, top] = processInput(input); // good funct