JavaScript数组的11个迭代方法使用案例

数组迭代方法对每个数组项进行操作。
1.Array.forEach()
为每个数组元素调用一次函数(回调函数)。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
注释:该函数接受 3 个参数:项目值、项目索引、数组本身,上面的例子只用了 value 参数。这个例子可以重新写为:
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
 
function myFunction(value) {
  txt = txt + value + "<br>"; 
}
所有浏览器都支持 Array.forEach(),除了 Internet Explorer 8 或更早的版本:
 
2.Array.map()
通过对每个数组元素执行函数来创建新数组。不会对没有值的数组元素执行函数。不会更改原始数组。这个例子将每个数组值乘以2:
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}
请注意,该函数有 3 个参数:项目值、项目索引、数组本身,当回调函数仅使用value参数时,可以省略索引和数组参数:
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}
所有浏览器都支持 Array.map(),除了 Internet Explorer 8 或更早的版本:
 
3.Array.filter()
创建一个包含通过测试的数组元素的新数组。这个例子用值大于18的元素创建一个新数组:
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
请注意此函数接受3个参数:项目值、项目索引、数组本身,在上面的例子中,回调函数不使用index和array参数,因此可以省略它们:
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}
所有浏览器都支持 Array.filter(),除了 Internet Explorer 8 或更早的版本:
 
4.Array.reduce()
(1)在每个数组元素上运行函数,以生成(减少它)单个值。在数组中从左到右工作。不会减少原始数组。这个例子确定数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}
请注意此函数接受4个参数:总数(初始值/先前返回的值)、项目值、项目索引、数组本身,上例并未使用index和array参数。可以将它改写为:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}
 
(2)reduce()方法能够接受一个初始值:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}
所有浏览器都支持Array.reduce(),除了Internet Explorer8或更早的版本:
 
5.Array.reduceRight()
在每个数组元素上运行函数,以生成(减少它)单个值。在数组中从左到右工作。不会减少原始数组。这个例子确定数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}
请注意此函数接受 4 个参数:总数(初始值/先前返回的值)、项目值、项目索引、数组本身,上例并未使用 index 和 array 参数。可以将它改写为:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}
所有浏览器都支持 Array.reduceRight(),除了 Internet Explorer 8 或更早的版本:
 
6.Array.every()
检查所有数组值是否通过测试。这个例子检查所有数组值是否大于18:
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
 
请注意此函数接受 3 个参数:项目值、项目索引、数组本身,如果回调函数仅使用第一个参数(值)时,可以省略其他参数:
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}
所有浏览器都支持Array.every(),除了Internet Explorer 8或更早的版本:
 
7.Array.some()
检查某些数组值是否通过了测试。这个例子检查某些数组值是否大于18:
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
请注意此函数接受3个参数:项目值、项目索引、数组本身,所有浏览器都支持Array.some(),除了Internet Explorer 8或更早的版本:
 
8.Array.indexOf()
(1)在数组中搜索元素值并返回其位置。第一个项目的位置是0,第二个项目的位置是1,以此类推。检索数组中的项目 "Apple":
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
所有浏览器都支持 Array.indexOf(),除了 Internet Explorer 8 或更早的版本:
(2)语法
array.indexOf(item, start)
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到结尾。如果未找到项目,Array.indexOf() 返回 -1。如果项目多次出现,则返回第一次出现的位置。
 
9.Array.lastIndexOf()
(1)Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。检索数组中的项目 "Apple":
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
所有浏览器都支持 Array.lastIndexOf(),除了 Internet Explorer 8或更早的版本:
(2)语法
array.lastIndexOf(item, start)
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到开头。
 
10.Array.find()
返回通过测试函数的第一个数组元素的值。这个例子查找(返回)大于 18 的第一个元素的值:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
请注意此函数接受 3 个参数:项目值、项目索引、数组本身,老旧的浏览器不支持 Array.find()。
 
11.Array.findIndex()
返回通过测试函数的第一个数组元素的索引。这个例子查找大于 18 的第一个元素的索引:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}
请注意此函数接受 3 个参数:项目值、项目索引、数组本身,老旧的浏览器不支持 Array.findIndex()。