<code id="ymukc"><xmp id="ymukc">

JavaScript中Array方法的正確打開方式

JavaScript   2018-09-11 09:25:50 發布
您的評價:
     
4.8
收藏     1收藏
文件夾
標簽
(多個標簽用逗號分隔)

在過去的幾個月,我發現我的拉取請求中存在四個完全相同的 JavaScript 錯誤。于是我寫了這篇文章,總結了如何在 JavaScript 中正確使用地使用 Array 的方法!

用 Array.includes 代替 Array.indexOf

“如果你要在數組中查找元素,請使用 Array.indexOf”。我記得在學習 JavaScript 的時候,在教材中讀到這樣的一句話。毫無疑問,這句話是真的!

MDN 文檔寫道,Array.indexOf 將“返回第一次出現給定元素的索引”。因此,如果我們稍后要在代碼中使用這個返回的索引,那么使用 Array.indexOf 找到索引就對了。

但是,如果我們只想知道數組是否包含某個值,該怎么辦?這似乎是一個是與否的問題,或者說是一個布爾值問題。對于這種情況,我建議使用返回布爾值的 Array.includes。

'use strict';  
const characters = [  
  'ironman',  
  'black_widow',  
  'hulk',  
  'captain_america',  
  'hulk',  
  'thor',  
];  
console.log(characters.indexOf('hulk'));  
// 2  
console.log(characters.indexOf('batman'));  
// -1  
console.log(characters.includes('hulk'));  
// true  
console.log(characters.includes('batman'));  
// false  
使用 Array.find 而不是 Array.filter 

Array.filter 是一個非常有用的方法。它接受一個回調函數作為參數,基于一個包含所有元素的數組創建出一個新的數組。正如它的名字一樣,我們使用這個方法來過濾元素,獲得更短的數組。

但是,如果回調函數只能返回一個元素,那么我就不推薦使用這個方法,例如使用回調函數來過濾唯一 ID。在這種情況下,Array.filter 將返回一個只包含一個元素的新數組。我們的意圖可能是通過查找特定的 ID 找到數組中包含的唯一值。

我們來看看這個方法的性能。要返回與回調函數匹配的所有元素,Array.filter 必須遍歷整個數組。此外,我們假設有數百個元素可以滿足回調參數,那么過濾后的數組會非常大。

為了避免這種情況,我建議使用 Array.find。它需要一個像 Array.filter 一樣的回調函數作為參數,并返回滿足回調函數的第一個元素的值。此外,只要找到第一個滿足回調函數的元素,Array.find 就會停止,無需遍歷整個數組。通過 Array.find 來查找元素,我們可以更好地理解我們的意圖。

'use strict';  
const characters = [  
  { id: 1, name: 'ironman' },  
  { id: 2, name: 'black_widow' },  
  { id: 3, name: 'captain_america' },  
  { id: 4, name: 'captain_america' },  
];  
function getCharacter(name) {  
  return character => character.name === name;  
}  
console.log(characters.filter(getCharacter('captain_america')));  
// [  
//   { id: 3, name: 'captain_america' },  
//   { id: 4, name: 'captain_america' },  
// ]  
console.log(characters.find(getCharacter('captain_america')));  
// { id: 3, name: 'captain_america' } 

用 Array.some 代替 Array.find

我承認這個錯誤我犯了很多次。然后,一位善良的朋友告訴我,最好可以先參考 MDN 文檔。這與上面的 Array.indexOf/Array.includes 非常相似。

在前面的例子中,我們看到 Array.find 需要一個回調函數作為參數,并返回一個元素。如果我們想要知道數組是否包含某個值,Array.find 是最好的解決方案嗎?可能不是,因為它返回的是一個元素值,而不是一個布爾值。

對于這種情況,我建議使用 Array.some,它返回所需的布爾值。另外,從語義上看,Array.some 表示我們只想知道某個元素是否存在,而不需要得到這個元素。

'use strict';  
const characters = [  
  { id: 1, name: 'ironman', env: 'marvel' },  
  { id: 2, name: 'black_widow', env: 'marvel' },  
  { id: 3, name: 'wonder_woman', env: 'dc_comics' },  
];  
function hasCharacterFrom(env) {  
  return character => character.env === env;  
}  
console.log(characters.find(hasCharacterFrom('marvel')));  
// { id: 1, name: 'ironman', env: 'marvel' }  
console.log(characters.some(hasCharacterFrom('marvel')));  
// true 

使用 Array.reduce 而不是鏈接 Array.filter 和 Array.map

讓我們面對現實吧,Array.reduce 不容易理解。事實確實如此!但是,如果我們使用 Array.filter 和 Array.map 的組合,感覺缺少了什么,對吧?

我的意思是,我們遍歷了兩次數組。第一次過濾數組并創建一個較短的數組,第二次又基于 Array.filter 獲得數組創建一個包含新值的數組。為了獲得我們想要的新數組,我們使用了兩個 Array 方法。每個方法都有自己的回調函數和一個用不到的數組——由 Array.filter 創建的那個數組。

為了避免這種性能損耗,我的建議是使用 Array.reduce。結果是一樣的,代碼卻更簡單! 我們可以使用 Array.reduce 進行過濾,并將目標元素添加到累加器中。累加器可以是遞增的數字、要填充的對象、要連接的字符串或數組。

在我們的例子中,因為之前使用了 Array.map,所以我建議使用 Array.reduce 將滿足條件的數組元素加入到累加器中。在下面的示例中,根據 env 值的具體情況,我們將它添加到累加器中或保持累加器不變。

'use strict';  
const characters = [  
  { name: 'ironman', env: 'marvel' },  
  { name: 'black_widow', env: 'marvel' },  
  { name: 'wonder_woman', env: 'dc_comics' },  
];  
console.log(  
  characters  
    .filter(character => character.env === 'marvel')  
    .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))  
);  
// [  
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },  
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }  
// ]  
console.log(  
  characters  
    .reduce((acc, character) => {  
      return character.env === 'marvel'  
        ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))  
        : acc;  
    }, [])  
)  
// [  
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },  
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }  // ] 

【責任編輯:龐桂玉 TEL:(010)68476606】

 

來自:http://developer.51cto.com/art/201809/583079.htm

 

六合特码资料
<code id="ymukc"><xmp id="ymukc">
<code id="ymukc"><xmp id="ymukc">

擴展閱讀

解開面條代碼: 怎樣書寫可維護JavaScript
【譯】尋找頭緒:編寫可維護的 JavaScript
【譯】尋找頭緒:編寫可維護的 JavaScript
iOS應用性能調優的25個建議和技巧
iOS應用性能調優的25個建議和技巧

為您推薦

OpenGL入門學習
Accumulo入門手冊
使用 HTTP 上傳 G 級的文件之 Node.js 版本
44個 Javascript 變態題解析 (上下)
一個基于 Koa2 構建的類似于 Rails 的 nodejs 開源項目

更多

JavaScript
JavaScript開發
相關文檔  — 更多
相關經驗  — 更多
相關討論  — 更多