forEach

map

filter

find

some

every

reduce

forEach

map

for

map

filter

find

some

every

reduce

filter

map

map

map

users.map(user => user.id)

filter

products.filter(product => product.stock > 0)

filter

map

users.filter(u => u.isActive).map(u => u.name)

reduce

reduce

登錄后復(fù)制

的魔力：如何用它處理數(shù)組的聚合與復(fù)雜數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換？

reduce

arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

accumulator

initialValue

reduce

最簡單的例子是求和：

[1, 2, 3].reduce((sum, num) => sum + num, 0)

0

sum

0, 1, 3

6

但

reduce

• 將數(shù)組轉(zhuǎn)換成對(duì)象： 比如，將一個(gè)用戶數(shù)組，轉(zhuǎn)換成一個(gè)以用戶ID為鍵的對(duì)象：

  const users = [{ id: 'a', name: 'Alice' }, { id: 'b', name: 'Bob' }];
  const usersById = users.reduce((acc, user) => {
      acc[user.id] = user;
      return acc;
  }, {});
  // usersById: { a: { id: 'a', name: 'Alice' }, b: { id: 'b', name: 'Bob' } }

  登錄后復(fù)制

  這里

  acc

  登錄后復(fù)制
  從一個(gè)空對(duì)象

  {}

  登錄后復(fù)制
  開始，每次迭代都向其中添加一個(gè)屬性。

• 計(jì)算數(shù)組中每個(gè)元素的出現(xiàn)次數(shù)：

  const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
  const counts = fruits.reduce((acc, fruit) => {
      acc[fruit] = (acc[fruit] || 0) + 1;
      return acc;
  }, {});
  // counts: { apple: 3, banana: 2, orange: 1 }

  登錄后復(fù)制

• 扁平化嵌套數(shù)組：

  

  怪獸AI數(shù)字人

  數(shù)字人短視頻創(chuàng)作，數(shù)字人直播，實(shí)時(shí)驅(qū)動(dòng)數(shù)字人

  44

  查看詳情

  const nestedArray = [[1, 2], [3, 4], [5]];
  const flattened = nestedArray.reduce((acc, val) => acc.concat(val), []);
  // flattened: [1, 2, 3, 4, 5]

  登錄后復(fù)制

reduce

accumulator

accumulator

reduce

undefined

除了

reduce

登錄后復(fù)制

，還有哪些不常用的高級(jí)數(shù)組方法能提升代碼效率？

除了

reduce

• some()

  登錄后復(fù)制
  和

  every()

  登錄后復(fù)制
  ： 這兩個(gè)方法用于檢查數(shù)組中的元素是否滿足某個(gè)條件。

  some()

  登錄后復(fù)制
  只要有一個(gè)元素滿足條件就返回

  true

  登錄后復(fù)制
  ，否則返回

  false

  登錄后復(fù)制
  。它就像邏輯“或”。

  const numbers = [1, 5, 10, 15];
  const hasEven = numbers.some(num => num % 2 === 0); // true (因?yàn)?0是偶數(shù))

  登錄后復(fù)制

  而

  every()

  登錄后復(fù)制
  則要求所有元素都滿足條件才返回

  true

  登錄后復(fù)制
  ，否則返回

  false

  登錄后復(fù)制
  。它就像邏輯“與”。

  const allGreaterThanZero = numbers.every(num => num > 0); // true
  const allEven = numbers.every(num => num % 2 === 0); // false

  登錄后復(fù)制

  它們?cè)诒韱悟?yàn)證、權(quán)限檢查等場景非常有用，避免了手動(dòng)循環(huán)并設(shè)置布爾標(biāo)志的繁瑣。

• find()

  登錄后復(fù)制
  和

  findIndex()

  登錄后復(fù)制
  ： 當(dāng)我們不需要整個(gè)符合條件的數(shù)組，而只需要找到第一個(gè)符合條件的元素時(shí)，

  find()

  登錄后復(fù)制
  是最佳選擇。它返回第一個(gè)滿足條件的元素本身，如果沒有找到則返回

  undefined

  登錄后復(fù)制
  。

  const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
  const alice = users.find(user => user.name === 'Alice'); // { id: 1, name: 'Alice' }
  const charlie = users.find(user => user.name === 'Charlie'); // undefined

  登錄后復(fù)制

  findIndex()

  登錄后復(fù)制
  則返回第一個(gè)滿足條件的元素的索引，如果沒有找到則返回

  -1

  登錄后復(fù)制
  。這對(duì)于需要知道元素位置的場景很有用。

• flat()

  登錄后復(fù)制
  和

  flatMap()

  登錄后復(fù)制
  ： ES2019 引入的

  flat()

  登錄后復(fù)制
  方法用于扁平化嵌套數(shù)組，它接收一個(gè)可選參數(shù)

  depth

  登錄后復(fù)制
  來指定扁平化的層級(jí)，默認(rèn)是1。

  const deepArray = [1, [2, [3, 4]], 5];
  console.log(deepArray.flat(1)); // [1, 2, [3, 4], 5]
  console.log(deepArray.flat(2)); // [1, 2, 3, 4, 5]
  console.log(deepArray.flat(Infinity)); // 徹底扁平化

  登錄后復(fù)制

  flatMap()

  登錄后復(fù)制
  結(jié)合了

  map

  登錄后復(fù)制
  和

  flat

  登錄后復(fù)制
  的功能，先對(duì)數(shù)組的每個(gè)元素執(zhí)行一個(gè)映射函數(shù)，然后將結(jié)果扁平化一層。這在處理需要先轉(zhuǎn)換再扁平化的數(shù)據(jù)時(shí)非常方便。

  const sentences = ['hello world', 'how are you'];
  const words = sentences.flatMap(sentence => sentence.split(' '));
  // words: ['hello', 'world', 'how', 'are', 'you']

  登錄后復(fù)制

  如果沒有

  flatMap

  登錄后復(fù)制
  ，我們可能需要

  sentences.map(s => s.split(' ')).flat()

  登錄后復(fù)制
  ，

  flatMap

  登錄后復(fù)制
  讓代碼更簡潔。

這些方法，雖然可能不如

map

filter

以上就是JS 數(shù)組方法進(jìn)階指南 - 從基礎(chǔ)迭代到 reduce 的復(fù)雜數(shù)據(jù)轉(zhuǎn)換的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！