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 不支持 ...。
