8.1 forEach() 方法
JavaScript 中的陣列遍歷方法提供了強大的工具來操作陣列,允許對其元素執行各種操作。在這個主題中,我們將討論主要的遍歷方法,包括 forEach(), map(), filter(), reduce(), some(), every(), find(), 和 findIndex()。
forEach() 方法對陣列的每個元素執行一次指定的函數。這個方法不會返回新的陣列,也不能中斷。
語法:
array.forEach(function(element, index, array) {
// 函數體
});
範例:
forEach() 方法遍歷 numbers[] 陣列的每一個元素,並打印其索引和值。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
console.log(`Index: ${index}, Value: ${number}`);
});
// 輸出:
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3
// Index: 3, Value: 4
// Index: 4, Value: 5
8.2 map() 方法
map() 方法創建一個新陣列,其結果是將函數對陣列中的每一個元素調用的結果。
語法:
const newArray = array.map(function(element, index, array) {
// 函數體
return 新值;
});
轉換函數也可以使用箭頭函數語法來編寫:
const newArray = array.map((element, index, array) => 新值);
範例:
map() 方法創建了一個新陣列 squared[],其中包含 numbers[] 陣列中數字的平方。
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => number * number);
console.log(squared); // [1, 4, 9, 16, 25]
8.3 filter() 方法
filter() 方法創建一個新陣列,其中包含通過在傳遞的函數中指定的測試的所有元素。
const newArray = array.filter(function(element, index, array) {
// 函數體
return 條件;
});
篩選函數也可以使用箭頭函數語法來編寫:
const newArray = array.filter((element, index, array) => 條件);
範例:
filter() 方法創建了一個新陣列 evenNumbers[],其中只包含 numbers[] 陣列中的偶數。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
8.4 reduce() 方法
reduce() 方法對累加器和陣列中的每一個元素(從左到右)應用一個函數,將其減少為單一的值。
語法:
const result = array.reduce(function(accumulator, current, index, array) {
// 函數體
return 新的累加器值;
}, initialValue);
累加函數也可以使用箭頭函數語法來編寫:
const result = array.reduce((accumulator, current, index, array) =>
新的值, initialValue
);
範例:
reduce() 方法將 numbers[] 陣列壓縮成單一的值 sum,通過將所有元素相加。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum); // 15
8.5 some() 方法
some() 方法檢查是否至少一個 陣列元素滿足由提供的函數指定的條件。返回 true 或 false。
語法:
const result = array.some(function(element, index, array) {
// 函數體
return 條件;
});
檢查函數也可以使用箭頭函數語法來編寫:
const result = array.some((element, index, array) => 條件);
範例:
some() 方法檢查 numbers[] 陣列中是否至少有一個偶數,並返回 true。
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true
8.6 every() 方法
every() 方法檢查陣列中的所有元素是否滿足由提供的函數指定的條件。返回 true 或 false。
語法:
const result = array.every(function(element, index, array) {
// 函數體
return 條件;
});
檢查函數也可以使用箭頭函數語法來編寫:
const result = array.every((element, index, array) => 條件);
範例:
every() 方法檢查 numbers[] 陣列的所有元素是否都是正數,並返回 true。
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(number => number > 0);
console.log(allPositive); // true
8.7 find() 方法
find() 方法返回第一個陣列元素,該元素滿足由提供的函數指定的條件。如果沒有元素滿足條件,則返回 undefined。
語法:
const result = array.find(function(element, index, array) {
// 函數體
return 條件;
});
檢查函數也可以使用箭頭函數語法來編寫:
const result = array.find((element, index, array) => 條件);
範例:
find() 方法返回 numbers[] 陣列中的第一個偶數。
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
8.8 findIndex() 方法
findIndex() 方法返回第一個陣列元素的索引,該元素滿足由提供的函數指定的條件。如果沒有元素滿足條件,則返回 -1。
語法:
const result = array.findIndex(function(element, index, array) {
// 函數體
return 條件;
});
檢查函數也可以使用箭頭函數語法來編寫:
const result = array.findIndex((element, index, array) => 條件);
範例:
findIndex() 方法返回 numbers[] 陣列中第一個偶數的索引。
const numbers = [1, 2, 3, 4, 5];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex); // 1
GO TO FULL VERSION