参考手册
JAVASCRIPT 教程
JavaScript 数组排序
JavaScript 日期

JavaScript 数组迭代

JavaScript 数组迭代是为了达到所需的目标或结果，重复反馈过程的活动，包括数组循环、数组查询、索引查询等。

数组 forEach() 方法

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 forEach()</h1>
  7. <p>为每个元素调用一次函数。</p>
  9. <p id="demo">
  11. <script>
  12. var txt = "";
  13. var numbers = [45, 4, 9, 16, 25];
  14. numbers.forEach(myFunction);
  15. document.getElementById("demo").innerHTML = txt;
  17. function myFunction(value, index, array) {
  18.   txt = txt + value + "<br>";
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

注释：该函数接受 3 个参数：

  • value 项目值
  • index 项目索引
  • array 数组本身

所有浏览器都支持 forEach()，除了 Internet Explorer 8 或更早的版本：

方法
foreachYes9.0YesYesYes

数组 map() 方法

  • map() 方法通过对每个数组元素执行函数来创建新数组。
  • map() 方法不会对没有值的数组元素执行函数。
  • map() 方法不会更改原始数组。

这个例子将每个数组值乘以2：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 map()</h1>
  7. <p>通过对每个数组元素执行函数来创建新数组。</p>
  9. <p id="demo">
  11. <script>
  12. var numbers1 = [45, 4, 9, 16, 25];
  13. var numbers2 = numbers1.map(myFunction);
  15. document.getElementById("demo").innerHTML = numbers2;
  17. function myFunction(value, index, array) {
  18.   return value * 2;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

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

  • value 项目值
  • index 项目索引
  • array 数组本身

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

所有浏览器都支持 map()，除了 Internet Explorer 8 或更早的版本：

方法
mapYes9.0YesYesYes

数组 filter()

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

下面例子用值大于 18 的元素创建一个新数组：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 filter()</h1>
  7. <p>使用通过测试的所有数组元素创建一个新数组。</p>
  9. <p id="demo">
  11. <script>
  12. var numbers = [45, 4, 9, 16, 25];
  13. var over18 = numbers.filter(myFunction);
  15. document.getElementById("demo").innerHTML = over18;
  17. function myFunction(value, index, array) {
  18.   return value > 18;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

请注意此函数接受 3 个参数：

  • value 项目值
  • index 项目索引
  • array 数组本身

在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们。

所有浏览器都支持 filter()，除了 Internet Explorer 8 或更早的版本：

方法
filterYes9.0YesYesYes

数组 reduce() 方法

  • reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
  • reduce() 方法在数组中从左到右工作。如果是从右到左可以参考后面的 reduceRight() 方法。
  • reduce() 方法不会减少原始数组。

下面例子确定数组中所有数字的总和：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 reduce()</h1>
  7. <p>此例确定数组中所有数字的总和：</p>
  9. <p id="demo">
  11. <script>
  12. var numbers = [45, 4, 9, 16, 25];
  13. var sum = numbers.reduce(myFunction);
  15. document.getElementById("demo").innerHTML = "总和是：" + sum;
  17. function myFunction(total, value, index, array) {
  18.   return total + value;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

请注意此函数接受 4 个参数：

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

上例并未使用 index 和 array 参数。也可以将这两个参数省略。

reduce() 方法能够接受一个初始值：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 reduce()</h1>
  7. <p>此例确定数组中所有数字的总和：</p>
  9. <p id="demo">
  11. <script>
  12. var numbers = [45, 4, 9, 16, 25];
  13. var sum = numbers.reduce(myFunction, 100);
  15. document.getElementById("demo").innerHTML = "总和是：" + sum;
  17. function myFunction(total, value) {
  18.   return total + value;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

所有浏览器都支持 reduce()，除了 Internet Explorer 8 或更早的版本：

方法
reduceYes9.0YesYesYes

数组 reduceRight() 方法

  • reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
  • reduceRight() 方法在数组中从右到左工作。另请参考上面的 reduce()。
  • reduceRight() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 reduceRight()</h1>
  7. <p>此例确定数组中所有数字的总和：</p>
  9. <p id="demo">
  11. <script>
  12. var numbers = [45, 4, 9, 16, 25];
  13. var sum = numbers.reduceRight(myFunction);
  15. document.getElementById("demo").innerHTML = "总和是：" + sum;
  17. function myFunction(total, value, index, array) {
  18.   return total + value;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

请注意此函数接受 4 个参数：

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

上例并未使用 index 和 array 参数。也可以将这两个参数省略。

所有浏览器都支持 reduceRight()，除了 Internet Explorer 8 或更早的版本：

方法
reduceRightYes9.0YesYesYes

数组 every() 方法

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

下面例子检查所有数组值是否大于 18：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 every()</h1>
  7. <p>every() 方法检查所有数组值是否通过测试。</p>
  9. <p id="demo">
  11. <script>
  12. var numbers = [45, 4, 9, 16, 25];
  13. var allOver18 = numbers.every(myFunction);
  15. document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
  17. function myFunction(value, index, array) {
  18.   return value > 18;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

请注意此函数接受 3 个参数：

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

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

所有浏览器都支持 every()，除了 Internet Explorer 8 或更早的版本：

方法
everyYes9.0YesYesYes

数组 some() 方法

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

下面例子检查某些数组值是否大于 18：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 some()</h1>
  7. <p>some() 方法检查某些数组值是否通过了测试。</p>
  9. <p id="demo">
  11. <script>
  12. var numbers = [45, 4, 9, 16, 25];
  13. var someOver18 = numbers.some(myFunction);
  15. document.getElementById("demo").innerHTML = "某些值大于 18 是：" + someOver18;
  17. function myFunction(value, index, array) {
  18.   return value > 18;
  19. }
  20. </script>
  22. </body>
  23. </html>
运行一下

请注意此函数接受 3 个参数：

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

所有浏览器都支持 some()，除了 Internet Explorer 8 或更早的版本：

方法
someYes9.0YesYesYes

数组 indexOf() 方法

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

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

检索数组中的项目 "苹果"：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 indexOf()</h1>
  7. <p id="demo">
  9. <script>
  10. var fruits = ["苹果", "橘子", "苹果", "芒果"];
  11. var a = fruits.indexOf("苹果");
  12. document.getElementById("demo").innerHTML = "苹果 被找到的位置是：" + (a + 1);
  13. </script>
  15. <p>Internet Explorer 8 或更早的版本不支持 indexOf()。</p>
  17. </body>
  18. </html>
运行一下

所有浏览器都支持 indexOf()，除了 Internet Explorer 8 或更早的版本：

方法
indexOfYes9.0YesYesYes
语法
  1. array.indexOf(item, start)
item必需。要检索的项目。
start可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

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

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

数组 lastIndexOf() 方法

lastIndexOf() 与 indexOf() 类似，但是从数组结尾开始搜索。

检索数组中的项目 "苹果"：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 lastIndexOf()</h1>
  7. <p id="demo">
  9. <script>
  10. var fruits = ["苹果", "橘子", "苹果", "芒果"];
  11. var a = fruits.lastIndexOf("苹果");
  12. document.getElementById("demo").innerHTML = "苹果 被找到的位置是 " + (a + 1);
  13. </script>
  15. <p>Internet Explorer 8 或更早的版本不支持 lastIndexOf()。</p>
  17. </body>
  18. </html>
运行一下

所有浏览器都支持 lastIndexOf()，除了 Internet Explorer 8 或更早的版本：

方法
lastIndexOfYes9.0YesYesYes
语法
  1. array.lastIndexOf(item, start)
item必需。要检索的项目。
start可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

数组 find() 方法

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

这个例子查找（返回）大于 18 的第一个元素的值：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 find()</h1>
  7. <p id="demo">
  9. <script>
  10. var numbers = [4, 9, 16, 25, 29];
  11. var first = numbers.find(myFunction);
  13. document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;
  15. function myFunction(value, index, array) {
  16.   return value > 18;
  17. }
  18. </script>
  20. </body>
  21. </html>
运行一下

请注意此函数接受 3 个参数：

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

老旧的浏览器不支持 find()。下面列出了完全支持此方法的首个浏览器版本：

方法
find451225832

数组 findIndex() 方法

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

下面例子查找大于 18 的第一个元素的索引：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组 findIndex()</h1>
  7. <p id="demo">
  9. <script>
  10. var numbers = [4, 9, 16, 25, 29];
  11. var first = numbers.findIndex(myFunction);
  13. document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;
  15. function myFunction(value, index, array) {
  16.   return value > 18;
  17. }
  18. </script>
  20. </body>
  21. </html>
运行一下

请注意此函数接受 3 个参数：

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

老旧的浏览器不支持 findIndex()。下面列出了完全支持此方法的首个浏览器版本：

方法
findIndex451225832
JavaScript 数组排序
JavaScript 日期

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML