午夜视频在线观看区二区-午夜视频在线观看视频-午夜视频在线观看视频在线观看-午夜视频在线观看完整高清在线-午夜视频在线观看网站-午夜视频在线观看亚洲天堂

十個必知數(shù)組函數(shù)

1. forEach()

forEach()就像一位可靠的助手，可以遍歷數(shù)組中的每個元素，并執(zhí)行你指定的任務(wù)。

它接受一個回調(diào)函數(shù)，該函數(shù)會對每個元素執(zhí)行操作，非常適合處理副作用，例如日志記錄、DOM操作和數(shù)據(jù)修改。

示例： 打印數(shù)組中的所有元素

javascript
 代碼解讀
復(fù)制代碼
const fruits = ["apple", "banana", "cherry"];

fruits.forEach(fruit => console.log(fruit));

2. map()

需要根據(jù)現(xiàn)有數(shù)組創(chuàng)建一個新的數(shù)組，并進行一些修改？map()可以幫到你。

它會根據(jù)回調(diào)函數(shù)對每個元素進行操作，并返回一個包含結(jié)果的新數(shù)組。

它非常適合提取數(shù)據(jù)集、提供數(shù)據(jù)和執(zhí)行計算。

示例： 將數(shù)組中的每個數(shù)字翻倍

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers);

// 輸出 [2, 4, 6, 8]

3. filter()

想象一下，有人在門口把守，只允許特定的人進入VIP區(qū)域。 filter()的功能類似，它會創(chuàng)建一個新數(shù)組，只包含通過回調(diào)函數(shù)測試的元素。

你可以用它根據(jù)條件篩選數(shù)據(jù)、刪除不需要的元素，或創(chuàng)建自定義子集。

示例： 從數(shù)組中獲取偶數(shù)

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); 

// 輸出 [2, 4]

4. reduce()

reduce()就像一位武林高手，可以將整個數(shù)組整合為一個單一的值，并使用回調(diào)函數(shù)進行操作。

它非常靈活，可以計算總和、平均值，找到最大值和最小值，甚至創(chuàng)建復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。

示例： 計算數(shù)組的總和

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); 

// 輸出: 10

5. find()

需要找到第一個滿足特定條件的元素？find()是你的救星。

它會返回第一個通過回調(diào)函數(shù)測試的元素的值，非常適合快速查找和避免遍歷整個數(shù)組。

示例： 找到第一個大于3的元素

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 2, 4, 5];

const firstGreaterThanThree = numbers.find(number => number > 3);
console.log(firstGreaterThanThree);

// 輸出: 4

6. findIndex()

findIndex()比find()更進一步，它會返回第一個通過回調(diào)函數(shù)測試的元素的索引。

這在查找數(shù)組中的特定數(shù)據(jù)、根據(jù)元素在數(shù)組中的位置修改元素，以及執(zhí)行針對性的操作時非常有用。

示例： 找到第一個大于3的元素的索引

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 2, 4, 5];

const indexOfFirstGreaterThanThree = numbers.findIndex(number => number > 3);
console.log(indexOfFirstGreaterThanThree);

// 輸出: 2

7. some()

你是否需要檢查數(shù)組中是否存在至少一個滿足特定條件的元素？some()可以幫到你。

它會檢查是否存在至少一個元素通過回調(diào)函數(shù)測試。

你可以用它來確認條件、驗證輸入，或者在只需要一個匹配元素時簡化邏輯。

示例： 檢查數(shù)組中是否存在大于10的元素

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 5, 8, 12];

const hasElementGreaterThanTen = numbers.some(number => number > 10);
console.log(hasElementGreaterThanTen);

// 輸出: true

8. every()

every()是some()的嚴格的兄長。它會確保數(shù)組中的所有元素都通過回調(diào)函數(shù)測試。

這對于數(shù)據(jù)驗證、檢查所有元素是否符合指定結(jié)構(gòu)，以及進行質(zhì)量檢查非常有用。

示例： 檢查數(shù)組中的所有元素是否都是字符串

javascript
 代碼解讀
復(fù)制代碼
const data = ["apple", "banana", 10];

const allStrings = data.every(element => typeof element === "string");
console.log(allStrings);

// 輸出: false

9. includes()

有時你只需要知道數(shù)組中是否存在特定值。 includes()是進行簡單驗證的最佳助手。

它會快速檢查給定值是否存在于數(shù)組中，這對于識別單個數(shù)據(jù)點或根據(jù)數(shù)組成員資格創(chuàng)建條件邏輯非常重要。

示例： 檢查數(shù)組中是否包含值 "orange"

javascript
 代碼解讀
復(fù)制代碼
const fruits = ["apple", "banana", "cherry"];

const hasOrange = fruits.includes("orange");
console.log(hasOrange);

// 輸出: false

10. flat()

你是否遇到過多維數(shù)組或數(shù)組嵌套在數(shù)組中的情況？它們可能很混亂。flat()可以將它們轉(zhuǎn)換為一維數(shù)組。

這對于簡化嵌套數(shù)組、處理可能具有嵌套結(jié)構(gòu)的API數(shù)據(jù)，以及存儲數(shù)據(jù)以便進一步處理非常有用。

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

javascript
 代碼解讀
復(fù)制代碼
const nestedArray = [1, [2, 3], 4];

const flattenedArray = nestedArray.flat();
console.log(flattenedArray);

// 輸出: [1, 2, 3, 4]

提示：  考慮使用flatMap()，這是JavaScript的另一個新功能，它可以讓你更好地控制扁平化和轉(zhuǎn)換操作。

一些技巧

現(xiàn)在你已經(jīng)掌握了基礎(chǔ)知識，讓我們來看看一些高級技巧，它們將提升你的學習水平：

1. 鏈式調(diào)用數(shù)組方法

多個數(shù)組方法可以串聯(lián)在一起，以實現(xiàn)復(fù)雜的變化，同時保持清晰易懂。

例如，你可以在一行代碼中過濾出偶數(shù)，并將它們映射到它們的平方：

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, 2, 3, 4, 5];

const evenSquares = numbers.filter(number => number % 2 === 0)
                           .map(number => number * number);

console.log(evenSquares);

// 輸出: [4, 16]

2. 自定義回調(diào)函數(shù)

請記住，許多數(shù)組函數(shù)依賴于回調(diào)函數(shù)。

創(chuàng)建強大且定義明確的回調(diào)函數(shù)，以處理極端情況，確保類型安全（通過指定期望的數(shù)據(jù)類型）以及提高代碼可維護性。

例如，一個定義明確的回調(diào)函數(shù)，用于檢查數(shù)字是否為偶數(shù)：

javascript
 代碼解讀
復(fù)制代碼
function isEven(number) {
  if (typeof number !== 'number') {
    throw new TypeError('Input must be a number');
  }
  return number % 2 === 0;
}

3. 錯誤處理

意外數(shù)據(jù)或缺失片段可能會導(dǎo)致錯誤。

探討如何在數(shù)組函數(shù)中處理潛在的錯誤，以避免出現(xiàn)意外行為。

你可以使用try-catch塊優(yōu)雅地處理異常：

javascript
 代碼解讀
復(fù)制代碼
const numbers = [1, "two", 3];

try {
  const doubledNumbers = numbers.map(number => number * 2);
  console.log(doubledNumbers);

// [2, NaN, 6] (Error for "two")

} catch (error) {
  console.error("An error occurred:", error);
}

4. 性能考慮

并非所有數(shù)組方法都具有相同的性能。簡要討論一下大型或復(fù)雜數(shù)組的性能影響（例如，forEach 與for循環(huán)）。

• 內(nèi)存： 大量數(shù)據(jù)可能會壓垮你的系統(tǒng)。
• 循環(huán)： 訪問大型數(shù)組需要時間。
• 復(fù)雜元素： 處理數(shù)組中的復(fù)雜數(shù)據(jù)速度會顯著變慢。

forEach 與 for 循環(huán)：性能相似，但 forEach 提供更多控制，而且更易于閱讀。

技巧：  對于常見的查找操作，使用其他數(shù)據(jù)結(jié)構(gòu)；將大型操作拆分成更小的操作；仔細檢查你的代碼，找出性能瓶頸。（之后優(yōu)化！）

對于真正的大型數(shù)據(jù)集，嘗試使用傳統(tǒng)的循環(huán)來提高效率，特別是在一些舊的瀏覽器中，它們可能沒有優(yōu)化數(shù)組函數(shù)的實現(xiàn)。

5. 函數(shù)式編程

數(shù)組函數(shù)非常適合函數(shù)式編程范式。

函數(shù)式編程側(cè)重于純函數(shù)（沒有副作用）和不可變數(shù)據(jù)。

使用數(shù)組方法從現(xiàn)有數(shù)組中構(gòu)建新數(shù)組，可以讓你保持原始數(shù)據(jù)的有效性，提高可預(yù)測性，并簡化調(diào)試工作。

最佳實踐

• 組合函數(shù)： 如前所述，鏈式調(diào)用多個任務(wù)可以實現(xiàn)快速而強大的操作。不要害怕嘗試和混合使用它們，在一行代碼中創(chuàng)建復(fù)雜的變化。
• 不可變性： 盡可能創(chuàng)建新的數(shù)組，而不是修改舊數(shù)組。這可以提高可讀性，并降低產(chǎn)生意外影響的風險。使用map、filter和slice等方法創(chuàng)建新數(shù)組。
• 錯誤處理： 在你的回調(diào)函數(shù)中始終使用健壯的錯誤處理機制，以捕獲異常輸入或缺失元素。這可以防止因組合和崩潰而導(dǎo)致程序出錯。

作者：前端寶哥
鏈接：https://juejin.cn/post/7413682017299365922
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。