如何高效的處理陣列對映

wmui發表於2022-03-03
陣列
  • 在處理資料的時候，經常需要對資料進行過濾和遍歷，以便把資料轉換成符合我們要求的格式，比如下面的場景：

過濾掉名字為空的資料，如果年齡小於18，設定disabled: true，大於等於18，設定disabled: false

// 原始資料
[{name: '小明', age: 15}, {name: '張三', age: 18}, {name: '李四', age: 20}, {name: '', age: 30}]

// 轉換後資料
[{name: '小明', age: 15, disabled: true}, {name: '張三', age: 18, disabled: false}, {name: '李四', age: 20, disabled: false}]
  • 對於大多數開發者來說，首先能想到的方法應該是filter和map。
[{name: '小明', age: 15}, {name: '張三', age: 18}, {name: '李四', age: 20}, {name: '', age: 30}].filter(item => item.name).map(item => ({...item, disabled: item.age >= 18 ? false : true}))

雖然這種方式要遍歷兩次，不過個人覺得還算簡單，那能不能遍歷一次就能解決呢。顯然是可以的，使用Array.flatMap()

[{name: '小明', age: 15}, {name: '張三', age: 18}, {name: '李四', age: 20}, {name: '', age: 30}].flatMap(item => item.name ? [{...item, disabled: item.age >= 18 ? false : true}] : [])

20220224172617

flatMap更像是map和filter的結合體，但flatMap的功能更強大一些，它讓我們可以更細微的運算元組中的每一項，比如:

const arr = [1,3].flatMap(number => {
  return [number, 2 * number, 3 * number];
})

// [1, 2, 3, 3, 6, 9]

flatMap的工作方式很簡單，他會對陣列中的每一項進行一次扁平化處理，因此示例返回的等價於[...[1,2,3], ...[3,6,9]]。如果要拍平一個二維陣列，可以直接使用[[2,3],4].flatMap(item => item)，當然拍平陣列最簡單的方式是用[[2,3],4].flat(Infinity)。

如何高效的處理陣列對映首發於聚享小站，如果對您有幫助，不要忘記點贊支援一下呦?

相關文章