关于javascript: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 标准

ESLint 是一个语法规定和代码格调的查看工具。能够保准写出的语法正确、格调对立。

vue-cli 的脚手架曾经集成 eslint，并且装置了 Airbnb 语法格调，请用本人的编辑器配置根目录下的.eslintrc.js 文件。如果遇到令人讨厌的标准，能够适当在此文件中配置个性化格调。

另外 package.json 里也有 lint 的命令用来查看代码标准。