上一节:
下一节:

  JavaScript 数组迭代

  • 数组迭代

    数组迭代方法对每个数组项进行操作。本章来介绍JavaScript数组迭代一些方法和技巧。

  • Array.forEach()

    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或更早版本以外的所有浏览器都支持：

  • Array.map()

    map()方法通过对每个数组元素执行函数来创建新数组。map()方法是不执行没有值的数组元素的函数。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或更早版本以外的所有浏览器都支持：

  • Array.filter()

    filter()方法创建一个新数组，其中包含传递测试的数组元素。此示例从值大于18的元素创建新数组： 
    var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
 return value > 18;
}
    尝试一下
    请注意，该函数有3个参数：
    • 元素值
    • 元素索引
    • 数组本身
    var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
 return value > 18;
}
    尝试一下
    Array.filter() 除Internet Explorer 8或更早版本以外的所有浏览器都支持：

  • Array.reduce()

    reduce()方法在每个数组元素上运行一个函数，以生成（减少它）单个值。reduce()方法在数组中从左到右工作。另见reduceRight()。reduce()方法不会减少原始数组。此示例查找数组中所有数字的总和： 
    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
 return total + value;
}
    尝试一下
    请注意，该函数有4个参数：
    • 总数（初始值/先前返回的值）
    • 元素值
    • 元素索引
    • 数组本身
    上面的示例不使用索引和数组参数。它可以改写为： 
    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
 return total + value;
}
    尝试一下
    reduce()方法可以接受初始值： 
    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
 return total + value;
}
    尝试一下
    Array.reduce() 除Internet Explorer 8或更早版本以外的所有浏览器都支持：

  • Array.reduceRight()

    reduceRight()方法在每个数组元素上运行一个函数，以生成（减少它）单个值。reduceRight()数组中从右到左的作品。另见reduce()。reduceRight()方法不会减少原始数组。 此示例查找数组中所有数字的总和： 
    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
 return total + value;
}
    尝试一下
    请注意，该函数有4个参数：
    • 总数（初始值/先前返回的值）
    • 元素值
    • 元素索引
    • 数组本身
    上面的示例不使用索引和数组参数。它可以改写为： 
    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
 return total + value;
}
    尝试一下
    Array.reduceRight() 除Internet Explorer 8或更早版本以外的所有浏览器都支持：

  • Array.every()

    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或更早版本以外的所有浏览器都支持：

  • Array.some()

    some()方法检查某些数组值是否通过测试。此示例检查某些数组值是否大于18： 
    var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
 return value > 18;
}
    尝试一下
    请注意，该函数有3个参数：
    • 元素值
    • 元素索引
    • 数组本身
    Array.every() 除Internet Explorer 8或更早版本以外的所有浏览器都支持：

  • Array.indexOf()

    indexOf()方法在数组中搜索元素值并返回其位置。注意：第一个项目的位置为0，第二个项目的位置为1，依此类推。 
    var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
    尝试一下
    Array.indexOf() 除Internet Explorer 8或更早版本以外的所有浏览器都支持：
    语法：array.indexOf(item, start)
    item：必需的。 要搜索的元素值。
    start：可选的。 从哪里开始搜索。 负值将从结束处开始的给定位置开始，并搜索到结尾。
    Array.indexOf() 如果找不到该项，则返回-1。如果项目多次出现，则返回第一次出现的位置。

  • Array.lastIndexOf()

    Array.lastIndexOf()跟Array.indexOf()是相同的，但从数组的末尾搜索。 
    var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
    尝试一下
    Array.lastIndexOf() 除Internet Explorer 8或更早版本以外的所有浏览器都支持：
    语法：array.lastIndexOf(item, start)
    item：必需的。 要搜索的元素值。
    start：可选的。 从哪里开始搜索。 负值将从开始处开头的给定位置开始，并搜索到结尾。

  • Array.find()

    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()旧版浏览器不支持。下面列出了第一个完全支持的浏览器版本。
    方法 Internet Explorer Chrome FireFox Safari Opera
    方法名称
    Array.find() 12.0（含）以上 45.0（含）以上 25.0（含）以上 8.0（含）以上 32.0（含）以上

  • Array.findIndex()

    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()旧版浏览器不支持。下面列出了第一个完全支持的浏览器版本。
    方法 Internet Explorer Chrome FireFox Safari Opera
    方法名称
    Array.findIndex() 12.0（含）以上 45.0（含）以上 25.0（含）以上 8.0（含）以上 32.0（含）以上
上一节:
下一节: