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>";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.forEach()</h1>
<p>为每个元素调用一次函数。</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>
运行结果：
Javascript Array.forEach() 为每个元素调用一次函数。 45 4 9 16 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：该函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
上面的例子只用了 value 参数。这个例子可以重新写为：
示例代码：
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.forEach()</h1>
<p>为每个元素调用一次函数。</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>
运行结果：
Javascript Array.forEach() 为每个元素调用一次函数。 45 4 9 16 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.forEach()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
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;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.map()</h1>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
运行结果：
Javascript Array.map() 通过对每个数组元素执行函数来创建新数组。 90,8,18,32,50
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意，该函数有 3 个参数：
- 项目值
- 项目索引
- 数组本身
当回调函数仅使用 value 参数时，可以省略索引和数组参数：
示例代码：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.map()</h1>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
运行结果：
Javascript Array.map() 通过对每个数组元素执行函数来创建新数组。 90,8,18,32,50
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.map()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。
这个例子用值大于 18 的元素创建一个新数组：
示例代码：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.filter()</h1>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.filter() 使用通过测试的所有数组元素创建一个新数组。 45,25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：
示例代码：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.filter()</h1>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.filter() 使用通过测试的所有数组元素创建一个新数组。 45,25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.filter()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
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;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduce()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
运行结果：
Javascript Array.reduce() 此例确定数组中所有数字的总和： 总和是：99
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 4 个参数：
- 总数（初始值/先前返回的值）
- 项目值
- 项目索引
- 数组本身
上例并未使用 index 和 array 参数。可以将它改写为：
示例代码：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduce()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
运行结果：
Javascript Array.reduce() 此例确定数组中所有数字的总和： 总和是：99
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
reduce() 方法能够接受一个初始值：
示例代码：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
return total + value;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduce()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
运行结果：
Javascript Array.reduce() 此例确定数组中所有数字的总和： 总和是：199
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.reduce()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
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;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduceRight()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
运行结果：
Javascript Array.reduceRight() 此例确定数组中所有数字的总和： 总和是：99
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 4 个参数：
- 总数（初始值/先前返回的值）
- 项目值
- 项目索引
- 数组本身
上例并未使用 index 和 array 参数。可以将它改写为：
示例代码：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduceRight()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
运行结果：
Javascript Array.reduceRight() 此例确定数组中所有数字的总和： 总和是：99
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.reduceRight()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
Array.every()
every() 方法检查所有数组值是否通过测试。
这个例子检查所有数组值是否大于 18：
示例代码：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.every()</h1>
<p>every() 方法检查所有数组值是否通过测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.every() every() 方法检查所有数组值是否通过测试。 所有大于 18 的是：false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
如果回调函数仅使用第一个参数（值）时，可以省略其他参数：
示例代码：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.every()</h1>
<p>every() 方法检查所有数组值是否通过测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.every() every() 方法检查所有数组值是否通过测试。 所有大于 18 的是：false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.every()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
Array.some()
some() 方法检查某些数组值是否通过了测试。
这个例子检查某些数组值是否大于 18：
示例代码：
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.some()</h1>
<p>some() 方法检查某些数组值是否通过了测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "某些值大于 18 是：" + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.some() some() 方法检查某些数组值是否通过了测试。 某些值大于 18 是：true
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
所有浏览器都支持 Array.some()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。
注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。
示例代码：
检索数组中的项目 "Apple"：
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.indexOf()</h1>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple 被找到的位置是：" + (a + 1);
</script>
<p>Internet Explorer 8 或更早的版本不支持 indexOf()。</p>
</body>
</html>
运行结果：
Javascript Array.indexOf() Apple 被找到的位置是：1 Internet Explorer 8 或更早的版本不支持 indexOf()。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.indexOf()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
语法
array.indexOf(item, start)
| item | 必需。要检索的项目。 |
| start | 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。 |
如果未找到项目，Array.indexOf() 返回 -1。
如果项目多次出现，则返回第一次出现的位置。
Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。
示例代码：
检索数组中的项目 "Apple"：
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.lastIndexOf()</h1>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>
<p>Internet Explorer 8 或更早的版本不支持 lastIndexOf()。</p>
</body>
</html>
运行结果：
Javascript Array.lastIndexOf() Apple is found in position 3 Internet Explorer 8 或更早的版本不支持 lastIndexOf()。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Array.lastIndexOf()，除了 Internet Explorer 8 或更早的版本：
| Yes | 9.0 | Yes | Yes | Yes |
语法
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;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.find()</h1>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.find() 大于 18 的第一个值是：25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
老旧的浏览器不支持 Array.find()。下面列出了完全支持此方法的首个浏览器版本：
| 45 | 12 | 25 | 8 | 32 |
Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。
这个例子查找大于 18 的第一个元素的索引：
示例代码：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.findIndex()</h1>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
运行结果：
Javascript Array.findIndex() 大于 18 的第一个值的索引是：3
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
老旧的浏览器不支持 Array.findIndex()。下面列出了完全支持此方法的首个浏览器版本：
| 45 | 12 | 25 | 8 | 32 |
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
