JavaScript 数组迭代
数组迭代方法
数组迭代方法对每个数组元素进行操作
JavaScript Array forEach()
The forEach() 方法为每个数组元素调用一次函数（回调函数）。
示例
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
尝试一下 »
请注意该函数接受 3 个参数
- 项目值
- 项目索引
- 数组本身
上面的示例只使用了 value 参数。该示例可以改写为
示例
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
尝试一下 »
JavaScript Array map()
The map() 方法通过对每个数组元素执行函数来创建一个新数组。
The map() 方法不会对没有值的数组元素执行函数。
The map() 方法不会改变原始数组。
这个示例将每个数组值乘以 2
示例
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
尝试一下 »
请注意该函数接受 3 个参数
- 项目值
- 项目索引
- 数组本身
当回调函数只使用 value 参数时，可以省略 index 和 array 参数
示例
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
尝试一下 »
JavaScript Array flatMap()
ES2019 将 Array flatMap() 方法添加到 JavaScript 中。
The 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()
The filter() 方法创建一个包含通过测试的数组元素的新数组。
这个示例从值为大于 18 的元素创建一个新数组
示例
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
尝试一下 »
请注意该函数接受 3 个参数
- 项目值
- 项目索引
- 数组本身
在上面的示例中，回调函数没有使用索引和数组参数，因此可以省略它们
示例
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
尝试一下 »
JavaScript 数组 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 个参数
- 总计（初始值 / 之前返回的值）
- 项目值
- 项目索引
- 数组本身
上面的示例没有使用索引和数组参数。它可以改写为
示例
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 数组 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 个参数
- 总计（初始值 / 之前返回的值）
- 项目值
- 项目索引
- 数组本身
上面的示例没有使用索引和数组参数。它可以改写为
示例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
尝试一下 »
JavaScript 数组 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 数组 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 数组.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 月 |
from() 在 Internet Explorer 中不受支持。
JavaScript 数组 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 月 |
keys() 在 Internet Explorer 中不受支持。
JavaScript 数组 entries()
示例
创建一个 Array Iterator，然后遍历键/值对
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
尝试一下 »
该 entries() 方法返回一个包含键/值对的 Array Iterator 对象
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
该 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 月 |
entries() 在 Internet Explorer 中不受支持。
JavaScript 数组 with() 方法
ES2023 添加了 Array with() 方法作为一种安全的方式来更新数组中的元素，而不会改变原始数组。
示例
const months = ["Januar", "Februar", "Mar", "April"];
const myMonths = months.with(2, "March");
尝试一下 »
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 中不受支持。
