JAVAScript 提供了大量不同的處理數組的方法，這里花幾分鐘時間介紹 8 個項目中可以用到的數組方法。

1. Array.map()

使用.map() 方法，可以創建一個基于原始數組的修訂版數組。.map() 方法接受一個函數，該函數遍歷數組中的所有項并進行相應的修改。

當需要更新數組中的所有項并將其存儲到一個新數組中時，.map() 方法就可以派上用場了。

例如有一個文章列表的數組，如下：

const articles = [
    {
        article_id: "6976209276364652558",
        title: "如何在 Vue 的計算屬性中傳遞參數",
        views: 1258,
    },
    {
        article_id: "6976113133358153736",
        title: "Angular數據狀態管理框架：NgRx/Store",
        views: 2258,
    },
    {
        article_id: "6975722363241365534",
        title: "Angular管道PIPE介紹",
        views: 1568,
    },
];

現在基于上面文章列表數組，獲取所有 title 組成的數組，如下：

const arrayTitles = articles.map((item) => item.title);
console.log(arrayTitles);

輸出的結果如下：

[
  '如何在 Vue 的計算屬性中傳遞參數',
  'Angular數據狀態管理框架：NgRx/Store',
  'Angular管道PIPE介紹'
]

當然，只要是數組都可以使用 .map() ，接下來就基于上面標題數組，增加作者信息，如下：

const arrayTitlesWithAuthor = arrayTitles.map(
    (title) => `《${title}》作者：天行無忌`
);
console.log(arrayTitlesWithAuthor);

輸出結果如下：

[
  '《如何在 Vue 的計算屬性中傳遞參數》作者：天行無忌',
  '《Angular數據狀態管理框架：NgRx/Store》作者：天行無忌',
  '《Angular管道PIPE介紹》作者：天行無忌'
]

.map() 方法是一個用來創建新數組、修改其內容并保持原始數組不變的通用方法。當出現需要修改現有數組的內容并將結果存儲為新變量的時候就可以用。

2. Array.filter()

從方法名稱可以很容易知道其用途，沒錯用于過濾數組元素。

filter()方法根據特定條件獲取數組中的元素，像 .map() 方法一樣，它將返回一個新數組，并保持原始數組不變。

基于上面的 articles 數組，分別獲取 views 小于 2000 的和大于 2000 的文章列表：

const lessArticles = articles.filter((item) => item.views < 2000);
const muchArticles = articles.filter((item) => item.views > 2000);
console.log(lessArticles);
console.log("rn==========================================rn");
console.log(muchArticles);

輸出的結果如下：

[
  {
    article_id: '6976209276364652558',
    title: '如何在 Vue 的計算屬性中傳遞參數',
    views: 1258
  },
  {
    article_id: '6975722363241365534',
    title: 'Angular管道PIPE介紹',
    views: 1568
  }
]

==========================================

[
  {
    article_id: '6976113133358153736',
    title: 'Angular數據狀態管理框架：NgRx/Store',
    views: 2258
  }
]

當需要從數組中刪除不符合特定條件的元素時，可以使用 .filter() 。

3. Array.find()

.find() 方法看起來很像前面介紹的.filter()方法。跟 .filter()方法一樣，將匹配的條件的元素返回，區別在于，.find() 將只返回與提供的條件匹配的第一個元素，不是數組。

將上面的 .filter() 方法改為 .find()，如下：

const lessArticle = articles.find((item) => item.views < 2000);
const muchArticle = articles.find((item) => item.views > 2000);
console.log(lessArticle);
console.log("rn==========================================rn");
console.log(muchArticle);

輸出結果如下：

{
  article_id: '6976209276364652558',
  title: '如何在 Vue 的計算屬性中傳遞參數',
  views: 1258
}

==========================================

{
  article_id: '6976113133358153736',
  title: 'Angular數據狀態管理框架：NgRx/Store',
  views: 2258
}

**什么時候使用 Array.find() ？**當需要獲取數組通過定義條件的第一個元素時。

4. Array.findIndex()

.findIndex() 方法在名稱上跟 .find() 前半部分一樣，其實現的功能和.find() 一樣，其區別在于返回值不一樣，只返回與提供的條件匹配的第一個元素的索引值。

const lessArticle = articles.findIndex((item) => item.views < 2000);
const muchArticle = articles.findIndex((item) => item.views > 2000);
console.log(lessArticle); // 0
console.log(muchArticle); // 1

**什么時候使用 Array.findIndex() ？**當需要獲取數組通過定義條件的第一個元素所在數組中的索引值時。

5. Array.forEach()

.forEach() 方法的工作方式很像常規的 for 循環，遍歷一個數組并在每個元素上執行一個函數。.forEach() 的第一個參數是回調函數，它包含循環數組的當前值和索引。

如下：

articles.forEach((item, index) => {
    console.log(`文章索引 ${index} 的標題為《${item.title}》`);
});

輸出結果如下：

文章索引 0 的標題為《如何在 Vue 的計算屬性中傳遞參數》
文章索引 1 的標題為《Angular數據狀態管理框架：NgRx/Store》
文章索引 2 的標題為《Angular管道PIPE介紹》

當需要簡單地循環遍歷數組的每個元素而不需要構建新數組時。

6. for...of

for...of 是es6推出的迭代器，號稱最簡潔，可以是用 break，continue和 return 終止循環。跟 .forEach() 不同的是，不提供數組索引。跟 for 語句相比代碼少得多，更簡潔。

下面代碼遍歷輸出數組，如下：

for (const item of articles) {
    console.log(item);
}

7. for...in

這個方法跟上面的for...of 語法上看起來相似，for...of 是對值的遍歷，for...in 是對 key/index 的遍歷。for...in 應用于數組則 key 對應的就是數組的索引值，應用于對象則 key 對應鍵值。

來看代碼執行效果，先應用于數組，如下：

for (const key in articles) {
    console.log(key);
}

上面代碼輸出的是數組的索引值：0、1、2，下面應用于數組第一個對象，如下：

for (const key in articles[0]) {
    console.log(key);
}

輸出的就是：article_id、title、views。

在實際開發中不提倡使用 for...in，如果需要遍歷對象屬性，推薦使用Object.keys 。

8. Array.every()

.every()方法將檢查數組中的每個元素是否都通過提供的條件，如果數組中的所有元素都通過條件，則將返回 true ，如果沒有，將返回 false。

例如，檢查 articles 數組所有的文章 views 都超過 1000，如下：

const isMoreThan1000 = articles.every((item) => item.views > 1000);
console.log(isMoreThan1000);  // true

檢查 articles 數組所有的文章 views 都超過 2000，如下：

const isMoreThan2000 = articles.every((item) => item.views > 2000);
console.log(isMoreThan2000); // false

**什么時候使用 Array.every() ？**當需要確認數組的每一項都通過定義的條件時。

9. Array.some()

.some() 方法和 .every() 方法類似，但驗證的結果是相反的，如果數組中的所有元素只要有一個通過條件，則將返回 true ，如果所有的元素都不通過條件，將返回 false。

.some() 方法和 .every() 方法在文章《7 個你應該掌握的 JavaScript 編碼技巧》中介紹了如何實現邏輯 and 和 or 。

例如，檢查 articles 數組所有的文章 views 是否有 views 超過 2000 的文章，如下：

const isMore2000 = articles.some((item) => item.views > 2000);
console.log(isMore2000); // true

檢查 articles 數組所有的文章是否有 views 超過 3000 的文章，如下：

const isMore3000 = articles.some((item) => item.views > 3000);
console.log(isMore3000);  // false

10. Array.reduce()

前面專門為此方法分享過一篇文章《javascript數組之includes、reduce》。

.reduce() 方法接受一個回調函數作為其第一個參數，一個可選的初始值作為其第二個參數。如果沒有提供初始值，則使用第一個數組元素作為值。回調函數提供一個累加器 accumulator 和 currentValue 參數，用于執行 reduce 計算。

這里就簡單舉個例子，對 articles 數組的 views 進行累加求和：

const sumViews = articles.reduce(
    (accumulator, current) => accumulator + current.views,
    0
);
console.log(sumViews); // 5084

使用 .reduce() 方法可以用于展平一個數組，當然已經有很多方法可以做到這一點，這就是其中的方法之一。

const flattened = [
    [0, 1],
    [2, 3],
    [4, 5],
].reduce((accumulator, current) => accumulator.concat(current), []);
console.log(flattened); // [ 0, 1, 2, 3, 4, 5 ]