摘要：為了避免這種情況，我推薦他同一樣需要一個(gè)回調(diào)函數(shù)參數(shù)，并且返回第一個(gè)能夠滿足回調(diào)函數(shù)參數(shù)的那一項(xiàng)。

趕緊閱讀讀此文，我保證，在過去的幾個(gè)月里我，我確定我在數(shù)組問題上犯過4次錯(cuò)誤。于是我寫下這篇文章，閱讀這篇文章可以讓你更準(zhǔn)確的使用javascript數(shù)組的一些方法

“如果你在數(shù)組中搜索某個(gè)元素，那么請(qǐng)使用Array.indexOf” ，我記得在學(xué)習(xí)javascript時(shí)看到過這個(gè)句子，毫無疑問，這句話很對(duì)。

MDN文檔上這樣描述 rray.indexOf“返回第一個(gè)被搜索到的元素的下標(biāo)（索引）” ，所以如果你想要搜索某個(gè)元素的下標(biāo)，那么Array.indexOf可以很好的解決。

但是，如果我們想查看一個(gè)數(shù)組中是否包涵某個(gè)元素該如何做呢。就像yes/no這樣的問題，也就是布爾值。這里我們推薦使用返回布爾值的Array.includes方法。

const persons = ["jay","leinov","jj","nico"];

console.log(persons.indexOf("leinov"));
// 1

console.log(persons.indexOf("beyond"));
// -1


 console.log(persons.includes("leinov"));
// true

console.log(persons.includes("beyond"));
// false

Array.filter是一個(gè)非常有用的方法，它通過一個(gè)數(shù)組的回調(diào)參數(shù)創(chuàng)建一個(gè)新的數(shù)組，正如他的名字所示，我們使用它過濾出一個(gè)更短的數(shù)組

但是 如果我們明確的知道回調(diào)函數(shù)返回的只是數(shù)組中的一項(xiàng)，這樣的話我不推薦使用他，例如，當(dāng)使用的回調(diào)參數(shù)過濾的是一個(gè)唯一的id，這種情況，Array.filter返回一個(gè)新的包涵這一項(xiàng)的數(shù)組。尋找一個(gè)特殊的id，我們目的只想取一項(xiàng)出來，這個(gè)返回的數(shù)組就是無用的。

接下來我們看下性能，為了返回能夠匹配回調(diào)函數(shù)的每一項(xiàng)，Array.filter必須檢索整個(gè)數(shù)組，此外讓我們想象下，我們有數(shù)百個(gè)項(xiàng)滿足我們的回調(diào)參數(shù)函數(shù)，我們過濾的數(shù)組就非常大了。

為了避免這種情況，我推薦Array.find ,他同Array.filter一樣需要一個(gè)回調(diào)函數(shù)參數(shù)，并且返回第一個(gè)能夠滿足回調(diào)函數(shù)參數(shù)的那一項(xiàng)。并且Array.find 在滿足篩選后停止篩選，不會(huì)檢索整個(gè)數(shù)組。

use strict";

const singers = [
  { id: 1, name: "周杰倫" },
  { id: 2, name: "李建" },
  { id: 3, name: "庾澄慶" },
  { id: 4, name: "謝霆鋒" },
  { id: 5, name: "周杰倫" },
];

function getSinger(name) {
  return signer => signer.name === name;
}

console.log(singers.filter(getSinger("周杰倫")));
// [
//   { id: 1, name: "周杰倫" },
//   { id: 5, name: "周杰倫" },
// ]

console.log(characters.find(getSinger("周杰倫")));
// { id: 1, name: "周杰倫" }

我承認(rèn)經(jīng)常在這上面犯錯(cuò)，然后，我的一個(gè)好朋友提醒我看下MDN文檔去尋找一個(gè)更好的方式解決，這點(diǎn)跟上面的Array.indexOf/Array.includes很相似

在前面提到 Array.find 需要一個(gè)回調(diào)函數(shù)作為參數(shù)來返回一個(gè)滿足的元素。如果我們需要知道數(shù)組是否包涵某個(gè)值時(shí)，Array.find是最好的方式嗎?；蛟S不是，因?yàn)榉祷氐氖且粋€(gè)值，不是一個(gè)布爾值。

在這種情況下，我推薦使用Array.some，它返回的是一個(gè)是否滿足回調(diào)參數(shù)的布爾值

"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.reduce并不太好理解，但是如果我們執(zhí)行Array.filter，Array.map感覺我們好像錯(cuò)過了什么。

我的意思是，我們檢索了數(shù)組兩次，第一次過濾和創(chuàng)建了一個(gè)短的數(shù)組，第二次創(chuàng)建了一個(gè)新的包涵我們過濾獲取到的數(shù)組。為了獲取結(jié)果我們使用了兩個(gè)數(shù)組方法，每個(gè)方法都有一個(gè)回調(diào)函數(shù)和一個(gè)數(shù)組，其中一個(gè)Array.filter創(chuàng)建的我們之后是用不到的。

為了避免這個(gè)性能的問題，我建議使用Array.reduce來代替。相同的結(jié)果，更好的代碼。Aaray.reduce允你篩選和添加滿足的項(xiàng)目到累加器中。例如，這個(gè)累加器可以是一個(gè)數(shù)字增量，一個(gè)要填充的對(duì)象，一個(gè)字符串或一個(gè)數(shù)組。

在我們之前的例子中，我們一直在使用Array.map，所以我建議使用Array.reduce來使用累加器來連接數(shù)組。在下面的示例中，根據(jù)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"] }
// ]

原文：Here’s how you can make better use of JavaScript arrays
如有哪里翻譯錯(cuò)誤請(qǐng)指正 3Q