一篇文章带你了解JavaScript数组迭代方法

在数组中的每个元素上一次操作的方法，称为迭代方法。数组的迭代方法与循环紧密相关。

目前创新互联公司已为成百上千家的企业提供了网站建设、域名、网站空间、网站运营、企业网站设计、殷都网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、方法

1. Array.forEach()

forEach()方法对数组的每个元素执行一次提供的函数（一个回调函数）。可以使用[forEach()将数组中的每个元素打印到文档。

例1：

var fruits = ["Apple", "Mango", "Banana", "Orange"];
     var result = document.getElementById("result");


     fruits.forEach(function(element, index, array) {
        result.innerHTML += index + ": " + element + "
";
});

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

例 2 ：

由于2个参数（索引，数组）是可选的。

var fruits = ["Apple", "Mango", "Banana", "Orange"];
            var result = document.getElementById("result");


            fruits.forEach(function(element) {
                result.innerHTML += element + "
";
            });

2. Array.map()

map()方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素。

注意：

map() 不会对空数组进行检测。

例1：从每个值乘以2的元素创建一个新数组。

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

例2：

由于2个参数（索引，数组）是可选的：

var nums1 = [1, 5, 20, 14, 55, 16];
    var nums2 = nums1.map(twice);


   function twice(element) {
        return (element * 2);
    }

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

3. Array.filter()

filter()是JavaScript中Array的常用操作，用于把Array的某些元素过滤掉，然后返回剩下的元素。其主要原理是 filter会把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。

例：使用值等于或大于18的元素创建一个新数组。

var age = [1, 30, 39, 29, 10, 13];
     var val = age.filter(isAdult);


     function isAdult(element, index, array) {
           return element >= 18;
}

由于2个参数（索引，数组）是可选的，因此例：可以跳过它们：

例：

var age = [1, 30, 39, 29, 10, 13];
    var val = age.filter(isAdult);


    function isAdult(element) {
        return element >= 18;
}

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

4. Array.reduce()

reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

这在数字中很常见，例如找到数组中所有数字的总和。

例：

var nums = [10, 20, 30, 40, 50];
    var sum = nums.reduce(getTotal);


    function getTotal(x, y) {
       return (x + y);
    }

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

5. Array.find()

find()方法返回通过给定检测的数组中的第一个值。

将找到等于或大于18的第一个元素：

例：

var num = [1, 30, 39, 29, 10, 13];
    var val = num.find(myFunc);


    function myFunc(element) {
       return element >= 18;
    }

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

6. Array.findIndex()

findIndex()方法返回通过给定检测的数组中的第一个索引值。

例：将找到等于或大于18的第一个元素的索引值。

var num = [1, 30, 39, 29, 10, 13];
    var val = num.findIndex(myFunc);


    function myFunc(element) {
        return element >= 18;
    }

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

7. Array.every()

every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供检测）。

例：检查所有数组值是否等于或大于18。

var nums = [1, 30, 39, 29, 10, 13];
    var bool = nums.every(function (element) {
        return element >= 18;
    });


    document.getElementById("result").innerHTML = bool;

注：

该函数带有3个参数：元素值（必填），元素索引（可选），数组本身（可选）。

二、总结

本文基于JavaScript基础，介绍了数组7种迭代方法。每一种都采用案例加运行效果图展示的方式，让读者能够更容易理解。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望对你学习有帮助。

当前名称：一篇文章带你了解JavaScript数组迭代方法
转载来源：http://www.shufengxianlan.com/qtweb/news23/110473.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容