ES6编程风格 ES6编程风格

1. 块级作用域
1.1. let取代var，let可以完全取代var，因为两者语义相同，且let没有副作用： var会注册全局变量；
var会存在变量提升；
1.2. let和const之间，优先使用const。原因： const可以提醒别人，这个变量不应该改变；
const符合函数式编程思想，运算不改变值，只新建值；
Javascript编译器会对const进行优化，效率更高；
2. 字符串
2.1. 静态字符串一律使用单引号，不使用双引号。

const a = ‘football’;

2.2. 动态字符串一律使用反引号（字符串拼接）。

const a = `foot${ballName}`

3. 结构赋值
3.1. 使用数组成员时，优先使用解构赋值：

const arr = [1, 2, 3, 4]; const [first, second] = arr;

3.2. 函数参数如果是对象，优先使用解构赋值：

// good function getFullName (obj) { const {firstname, lastname} = obj; }// best function getFullName ({firstname, lastname}) { }

3.3. 函数返回结果，优先使用对象解构赋值，避免数组解构赋值：

function getFullName () { return {firstname, lastname}; }

4. 对象
4.1. 单行定义的对象，最后一个成员不要逗号；多行定义的对象，最后一个成员要有逗号：

const a = {a: 1, b: 2}; const a = { a: 1, b: 2, }

4.2. 对象尽量（不强制）静态化，如果需要添加新属性时，用Object.assign方法：

const a = {a: 1}; Object.assign(a, {b: 2});

4.3. 如果属性名是动态的，创建时使用属性表达式定义：

const a = { a: 1, b: 2, [getName()]: true, };

4.4. 对象的定义尽量采用简洁表达法：

const a = { a, b, getName() { return ‘hello’; }, };

5. 数组
5.1. 使用扩展运算符（。。。）复制数组：

const items = [1, 2, 3]; const myCopy = [...items];

5.2. 使用Array.from方法将类数组对象转化成数组：

const a = {0: ‘hi’, 1: ‘hello’}; const b = Array.from(a);

6. 函数
6.1. 立即执行函数写成箭头函数形式：

(() => { console.log(‘Hello’); })();

6.2. 使用函数表达式的场合，要使用箭头函数（带{}体的箭头函数，参数要有括号；反之，不要有括号）：

// good [1, 2, 3].map((x) => { return x + 1; }); // best [1, 2, 3].map(x => x + 1);

6.3. 箭头函数不应再用self、_this、that绑定this对象：

// bad const that/_this/self = this;

6.4. 不要再使用arguments参数集合，用扩展运算符（。。。）代替：

function myFunc (。。。args) { return args.join(‘’); }

6.5. 在参数定义时，设置参数的默认值：

function myFunc (name, sex = ‘female’, skills = {}, {option = false} = {}) { // … }

7. Map结构
7.1. 如果只是需要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 [key, value] of map.entries()) { console.log(key, value); }

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

// Class的用法这里就不详细介绍了，可以自己去查。

9. 模块
9.1. Module是JS的模块的标准写法，要坚持使用。使用import取代require：

// bad const moduleA = require(‘moduleA’); const func1 = moduleA.func1; const func2 = moduleA.func2; // good import {func1, func2} from ‘moduleA’;

9.2. 使用export代替modules.exports

// bad module.exports = Breadcrumbs; // good export default Beadcrumbs;

9.3. 如果模块只有一个输出值，就使用export default；如果有多个输出值，就不用使用export default； 9.4. 不要在模块输入中使用通配符，因为这样可以确保模块中有一个默认输出（export default）。

// bad import * as myObject ‘./importModule’; // good import myObject from ‘./importModule’;

10. Eslint规范
【ES6编程风格】ESLint是一个语法规则和代码风格的检查工具。可以保准写出的语法正确、风格统一。
vue-cli的脚手架已经集成eslint，并且安装了Airbnb语法风格，请用自己的编辑器配置根目录下的.eslintrc.js文件。如果遇到令人讨厌的规范，可以适当在此文件中配置个性化风格。
另外package.json里也有lint的命令用来检查代码规范。