Airbnb Javascript 代码规范重要点总结es6

中文原地址

1.对所有的引用使用 const 而非 var。这能确保你无法对引用重复赋值。

当需要变动引用时，使用let。

　const和let都是块级作用域。

2.创建对象的方式：

　　const item = {}；

　　使用对象属性的简写，且为简写的属性分组。

3.创建数组的方式：

　　const arr = [ ];

　　使用arr.push()去替代直接赋值。

　　使用拓展运算符去赋值数组： arrCopy = [...arr];

　　使用Array.from()把一个类数组对象转换成数组：

　　　　const foo = document.querySelectorAll('.foo');

　　　　const nodes = Aarry.from(foo);

4.解构：

　　使用解构存取和使用多属性对象：

function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

　　对数组也使用解构赋值：

const arr = [1, 2, 3, 4];
const [first, second] = arr; // 等同于first = arr[0],second = arr[1]

　　返回多个值时使用对象解构：这样不用在意属性的顺序

function returnInput (input) {
    ...
    return { left, right, top, bottom };
}
const { left, right } = processInput(input);

5.Strings

　　程序化生成字符串时，使用模板字符串代替字符串链接

function sayHi(name) {
    return `How are you, ${name}?`;
}

6.函数

　　使用函数声明代替函数表达式

function foo() {
}

　　立即调用的函数表达式：

(()=> {
    console.log('Welcome to the Internet. Please follow me.');
})();

　　永远不要在非函数代码块（if,while）中声明一个函数，把那个函数赋给一个变量。

let test;
if (current) {
    test = () => {
        ...
    };
}

　　不要使用arguments，可以选择rest语法...替代。rest是一个真正的数组，且能明确你要传入的参数

function cont(...args) {
    return args.join('');
}

　　直接给函数的参数指定默认值，不要使用一个变化的函数参数

function fn(opts = {}) {...}

7.构造器

　　总是使用class,避免直接操作prototype。

　　使用extends继承。

　　方法可以返回this来帮助链式调用。

8.模块

　　总是使用模组（import/export）而非其他非标模块系统。

import { es6 } from './AirbnbStyleGuide';
export default es6; 

　　不要使用通配符import以确保只有一个默认export

　　不要从import中直接export

9.迭代器

　　使用高阶函数如map()/reduce()去替代for-of

const number = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
...

10.属性

　　使用 . 访问对象的属性。

　　当通过变量访问属性时使用中括号[]　　

11.变量

　　一直使用const来声明变量以防止全局污染，且用const为每一个变量声明。

　　将所有的const和let分组。

12.提升

　　使用let和const不会被提升，所以必须声明在前面。

　　匿名函数的表达式的变量名会被提升但是函数内容不会

　　命名的函数表达式的变量名会被提升，但是函数名和函数内容不会

　　函数声明的名称和哈你数体都会被提升。

　　以上和js的解析机制有关。

13.

　　优先使用 === 和 !==　 而非 == / !=

　　条件表达式中：

　　　　对象被计算为true

　　　　undefined / null 都为false

　　　　数字除  +0 / -0 / NaN 外 都为true

　　　　字符串除‘ ’外都为true

14.代码块

　　使用大括号包裹所有的多行代码块，单行不必。

15.注释

　　使用/**...*/作为多行注释

　　使用//作为单行注释，在评论对象上另起一行，且在注释前插入空行

　　使用 // FIXME 标注问题

　　使用 // TODO 标注问题的解决方式

16.空格

　　在块末和新语句前插入空行

17.类型转换

　　字符串：不要使用 + ‘ ’

//  => this.reviewScore = 9;
const totalScore = String(this.reviewScore);

　　数字：使用parseInt,并带上转换类型的基数

const inputValue = '4';
const val = Number(inputValue); 

// 或者
const val = parseInt(inputValue, 10);

　　布尔：

const age = 0;
const hasAge = Boolean(age);

// 或者
const hasAge = !!age;

18.命名规则

　　使用帕斯卡式命名构造函数或类

　　不要使用下划线结尾或开头来命名属性和方法

　　不要保存this的引用。使用箭头函数或Function#bind

　　如果文件只输出一个类，那你的文件名必须和类名完全保持一致（帕斯卡式）

　　如果文件导出默认的函数，文件名与该函数名一致。（驼峰式）

19.存取器

　　属性的存取函数不是必须的

　　使用getValue()和setValue('...')

　　如果属性是布尔值，使用isVal() 或 hasVal()