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 个参数：

值
索引
数组本身

上面的示例仅使用 value 参数。该示例可以重写为：

示例

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
txt += value + "<br>";
}

亲自试一试 »

JavaScript 数组映射()

这个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 个参数：

值
索引
数组本身

当回调函数仅使用 value 参数时，索引和数组参数可以省略：

示例

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
return value * 2;
}

亲自试一试 »

JavaScript Array flatMap()

ES2019添加了数组flatMap()JavaScript 方法。

这个flatMap()方法首先映射数组的所有元素，然后通过展平数组来创建一个新数组。

示例

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

亲自试一试 »

浏览器支持

JavaScript 数组flatMap()自 2020 年 1 月起所有现代浏览器均支持：


Chrome 69	Edge 79	Firefox 62	Safari 12	Opera 56
Sep 2018	Jan 2020	Sep 2018	Sep 2018	Sep 2018

JavaScript 数组过滤器()

这个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 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 个参数：

总计（初始值/之前返回的值）
值
索引
数组本身

上面的示例没有使用索引和数组参数。可以将其重写为：

示例

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 数组indexOf()

这个indexOf()方法在数组中搜索元素值并返回其位置。

笔记：第一项的位置为 0，第二项的位置为 1，依此类推。

示例

在数组中搜索项目 "Apple"：

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

亲自试一试 »

语法

array.indexOf( item, start)

item	Required. The item to search for.
start	Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end.

Array.indexOf()如果未找到该项目，则返回 -1。

如果该项目出现多次，则返回第一次出现的位置。

JavaScript 数组lastIndexOf()

Array.lastIndexOf()是相同的Array.indexOf()，但返回指定元素最后一次出现的位置。

示例

在数组中搜索项目 "Apple"：

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

亲自试一试 »

语法

array.lastIndexOf( item, start)

item	Required. The item to search for
start	Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning

JavaScript 数组查找()

这个find()方法返回通过测试函数的第一个数组元素的值。

此示例查找（返回其值）第一个大于 18 的元素：

示例

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
return value > 18;
}

亲自试一试 »

请注意，该函数有 3 个参数：

值
索引
数组本身

浏览器支持

find()是一个ES6 特性（JavaScript 2015）。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

find()Internet Explorer 不支持。

JavaScript Array findIndex()

这个findIndex()方法返回通过测试函数的第一个数组元素的索引。

此示例查找第一个大于 18 的元素的索引：

示例

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
return value > 18;
}

亲自试一试 »

请注意，该函数有 3 个参数：

值
索引
数组本身

浏览器支持

findIndex()是一个ES6 特性（JavaScript 2015）。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

findIndex()Internet Explorer 不支持。

JavaScript Array.from()

这个Array.from()方法从任何具有 length 属性的对象或任何可迭代对象返回一个 Array 对象。

示例

从字符串创建数组：

Array.from("ABCDEFG");

亲自试一试 »

浏览器支持

from()是一个ES6 特性（JavaScript 2015）。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

from()Internet Explorer 不支持。

JavaScript 数组键()

这个Array.keys()方法返回一个带有数组键的数组迭代器对象。

示例

创建一个数组迭代器对象，包含数组的键：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

for (let x of keys) {
text += x + "<br>";
}

亲自试一试 »

浏览器支持

keys()是一个ES6 特性（JavaScript 2015）。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

keys()Internet Explorer 不支持。

JavaScript 数组条目()

示例

创建一个数组迭代器，然后迭代键/值对：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
document.getElementById("demo").innerHTML += x;
}

亲自试一试 »

这个entries()方法返回一个带有键/值对的数组迭代器对象：

[0，"Banana"]
[1，"Orange"]
[2，"Apple"]
[3，"Mango"]

这个entries()方法不会改变原始数组。

浏览器支持

entries()是一个ES6 特性（JavaScript 2015）。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

entries()Internet Explorer 不支持。

JavaScript 数组包含()

ECMAScript 2016 推出Array.includes()到数组。这允许我们检查数组中是否存在元素（包括 NaN，与 indexOf 不同）。

示例

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true

亲自试一试 »

语法

array.includes( search-item)

Array.includes() 允许检查 NaN 值。与 Array.indexOf() 不同。

浏览器支持

includes()是一个ECMAScript 2016特征。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

includes()Internet Explorer 不支持。

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）。

所有现代浏览器都支持它：


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

...Internet Explorer 不支持。

完整的数组参考

有关完整的数组参考，请访问我们的：

完整的 JavaScript 数组参考.

该参考包含所有数组属性和方法的描述和示例。