二维码
搜索 ×

JavaScript 数组迭代

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 数组迭代

数组迭代方法对每个数组项进行操作。

JavaScript 数组 forEach()

forEach()方法为每个数组元素调用一次函数（回调函数）。

1
2
3
4
5
6
7
const numbers = [45, 4, 9, 16, 25];  
let txt = "";  
numbers.forEach(myFunction);  

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

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

  • 项目值
  • 项目索引
  • 数组本身

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

1
2
3
4
5
6
7
const numbers = [45, 4, 9, 16, 25];  
let txt = "";  
numbers.forEach(myFunction);  

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

JavaScript 数组 map()

map()方法通过对每个数组元素执行函数来创建一个新数组。

map()方法不执行数组的函数 没有值的元素。

map()方法不会更改原始数组。

此示例将每个数组值乘以 2：

1
2
3
4
5
6
const numbers1 = [45, 4, 9, 16, 25];  
const numbers2 = numbers1.map(myFunction);  

function myFunction(value, index, array) {  
  return value * 2;  
}

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

  • 项目值
  • 项目索引
  • 数组本身

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

1
2
3
4
5
6
const numbers1 = [45, 4, 9, 16, 25];  
const numbers2 = numbers1.map(myFunction);  

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

JavaScript 数组 flatMap()

[ES2019] 在 JavaScript 中添加了 Array flatMap()方法。

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

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

浏览器支持

自 2020 年 1 月起，所有现代浏览器都支持 JavaScript Array flatMap()：
Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

JavaScript 数组 filter()

filter()方法使用通过测试的数组元素创建一个新数组。

此示例从值大于 18 的元素创建一个新数组：

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
const over18 = numbers.filter(myFunction);  

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

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

  • 项目值
  • 项目索引
  • 数组本身

在上面的例子中，回调函数没有使用索引和数组参数，因此可以省略它们：

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
const over18 = numbers.filter(myFunction);  

function myFunction(value) {  
  return value > 18;  
}

JavaScript 数组 reduce()

reduce()方法在每个数组元素上运行一个函数，以生成（将其简化为）单个值。

reduce()方法在数组中从左到右工作。另请参见reduceRight()。

reduce()方法不会减少原始数组。

此示例查找数组中所有数字的总和：

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
let sum = numbers.reduce(myFunction);  

function myFunction(total, value, index, array) {  
  return total + value;  
}

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

  • 总计（初始值/先前返回的值）
  • 项目值
  • 项目索引
  • 数组本身

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

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
let sum = numbers.reduce(myFunction);  

function myFunction(total, value) {  
  return total + value;  
}

reduce()方法可以接受初始值：

1
2
3
4
5
6
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()方法不会减少原始数组。

此示例查找数组中所有数字的总和：

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
let sum = numbers.reduceRight(myFunction);  

function myFunction(total, value, index, array) {  
  return total + value;  
}

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

  • 总计（初始值/先前返回的值）
  • 项目值
  • 项目索引
  • 数组本身

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

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
let sum = numbers.reduceRight(myFunction);  

function myFunction(total, value) {  
  return total + value;  
}

JavaScript 数组 every()

every()方法检查所有数组值是否都通过了测试。

此示例检查所有数组值是否都大于 18：

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
let allOver18 = numbers.every(myFunction);  

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

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

  • 项目值
  • 项目索引
  • 数组本身

当回调函数仅使用第一个参数（值）时，其他参数可以省略：

1
2
3
4
5
6
const numbers = [45, 4, 9, 16, 25];  
let allOver18 = numbers.every(myFunction);  

function myFunction(value) {  
  return value > 18;  
}

JavaScript 数组 some()

some()方法检查某些数组值是否通过测试。

此示例检查某些数组值是否大于 18：

1
2
3
4
5
6
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” 
1
2
const fruits = ["Apple", "Orange", "Apple", "Mango"];  
let position = fruits.indexOf("Apple") + 1;

语法

1
*array*.indexOf(*item*, *start*)
1
2
3
| *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” 
1
2
const fruits = ["Apple", "Orange", "Apple", "Mango"];  
let position = fruits.lastIndexOf("Apple") + 1;

语法

1
*array*.lastIndexOf(*item*, *start*)
1
2
3
| *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()

find()方法返回第一个数组元素的值，该元素传递 测试功能。

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

1
2
3
4
5
6
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 数组 findIndex()

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

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

1
2
3
4
5
6
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 属性的对象或任何可迭代对象返回一个数组对象。

：从字符串创建一个数组 
1
Array.from("ABCDEFG");

浏览器支持

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

所有现代浏览器都支持它：
Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

from()在 Internet Explorer 中不受支持。

JavaScript 数组 Keys()

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

：创建一个 Array Iterator 对象，其中包含数组的键 
1
2
3
4
5
6
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 数组 entries()

：创建一个数组迭代器，然后遍历键/值对： 
1
2
3
4
5
6
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）。

所有现代浏览器都支持它：
Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

entries()在 Internet Explorer 中不受支持。

JavaScript 数组 includes()

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

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

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

语法

1
*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 数组扩展 （…）

这（…）运算符将可迭代对象（如数组）扩展为更多元素：

1
2
3
4
5
6
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 中不受支持。

推荐教程