Airbnb JavaScript 风格指南() {

使用 JavaScript 最合理的方式。

注意: 这个指南假定你正在使用 Babel，并且需要你使用 babel-preset-airbnb 或与其等效的预设。同时假定你在你的应用里安装了带有 airbnb-browser-shims 或与其等效的插件的 shims/polyfills。

![Gitter](https://badges.gitter.im/Join Chat.svg)

这个指南支持的其他语言翻译版请看 Translation。

其他风格指南：

类型

1.1 基本类型: 你可以直接获取到基本类型的值
- string
- number
- boolean
- null
- undefined
- symbol
- bigint
```
const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
```
- 由于 Symbols 和 BigInts 不能被正确的 polyfill。所以不应在不能原生支持这些类型的环境或浏览器中使用他们。

1.2 复杂类型: 复杂类型赋值是获取到他的引用的值。

object
array
function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

⬆ 回到顶部

引用

2.1 所有的赋值都用 const，避免使用 var。eslint: prefer-const, no-const-assign

为什么？因为这个能确保你不会改变你的初始值，重复引用会导致 bug 并且使代码变得难以理解。
```
// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;
```

2.2 如果你一定要对参数重新赋值，使用 let，而不是 var。eslint: no-var

为什么？因为 let 是块级作用域，而 var 是函数级作用域。
```
// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}
```

2.3 注意：let 和 const 都是块级作用域，而 var 是函数级作用域

// const 和 let 都只存在于它被定义的那个块级作用域。
{
  let a = 1;
  const b = 1;
  var c = 1;
}
console.log(a); // 引用错误
console.log(b); // 引用错误
console.log(c); // 打印 1

上面的代码里，a 和 b 的定义会报引用错误，这是因为 a 和 b 是块级作用域，而 c 的作用域是在函数里的。

⬆ 返回顶部

对象

3.1 使用字面值创建对象。eslint: no-new-object

// bad
const item = new Object();

// good
const item = {};

3.2 使用计算属性名创建一个带有动态属性名的对象。

为什么？因为这可以使你在同一个地方定义所有对象属性。


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,
};

3.3 用对象方法简写。eslint: object-shorthand

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  // 对象的方法
  addValue(value) {
    return atom.value + value;
  },
};

3.4 用属性值缩写。eslint: object-shorthand

为什么？这样写更简洁，且可读性更高。

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

3.5 将你的所有缩写放在对象声明的前面。

为什么？因为这样能更方便地知道有哪些属性用了缩写。

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

3.6 只对那些无效的标示使用引号 ''。eslint: quote-props

为什么？通常我们认为这种方式主观上更易读。不仅优化了代码高亮，而且也更容易被许多 JS 引擎优化。
```
// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};
```

3.7 不要直接调用 Object.prototype上的方法，如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf。eslint: [no-prototype-builtins](htt ps://eslint.org/docs/rules/no-prototype-builtins)

为什么？在一些有问题的对象上，这些方法可能会被屏蔽掉，如：{ hasOwnProperty: false } 或空对象 Object.create(null)。在支持 ES2022 的现代浏览器中，或者被做过类似 https://npmjs.com/object.hasown 的兼容情况下， Object.hasOwn 也会被用作 Object.prototype.hasOwnProperty.call 的替代品。

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// better
const has = Object.prototype.hasOwnProperty; // 在模块作用域内做一次缓存。
console.log(has.call(object, key));

// best
console.log(Object.hasOwn(object, key)); // 只能在支持 ES2022 的浏览器中使用

/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));
/* or */
console.log(Object.hasOwn(object, key)); // https://www.npmjs.com/package/object.hasown

3.8 对象浅拷贝时，更推荐使用扩展运算符（即 ... 运算符），而不是 Object.assign。获取对象指定的几个属性时，用对象的 rest 解构运算符（即 ... 运算符）更好。eslint: prefer-object-spread
- 这一段不太好翻译出来，大家看下面的例子就懂了。^.^

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 改了 `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good es6 扩展运算符 ...
const original = { a: 1, b: 2 };
// 浅拷贝
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

// rest 解构运算符
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

⬆ 返回顶部

数组

4.1 用字面量创建数组。eslint: no-array-constructor

// bad
const items = new Array();

// good
const items = [];

4.2 用 Array#push 代替直接向数组中添加一个值。

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

4.3 用扩展运算符做数组浅拷贝，类似上面的对象浅拷贝。

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

javascript

Airbnb JavaScript 风格指南() {

目录

类型

引用

对象

数组