首先做一個粗體聲明:循環經常是無用的,并且使得代碼很難閱讀。
當談到迭代一個數組的時候,無論你想去查找元素,排序或者任何其他的事,都有可能存在一個數組的方法供你使用。
然而,盡管它們有用,但其中一些仍然不被人了解。我會努力為你展示一些有用的方法。把這篇文章當做對 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' }];
新聞熱點
疑難解答
圖片精選