JavaScript 陣列迭代
陣列迭代方法
陣列迭代方法作用於每個陣列項
JavaScript Array forEach()
forEach() 方法對陣列中的每個元素呼叫一次函式（回撥函式）。
示例
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
上面的示例只使用了值引數。該示例可以重寫為
示例
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
自己動手試一試 »
JavaScript Array map()
map() 方法透過對每個陣列元素執行一個函式來建立一個新陣列。
map() 方法不為空值陣列元素執行該函式。
map() 方法不會改變原始陣列。
此示例將每個陣列值乘以 2
示例
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
當回撥函式只使用值引數時，可以省略 index 和 array 引數
示例
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
自己動手試一試 »
JavaScript Array flatMap()
ES2019 為 JavaScript 添加了 Array flatMap() 方法。
flatMap() 方法首先對映陣列的所有元素，然後透過展平陣列建立一個新陣列。
瀏覽器支援
JavaScript Array flatMap() 自 2020 年 1 月起在所有現代瀏覽器中都受支援
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| 2018 年 9 月 | 2020 年 1 月 | 2018 年 9 月 | 2018 年 9 月 | 2018 年 9 月 |
JavaScript Array filter()
filter() 方法建立一個新陣列，其中包含透過測試的陣列元素。
此示例從值大於 18 的元素建立新陣列
示例
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
在上面的示例中，回撥函式沒有使用 index 和 array 引數，因此可以省略它們
示例
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
自己動手試一試 »
JavaScript Array reduce()
reduce() 方法對每個陣列元素執行一個函式，以生成（將其歸結為）一個單一值。
reduce() 方法從陣列的左側到右側工作。另請參閱 reduceRight()。
reduce() 方法不會減少原始陣列。
此示例查詢陣列中所有數字的和
示例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
自己動手試一試 »
請注意，該函式接受 4 個引數
- 總計（初始值/先前返回值）
- 專案值
- 專案索引
- 陣列本身
上面的示例沒有使用 index 和 array 引數。它可以重寫為
示例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
自己動手試一試 »
reduce() 方法可以接受一個初始值
示例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
function myFunction(total, value) {
return total + value;
}
自己動手試一試 »
JavaScript Array reduceRight()
reduceRight() 方法對每個陣列元素執行一個函式，以生成（將其歸結為）一個單一值。
reduceRight() 方法從陣列的右側到左側工作。另請參閱 reduce()。
reduceRight() 方法不會減少原始陣列。
此示例查詢陣列中所有數字的和
示例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
自己動手試一試 »
請注意，該函式接受 4 個引數
- 總計（初始值/先前返回值）
- 專案值
- 專案索引
- 陣列本身
上面的示例沒有使用 index 和 array 引數。它可以重寫為
示例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
自己動手試一試 »
JavaScript Array every()
every() 方法檢查所有陣列值是否透過測試。
此示例檢查所有陣列值是否都大於 18
示例
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
當回撥函式只使用第一個引數（值）時，可以省略其他引數
示例
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
自己動手試一試 »
JavaScript Array some()
some() 方法檢查是否有某些陣列值透過測試。
此示例檢查是否有某些陣列值大於 18
示例
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
JavaScript Array.from()
Array.from() 方法從任何具有 length 屬性的物件或任何可迭代物件返回一個 Array 物件。
瀏覽器支援
from() 是一個 ES6 特性 (JavaScript 2015)。
自 2017 年 6 月起，所有現代瀏覽器都完全支援 ES6
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
Internet Explorer 不支援 from()。
JavaScript Array keys()
Array.keys() 方法返回一個帶有陣列鍵的 Array Iterator 物件。
示例
建立一個 Array Iterator 物件，包含陣列的鍵
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
自己動手試一試 »
瀏覽器支援
keys() 是一個 ES6 特性 (JavaScript 2015)。
自 2017 年 6 月起，所有現代瀏覽器都完全支援 ES6
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
Internet Explorer 不支援 keys()。
JavaScript Array entries()
示例
建立一個數組迭代器，然後迭代鍵/值對
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
自己動手試一試 »
entries() 方法返回一個帶有鍵/值對的 Array Iterator 物件
[0, "香蕉"]
[1, "橙子"]
[2, "蘋果"]
[3, "芒果"]
entries() 方法不會改變原始陣列。
瀏覽器支援
entries() 是一個 ES6 特性 (JavaScript 2015)。
自 2017 年 6 月起，所有現代瀏覽器都完全支援 ES6
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
Internet Explorer 不支援 entries()。
JavaScript 陣列 with() 方法
ES2023 添加了 Array with() 方法，作為一種安全更新陣列元素而不改變原始陣列的方法。
JavaScript 陣列擴充套件運算子 (...)
... 運算子將可迭代物件（如陣列）展開為更多元素
示例
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
自己動手試一試 »
瀏覽器支援
... 是一個 ES6 特性 (JavaScript 2015)。
自 2017 年 6 月起，所有現代瀏覽器都完全支援 ES6
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
Internet Explorer 不支援 ...。
