首先做一個粗體聲明：循環經常是無用的，并且使得代碼很難閱讀。
當談到迭代一個數組的時候，無論你想去查找元素，排序或者任何其他的事，都有可能存在一個數組的方法供你使用。
然而，盡管它們有用，但其中一些仍然不被人了解。我會努力為你展示一些有用的方法。把這篇文章當做對 JavaScript 數組方法的指引吧。
注意： 在開始之前，不得不了解一件事：我比較偏愛函數式編程。所以我傾向于使用的方法不會直接改變原來的數組。這種方法，我避免了副作用。我不是說不應該改變數組，但至少要了解那些方法會改變，那些會有副作用。副作用導致不想要的改變，而不想要的改變帶來bugs！
了解到這里，我們可以開始正文了。
必不可少的
當跟數組打交道時，有四件事你應該清楚：map,filter,reduce 和 展開操作符。它們富有力量。
map
你可以在很多種情況下使用它。基本地，每次你需要修改數組的元素時，考慮使用 map。
它接受一個參數：一個方法，在每一個數組元素上調用。然后返回一個新的數組，所以沒有副作用。
const numbers = [1, 2, 3, 4]const numbersPlusOne = numbers.map(n => n + 1) // 每個元素 +1console.log(numbersPlusOne) // [2, 3, 4, 5]
你也能創建一個新數組，用于保留對象的一個特殊屬性：
const allActivities = [ { title: 'My activity', coordinates: [50.123, 3.291] }, { title: 'Another activity', coordinates: [1.238, 4.292] }, // etc.]const allCoordinates = allActivities.map(activity => activity.coordinates)console.log(allCoordinates) // [[50.123, 3.291], [1.238, 4.292]]所以，請記住，當你需要去轉換數組時，考慮使用map。
filter
這個方法的名字在這里十分準確的：當你想去過濾數組的時候使用它。
如同map所做，它接受一個函數作為它的唯一參數，在數組的每個元素上調用。這個方法返回一個布爾值：
接著你會得到一個帶有你想要保留的元素的新數組。
舉個例子，你可以在數組中只保留奇數：
const numbers = [1, 2, 3, 4, 5, 6]const oddNumbers = numbers.filter(n => n % 2 !== 0)console.log(oddNumbers) // [1, 3, 5]
或者你可以在數組中移除特殊的項：
const participants = [ { id: 'a3f47', username: 'john' }, { id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' },]function removeParticipant(participants, id) { return participants.filter(participant => participant.id !== id)}console.log(removeParticipant(participants, 'a3f47')) // [{ id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }];reduce
個人認為是最難理解的方法。但是如果你一旦掌握它，很多瘋狂的事情你都可以用它做到。
基本地， reduce 使用有值的數組然后組合成一個新的值。它接受兩個參數，一個回調方法就是我們的 reducer 和一個可選的初始化的值（默認是數組的第一個項）。這個 reducer 自己使用四個參數：
大多數時候，你只需要使用前兩個參數：累計值和當前值。
拋開這些理論。來看看常見的一個 reduce 的例子。
const numbers = [37, 12, 28, 4, 9]const total = numbers.reduce((total, n) => total + n)console.log(total) // 90
在第一個遍歷時，這個累計值，也就是 total，使用了初始化為 37 的值。它返回的值是 37 + n 并且 n 等于 12，因此得到 49.在第二次遍歷時，累加值是 49，返回值是 49 + 28 = 77。如此繼續直到第四次。
reduce 是很強大的，你可以實際使用它去構建很多數組的方法，比如 map 或者 filter：
const map = (arr, fn) => { return arr.reduce((mappedArr, element) => { return [...mappedArr, fn(element)] }, [])}console.log(map([1, 2, 3, 4], n => n + 1)) // [2, 3, 4, 5]const filter = (arr, fn) => { return arr.reduce((filteredArr, element) => { return fn(element) ? [...filteredArr] : [...filteredArr, element] }, [])}console.log(filter([1, 2, 3, 4, 5, 6], n => n % 2 === 0)) // [1, 3, 5]根本上看，我們給 reduce 一個初始默認值 []：我們的累計值。對于 map，我們運行一個方法，它的結果是累加到最后，多虧了 展開操作符（不必擔心，后面討論）。對于 filter，幾乎是相似的，除了我們在元素上運行過濾函數。如果返回 true，我們返回前一個數組，否則在數組最后添加當前元素。
我們來看一個更高級的例子：深度展開數組，也就是說把 [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] 樣的數組轉換成 [1, 2, 3, 4, 5, 6, 7, 8] 樣的。
function flatDeep(arr) { return arr.reduce((flattenArray, element) => { return Array.isArray(element) ? [...flattenArray, ...flatDeep(element)] : [...flattenArray, element] }, [])}console.log(flatDeep([1, 2, 3, [4, [[[5, [6, 7]]]], 8]])) // [1, 2, 3, 4, 5, 6, 7, 8]這個例子有點像 map，除了我們用到了遞歸。我不想去解釋這個用法，它超出了這篇文章的范圍。但是，如果你想了解更多的關于遞歸的知識，請參考這篇優質的文章。
展開操作（ES2015）
我知道這不是一個方法。但是，在處理數組時，使用展開操作可以幫助你做很多事情。事實上，你可以在另一個數組中使用它展開一個數組的值。從這一點來說，你可以復制一個數組，或者連接多個數組。
const numbers = [1, 2, 3]const numbersCopy = [...numbers]console.log(numbersCopy) // [1, 2, 3]const otherNumbers = [4, 5, 6]const numbersConcatenated = [...numbers, ...otherNumbers]console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6]
注意：：展開操作符對原數組做了一次淺拷貝。但什么是 淺拷貝？
注：相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
新聞熱點
疑難解答
