ECMAScript 6 编程风格

的数组。// badfunction concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join('');}// goodfunction concatenateAll(...args) { return args.join('');}使用默认值语法设置函数参数的默认值。// badfunction handleThings(opts) { opts = opts || {};}// goodfunction 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的写法更简洁，更易于理解。// badfunction Queue(contents = []) { this._queue = [...contents];}Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value;}// goodclass Queue { constructor(contents = []) { this._queue = [...contents]; } pop() { const value = this._queue[0]; this._queue.splice(0, 1); return value; }}使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。// badconst inherits = require('inherits');function PeekableQueue(contents) { Queue.apply(this, contents);}inherits(PeekableQueue, Queue);PeekableQueue.prototype.peek = function() { return this._queue[0];}// goodclass PeekableQueue extends Queue { peek() { return this._queue[0]; }}模块首先，Module语法是JavaScript模块的标准写法，坚持使用这种写法。使用import取代require。// badconst moduleA = require('moduleA');const func1 = moduleA.func1;const func2 = moduleA.func2;// goodimport { func1, func2 } from 'moduleA';使用export取代module.exports。// commonJS的写法var React = require('react');var Breadcrumbs = React.createClass({ render() { return <nav />; }});module.exports = Breadcrumbs;// ES6的写法import React from 'react';const Breadcrumbs = React.createClass({ render() { return <nav />; }});export default Breadcrumbs如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，不要export default与普通的export同时使用。不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。// badimport * as myObject './importModule';// goodimport myObject from './importModule';如果模块默认输出一个函数，函数名的首字母应该小写。function makeStyleGuide() {}export default makeStyleGuide;如果模块默认输出一个对象，对象名的首字母应该大写。const StyleGuide = { es6: { }};export default StyleGuide;ESLint的使用ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。首先，安装ESLint。$ npm i -g eslint然后，安装Airbnb语法规则。$ npm i -g eslint-config-airbnb最后，在项目的根目录下新建一个.eslintrc文件，配置ESLint。{ "extends": "eslint-config-airbnb"}现在就可以检查，当前项目的代码是否符合预设的规则。index.js文件的代码如下。var unusued = 'I have no purpose!';function greet() { var message = 'Hello, World!'; alert(message);}greet();使用ESLint检查这个文件。$ eslint index.jsindex.js 1:5 error unusued is defined but never used no-unused-vars 4:5 error Expected indentation of 2 characters but found 4 indent 5:5 error Expected indentation of 2 characters but found 4 indent? 3 problems (3 errors, 0 warnings)上面代码说明，原文件有三个错误，一个是定义了变量，却没有使用，另外两个是行首缩进为4个空格，而不是规定的2个空格。