當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Airbnb JavaScript 编码风格指南（2018年最新版）

發布時間：2025/7/14 javascript 70 豆豆

生活随笔收集整理的這篇文章主要介紹了 Airbnb JavaScript 编码风格指南（2018年最新版）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Airbnb JavaScript 編碼風格指南（2018年最新版）

訪問此原文地址：http://galaxyteam.pub/didi-fe...
另外歡迎訪問我們維護的https://www.threejs.online 中文站 (歡迎Star！)

本文譯者：滴滴出行上海前端（FE）團隊楊永樂同學

類型

基本類型：直接存取

string
number
boolean
null
undefined
symbol

const foo = 1; let bar = foo;bar = 9;console.log(foo, bar); // => 1, 9

symbol 類型不能完全polyfilled，所以請謹慎使用

復雜類型: 通過引用的方式存取

object
array
function

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

引用

使用const申明引用類型，避免使用var。eslint 設置：prefer-const,no-const-assign

為什么？這能確保你無法對引用重新賦值，也不會導致出現 bug 或難以理解。 // bad var a = 1; var b = 2;// good const a = 1; const b = 2;

如果必須對引用類型重新賦值，使用let而非var。eslint設置：no-var jscs: disallowVar

為什么？相比于var函數作用域，let塊級作用域更容易理解 // bad var count = 1; if (true) {count += 1; }// good, use the let. let count = 1; if (true) {count += 1; }

注意let和const都是塊級作用域

// const and let only exist in the blocks they are defined in. {let a = 1;const b = 1; } console.log(a); // ReferenceError console.log(b); // ReferenceError

對象

使用字面值創建對象。eslint: no-new-object

// bad const item = new Object();// good const item = {};

創建對象的動態屬性時，使用計算屬性

為什么？這樣可以在一個地方定義對象所有的屬性 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,

[getKey('enabled')]: true, }; ```

使用對象方法的簡寫形式。 eslint: object-shorthand jscs: requireEnhancedObjectLiterals

為什么？方法定義簡潔清晰 // bad const atom = {value: 1,addValue: function (value) {return atom.value + value;}, };// good const atom = {value: 1,addValue(value) {return atom.value + value;}, };

使用屬性值簡寫形式。eslint: object-shorthand jscs: [requireEnhancedObjectLiterals]

為什么？書寫更加簡潔，更有描述性。 const lukeSkywalker = 'Luke Skywalker';// bad const obj = {lukeSkywalker: lukeSkywalker, };// good const obj = {lukeSkywalker, };

對象聲明時分類簡寫和非簡寫的屬性名。

為什么？更清晰的了解哪些屬性是簡寫的。 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, };

只有對那些不合法的屬性名標識符添加引號。eslint: quote-props jscs: disallowQuotedKeysInObjects

為什么？對象屬性更直觀，可讀性強。能夠代碼高亮顯示，同時對于大多數的js引擎更容易優化代碼。 // bad const bad = {'foo': 3,'bar': 4,'data-blah': 5, };// good const good = {foo: 3,bar: 4,'data-blah': 5, };

不要直接使用Object.prototype上的方法，例如hasOwnProperty, propertyIsEnumerable, 和 isPrototypeOf。

為什么？這些方法可能受對象的其他屬性影響。例如{ hasOwnProperty: false } 或者對象可能是null(Object.create(null)) // bad console.log(object.hasOwnProperty(key));const object = Object.create(null); obj.hasOwnProperty(key) // Uncaught TypeError: obj.hasOwnProperty is not a function// good console.log(Object.prototype.hasOwnProperty.call(object, key));// best const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. /* or */ import has from 'has'; // https://www.npmjs.com/package/has // ... console.log(has.call(object, key));

淺拷貝對象時推薦使用對象展開操作（object spread operator）而不是Object.assign。使用對象剩余操作符（object rest operator）獲取對象中剩余的屬性。

為什么？Object.assign使用不當會修改原對象 // very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // this mutates `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 const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

數組

使用字面量聲明數組。eslint: no-array-constructor

// bad const items = new Array();// good const items = [];

向數組添加元素時，使用Arrary#push替代直接賦值。

const someStack = [];// bad someStack[someStack.length] = 'abracadabra';// good someStack.push('abracadabra');

使用數組展開操作符...拷貝數組

// bad const len = items.length; const itemsCopy = []; let i;for (i = 0; i < len; i += 1) {itemsCopy[i] = items[i]; }// good const itemsCopy = [...items];

將類數組對象（array-like）轉換成數組時，使用...而不是Array.from

const foo = document.querySelectorAll('.foo');// good const nodes = Array.from(foo);// best const nodes = [...foo];

當需要對可遍歷對象進行map操作時，使用Array.from而不是展開操作符...,避免新建一個臨時數組。

// bad const baz = [...foo].map(bar);// good const baz = Array.from(foo, bar);

數組方法回調需要有返回值。如果函數體比較簡單，可以直接用表達式，省略return語句。 eslint: array-callback-return

// good [1, 2, 3].map((x) => {const y = x + 1;return x * y; });// good [1, 2, 3].map(x => x + 1);// bad - no returned value means `memo` becomes undefined after the first iteration [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {const flatten = memo.concat(item);memo[index] = flatten; });// good [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {const flatten = memo.concat(item);memo[index] = flatten;return flatten; });// bad inbox.filter((msg) => {const { subject, author } = msg;if (subject === 'Mockingbird') {return author === 'Harper Lee';} else {return false;} });// good inbox.filter((msg) => {const { subject, author } = msg;if (subject === 'Mockingbird') {return author === 'Harper Lee';}return false; });

如果數組有多行，請在打開和關閉數組括號之前使用換行符

為什么？更具有可讀性 // bad const arr = [[0, 1], [2, 3], [4, 5], ];const objectInArray = [{id: 1, }, {id: 2, }];const numberInArray = [1, 2, ];// good const arr = [[0, 1], [2, 3], [4, 5]];const objectInArray = [{id: 1,},{id: 2,}, ];const numberInArray = [1,2, ];

解構

訪問和使用對象的多個屬性時用對象解構操作。eslint: prefer-destructuring jscs: requireObjectDestructuring

為什么？解構可以避免為這些屬性創建臨時引用。 // bad function getFullName(user) {const firstName = user.firstName;const lastName = user.lastName;return `${firstName} ${lastName}`; }// good function getFullName(user) {const { firstName, lastName } = user;return `${firstName} ${lastName}`; }// best function getFullName({ firstName, lastName }) {return `${firstName} ${lastName}`; }

使用數組解構。eslint: prefer-destructuring jscs: requireArrayDestructuring

const arr = [1, 2, 3, 4];// bad const first = arr[0]; const second = arr[1];// good const [first, second] = arr;

使用對象解構來實現多個返回值，而不是數組解構。jscs: disallowArrayDestructuringReturn

為什么？你可以隨時為返回值新增屬性而不用關心屬性的順序。 // bad function processInput(input) {// then a miracle occursreturn [left, right, top, bottom]; }// 調用者需要注意返回值中對象的順序 const [left, __, top] = processInput(input);// good function processInput(input) {// then a miracle occursreturn { left, right, top, bottom }; }// 調用者只需要使用它需要的對象 const { left, top } = processInput(input);

字符串

字符串使用單引號。eslint: quotes jscs: validateQuoteMarks

// bad const name = "Capt. Janeway";// bad - 當需要插值或者換行時才使用模板文字 const name = `Capt. Janeway`;// good const name = 'Capt. Janeway';

不超過100個字符的字符串不應該使用連接符或者換行書寫。

為什么？換行的字符串不好閱讀，并且不方便搜索代碼。 // bad const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.';// bad const errorMessage = 'This is a super long error that was thrown because ' +'of Batman. When you stop to think about how Batman had anything to do ' +'with this, you would get nowhere fast.';// good const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

以編程方式構建字符串時，使用模板字符串而不是連接符。eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings

為什么？模板字符串更為簡潔，更具可讀性。 // bad function sayHi(name) {return 'How are you, ' + name + '?'; }// bad function sayHi(name) {return ['How are you, ', name, '?'].join(); }// bad function sayHi(name) {return `How are you, ${ name }?`; }// good function sayHi(name) {return `How are you, ${name}?`; }

永遠不要在字符串上使用eval()方法，它有太多的問題。eslint: no-eval

不要過多的轉義字符串。eslint: no-useless-escape

為什么？反斜杠影響代碼可讀性，只有在必要的時候才使用。 // bad const foo = '\'this\' \i\s \"quoted\"';// good const foo = '\'this\' is "quoted"'; const foo = `my name is '${name}'`;

函數

使用命名函數表達式而不是函數聲明。eslint: func-style jscs: disallowFunctionDeclarations

為什么？函數聲明會被提前。這意味著很可能在函數定義前引用該函數，但是不會報錯。這不利于代碼的可讀性和可維護性。如果你發現一個函數定義的很大很復雜，以至于妨礙了了解文件中的其他內容，那么是時候把這個函數提取到自己的模塊中去了！不要忘記顯示指定表達式的名稱，盡管它能從變量名中被推斷出來（現代瀏覽器或者編譯器（如Babel）支持）。這能讓錯誤的調用棧更清晰。(討論) // bad function foo() {// ... }// bad const foo = function () {// ... };// good // 函數名和變量引用名不同 const short = function longUniqueMoreDescriptiveLexicalFoo() {// ... }; // Is it worse const sum = function(a, b) {return a + b; };// than this? const my_sum = function sum(a, b) {return a + b; }; 第一個函數沒有.name屬性，在debugging過程中，它會是一個匿名函數。第二個函數有名字為sum，你可以檢索到它，調試過程中能夠快速定位。

使用banel 和babel-preset-env配置，const foo = () => {}會轉換成var foo = function foo () {}，并且從Node v6開始，const foo = () => {}中的foo 也有.name。所以它不再是匿名函數。（函數名字推斷）

用圓括號包裹立即執行函數表達式（IIFE）。eslint: wrap-iife jscs: requireParenthesesAroundIIFE

為什么？立即執行函數表達式是單一執行單元-使用圓括號包裹調用，簡潔明了的表示了這一點。請注意，在通用的模塊中，你幾乎用不到IIFE。 // immediately-invoked function expression (IIFE) (function () {console.log('Welcome to the Internet. Please follow me.'); }());

永遠不要在一個非函數代碼塊（if、while 等）中聲明一個函數，把那個函數賦給一個變量。瀏覽器允許你這么做，但它們的解析表現不一致。eslint: no-loop-func

注意：ECMA-262把block定義為一組語句。但是函數聲明不是語句。

// bad if (currentUser) {function test() {console.log('Nope.');} }// good let test; if (currentUser) {test = () => {console.log('Yup.');}; }

永遠不要把參數命名為arguments。這將取代原來函數作用域內的 arguments對象。

// bad function foo(name, options, arguments) {// ... }// good function foo(name, options, args) {// ... }

不要使用arguments。可以選擇 rest 語法 ... 替代。

為什么？使用 ... 能明確你要傳入的參數。另外 rest 參數是一個真正的數組，而 arguments 是一個類數組。 // bad function concatenateAll() {const args = Array.prototype.slice.call(arguments);return args.join(''); }// good function concatenateAll(...args) {return args.join(''); }

使用函數默認參數指定默認值，而不是用一個可變的函數參數

// really bad function handleThings(opts) {// 不！我們不應該改變函數參數// 更糟糕的是: 如果 opts 是 falsy (為''或者是false), 它仍然會被賦值為對象，但是這可能會引發bugopts = opts || {};// ... }// still bad function handleThings(opts) {if (opts === void 0) {opts = {};}// ... }// good function handleThings(opts = {}) {// ... }

8.使用函數參數默認值的時避免副作用。

> 為什么？這樣的寫法會讓人困惑。```javascript var b = 1; // bad function count(a = b++) {console.log(a); } count(); // 1 count(); // 2 count(3); // 3 count(); // 3 ```

參數默認值放在函數參數列表的最后。

// bad function handleThings(opts = {}, name) {// ... }// good function handleThings(name, opts = {}) {// ... }

不要使用Function構造器創建函數。 eslint: no-new-func

為什么？通過這種方式創建的函數和使用eval()類似，會帶來不確定的問題 // bad var add = new Function('a', 'b', 'return a + b');// still bad var subtract = Function('a', 'b', 'return a - b');

函數名兩邊留白。eslint: space-before-function-paren [space-before-blocks]

為什么？保持代碼一致性，當你添加或者刪除名字時不需要額外增減空格。 // bad const f = function(){}; const g = function (){}; const h = function() {};// good const x = function () {}; const y = function a() {};

不要修改參數。 eslint: no-param-reassign

為什么？操作參數對象會在原始調用方中導致不可預知的變量副作用。 // bad function f1(obj) {obj.key = 1; }// good function f2(obj) {const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; }

不要給參數賦值。eslint: no-param-reassign

為什么？重新分配參數可能會導致意外的行為，特別是在訪問參數對象時。它也可能導致優化問題，特別是在V8中。 // bad function f1(a) {a = 1;// ... }function f2(a) {if (!a) { a = 1; }// ... }// good function f3(a) {const b = a || 1;// ... }function f4(a = 1) {// ... }

使用展開操作符...調用可變參數函數。eslint: prefer-spread

為什么？它更簡潔，你不需要提供上下文，并且組合使用new和apply不容易。 // bad const x = [1, 2, 3, 4, 5]; console.log.apply(console, x);// good const x = [1, 2, 3, 4, 5]; console.log(...x);// bad new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));// good new Date(...[2016, 8, 5]);

帶有多行函數簽名或調用的函數應該像本指南中的其他多行列表一樣縮進：每行中包含一項，最后一個項目帶有逗號。

// bad function foo(bar,baz,quux) {// ... }// good function foo(bar,baz,quux, ) {// ... }// bad console.log(foo,bar,baz);// good console.log(foo,bar,baz, );

箭頭函數

當你必須要使用匿名函數（如在傳遞內聯回調時），請使用箭頭函數。eslint: prefer-arrow-callback, arrow-spacing jscs: requireArrowFunctions

為什么?因為箭頭函數創造了新的一個 this 執行環境，通常情況下都能滿足你的需求，而且這樣的寫法更為簡潔。（參考 Arrow functions - JavaScript | MDN ）

為什么不？如果你有一個相當復雜的函數，你或許可以把邏輯部分轉移到一個函數聲明上。

// bad [1, 2, 3].map(function (x) {const y = x + 1;return x * y; });// good [1, 2, 3].map((x) => {const y = x + 1;return x * y; });

如果一個函數適合用一行寫出并且只有一個參數，那就把花括號、圓括號和 return 都省略掉。如果不是，那就不要省略。eslint: arrow-parens, arrow-body-style jscs: disallowParenthesesAroundArrowParam, requireShorthandArrowFunctions

為什么？這是一個很好用的語法糖。在鏈式調用中可讀性很高。 // bad [1, 2, 3].map(number => {const nextNumber = number + 1;`A string containing the ${nextNumber}.`; });// good [1, 2, 3].map(number => `A string containing the ${number}.`);// good [1, 2, 3].map((number) => {const nextNumber = number + 1;return `A string containing the ${nextNumber}.`; });// good

[index]: number, }));// No implicit return with side effects function foo(callback) {const val = callback();if (val === true) {// Do something if callback returns true} }let bool = false;// bad foo(() => bool = true);// good foo(() => {bool = true; }); ```

如果表達式過長需要多行表示，請將其包含在括號中，增加可讀性。

為什么？它能清除的標識函數的開始和結束位置。 // bad ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(httpMagicObjectWithAVeryLongName,httpMethod,) );// good ['get', 'post', 'put'].map(httpMethod => (Object.prototype.hasOwnProperty.call(httpMagicObjectWithAVeryLongName,httpMethod,) ));

如果函數只有一個參數并且函數體沒有使用花括號，那就省略括號。否則，為了保持清晰一致性，總在參數周圍加上括號。總是使用括號也是可以接受的，在這種情況下使用eslint的 “always” option 或者不要在jscs中引入 disallowParenthesesAroundArrowParam。eslint: arrow-parens jscs: disallowParenthesesAroundArrowParam

為什么？不那么混亂，可讀性強。 // bad [1, 2, 3].map((x) => x * x);// good [1, 2, 3].map(x => x * x);// good [1, 2, 3].map(number => (`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!` ));// bad [1, 2, 3].map(x => {const y = x + 1;return x * y; });// good [1, 2, 3].map((x) => {const y = x + 1;return x * y; });

避免箭頭函數語法（=>）和比較運算符（<=,=>）一起使用時帶來的困惑。

// bad const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;// bad const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;// good const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);// good const itemHeight = (item) => {const { height, largeSize, smallSize } = item;return height > 256 ? largeSize : smallSize; };

類 & 構造函數

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

為什么？class語法更簡潔更易于理解。 // bad function Queue(contents = []) {this.queue = [...contents]; } Queue.prototype.pop = function () {const value = this.queue[0];this.queue.splice(0, 1);return value; };// good class Queue {constructor(contents = []) {this.queue = [...contents];}pop() {const value = this.queue[0];this.queue.splice(0, 1);return value;} }

使用extends繼承。

為什么？因為 extends 是一個內建的原型繼承方法并且不會破壞 instanceof。 // bad const inherits = require('inherits'); function PeekableQueue(contents) {Queue.apply(this, contents); } inherits(PeekableQueue, Queue); PeekableQueue.prototype.peek = function () {return this.queue[0]; };// good class PeekableQueue extends Queue {peek() {return this.queue[0];} }

方法可以返回 this 來幫助鏈式調用。

// bad Jedi.prototype.jump = function () {this.jumping = true;return true; };Jedi.prototype.setHeight = function (height) {this.height = height; };const luke = new Jedi(); luke.jump(); // => true luke.setHeight(20); // => undefined// good class Jedi {jump() {this.jumping = true;return this;}setHeight(height) {this.height = height;return this;} }const luke = new Jedi();luke.jump().setHeight(20);

可以寫一個自定義的 toString() 方法，但要確保它能正常運行并且不會引起副作用。

class Jedi {constructor(options = {}) {this.name = options.name || 'no name';}getName() {return this.name;}toString() {return `Jedi - ${this.getName()}`;} }

類有默認構造器。一個空的構造函數或者只是重載父類構造函數是不必要的。eslint: no-useless-constructor

// bad class Jedi {constructor() {}getName() {return this.name;} }// bad class Rey extends Jedi {constructor(...args) {super(...args);} }// good class Rey extends Jedi {constructor(...args) {super(...args);this.name = 'Rey';} }

避免重復的類成員。eslint: no-dupe-class-members

為什么？重復的類成員聲明中只有最后一個生效-重復的聲明肯定是一個錯誤。 // bad class Foo {bar() { return 1; }bar() { return 2; } }// good class Foo {bar() { return 1; } }// good class Foo {bar() { return 2; } }

模塊

總是使用模組 (import/export) 而不是其他非標準模塊系統。你可以編譯為你喜歡的模塊系統。

為什么？模塊是未來，讓我們開始邁向未來吧。 // bad const AirbnbStyleGuide = require('./AirbnbStyleGuide'); module.exports = AirbnbStyleGuide.es6;// ok import AirbnbStyleGuide from './AirbnbStyleGuide'; export default AirbnbStyleGuide.es6;// best import { es6 } from './AirbnbStyleGuide'; export default es6;

不要使用通配符 import

為什么？這樣確保只有一個默認的export // bad import * as AirbnbStyleGuide from './AirbnbStyleGuide';// good import AirbnbStyleGuide from './AirbnbStyleGuide';

不要直接從import中export

為什么？雖然一行代碼簡潔明了，但讓 import 和 export 各司其職讓事情能保持一致。 // bad // filename es6.js export { es6 as default } from './AirbnbStyleGuide';// good // filename es6.js import { es6 } from './AirbnbStyleGuide'; export default es6;

同一個路徑只使用一次import。eslint: no-duplicate-imports

為什么？相同路徑有多個import會導致代碼難以維護。 // bad import foo from 'foo'; // … some other imports … // import { named1, named2 } from 'foo';// good import foo, { named1, named2 } from 'foo';// good import foo, {named1,named2, } from 'foo';

不要export可變的綁定。 eslint: import/no-mutable-exports

為什么？避免不確定的可變量，特別是export可變的綁定。如果某些特殊情況需要使用這種場景，通常應該export常量引用。 // bad let foo = 3; export { foo };// good const foo = 3; export { foo };

模塊中只有單個export,最好使用default export 。 eslint: import/prefer-default-export

為什么？一個文件最好只做一件事，這樣更具備可讀性和可維護性。 // bad export function foo() {}// good export default function foo() {}

將所有的import語句放在文件的頂部。eslint: import/first

為什么？由于imports會被提升，最好保持它們在頂部以防出現不可預期的行為。 // bad import foo from 'foo'; foo.init();import bar from 'bar';// good import foo from 'foo'; import bar from 'bar';foo.init();

多行import應該和多行數組和對象一樣有縮進。

為什么？花括號需要遵循與指南中的每個其他花括號相同的縮進規則，末尾的逗號也一樣。 // bad import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';// good import {longNameA,longNameB,longNameC,longNameD,longNameE, } from 'path';

禁止在模塊導入語句中使用Webpack加載器語法。eslint: import/no-webpack-loader-syntax

為什么？在import中使用webpack 語法會將代碼耦合進bundler中。推薦在webpack.config.js中配置loader 規則。 // bad import fooSass from 'css!sass!foo.scss'; import barCss from 'style!css!bar.css';// good import fooSass from 'foo.scss'; import barCss from 'bar.css';

總結

以上是生活随笔為你收集整理的Airbnb JavaScript 编码风格指南（2018年最新版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Swift学习之map、flatMap、
下一篇： c语言程序设计第3周编程作业（数字特征）