javascript
1.0.0
一個最合理的 JavaScript 方法
注意：本指南假設您使用 Babel，並要求您使用 babel-preset-airbnb 或同等產品。它還假設您正在應用程式中安裝 shims/polyfills，使用 airbnb-browser-shims 或類似工具。
本指南也有其他語言版本。查看翻譯
其他風格指南
1.1基元：當您存取基元類型時，您直接處理它的值。
stringnumberbooleannullundefinedsymbolbigint const foo = 1 ;
let bar = foo ;
bar = 9 ;
console . log ( foo , bar ) ; // => 1, 91.2複雜：當您存取複雜類型時，您將處理對其值的參考。
objectarrayfunction 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
為什麼？這確保您無法重新分配引用，這可能會導致錯誤和難以理解的程式碼。
// 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 and let only exist in the blocks they are defined in.
{
let a = 1 ;
const b = 1 ;
var c = 1 ;
}
console . log ( a ) ; // ReferenceError
console . log ( b ) ; // ReferenceError
console . log ( c ) ; // Prints 1在上面的程式碼中，您可以看到引用a和b會產生 ReferenceError，而c包含數字。這是因為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
為什麼？這些方法可能會受到相關物件的屬性的影響 - 考慮
{ hasOwnProperty: false }- 或者，該物件可能是空物件 (Object.create(null))。在支援 ES2022 或使用諸如 https://npmjs.com/object.hasown 之類的 polyfill 的現代瀏覽器中，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 ; // cache the lookup once, in module scope.
console . log ( has . call ( object , key ) ) ;
// best
console . log ( Object . hasOwn ( object , key ) ) ; // only supported in browsers that support 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 。使用物件剩餘參數語法來取得省略某些屬性的新物件。 eslint： prefer-object-spread
// 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 }⬆ 回到頂部
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 ] ; 4.4 若要將可迭代物件轉換為數組，請使用 spread ...而不是Array.from
const foo = document . querySelectorAll ( '.foo' ) ;
// good
const nodes = Array . from ( foo ) ;
// best
const nodes = [ ... foo ] ; 4.5 使用Array.from將類似陣列的物件轉換為陣列。
const arrLike = { 0 : 'foo' , 1 : 'bar' , 2 : 'baz' , length : 3 } ;
// bad
const arr = Array . prototype . slice . call ( arrLike ) ;
// good
const arr = Array . from ( arrLike ) ; 4.6 使用Array.from而不是 spread ...來映射可迭代對象，因為它可以避免建立中間數組。
// bad
const baz = [ ... foo ] . map ( bar ) ;
// good
const baz = Array . from ( foo , bar ) ; 4.7 在陣列方法回呼中使用 return 語句。如果函數體由傳回一個沒有副作用的表達式的單一語句組成，則可以省略 return，如下 8.2 所示。 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 `acc` becomes undefined after the first iteration
[ [ 0 , 1 ] , [ 2 , 3 ] , [ 4 , 5 ] ] . reduce ( ( acc , item , index ) => {
const flatten = acc . concat ( item ) ;
} ) ;
// good
[ [ 0 , 1 ] , [ 2 , 3 ] , [ 4 , 5 ] ] . reduce ( ( acc , item , index ) => {
const flatten = acc . concat ( item ) ;
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 ;
} ) ;4.8 如果陣列有多行，則在左數組括號之後和右數組括號之前使用換行符
// 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 ,
] ;⬆ 回到頂部
5.1 存取和使用物件的多個屬性時使用物件解構。 eslint： prefer-destructuring
為什麼？解構使您無需為這些屬性建立臨時引用，也無需重複存取該物件。重複物件存取會產生更多重複程式碼，需要更多閱讀，並產生更多出錯機會。解構物件也提供了區塊中使用的物件結構的單一定義，而不需要讀取整個區塊來確定使用的內容。
// 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 } ` ;
} 5.2 使用數組解構。 eslint： prefer-destructuring
const arr = [ 1 , 2 , 3 , 4 ] ;
// bad
const first = arr [ 0 ] ;
const second = arr [ 1 ] ;
// good
const [ first , second ] = arr ;5.3 對多個回傳值使用物件解構，而非陣列解構。
為什麼？您可以隨著時間的推移添加新屬性或更改事物的順序，而不會破壞呼叫網站。
// bad
function processInput ( input ) {
// then a miracle occurs
return [ left , right , top , bottom ] ;
}
// the caller needs to think about the order of return data
const [ left , __ , top ] = processInput ( input ) ;
// good
function processInput ( input ) {
// then a miracle occurs
return { left , right , top , bottom } ;
}
// the caller selects only the data they need
const { left , top } = processInput ( input ) ;⬆ 回到頂部
6.1 對字串使用單引號'' 。 eslint： quotes
// bad
const name = "Capt. Janeway" ;
// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway` ;
// good
const name = 'Capt. Janeway' ;6.2 導致行超過 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.' ; 6.3 以程式設計方式建構字串時，使用模板字串而不是串聯。 eslint： prefer-template template-curly-spacing
為什麼？模板字串為您提供可讀、簡潔的語法，並具有適當的換行符和字串插值功能。
// 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 6.5 不要對字串中不必要的字元進行轉義。 eslint： no-useless-escape
為什麼？反斜線
