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(含)以上