遍历数组的方法和数组的遍历方法(3+10种)（下）

于 2022-11-04 17:40:53 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_49602426/article/details/127693039
版权
本文介绍了JavaScript中遍历数组的10种方法，包括forEach、map、filter、some、every、reduce、find、findIndex、indexOf和lastIndexOf。详细阐述了每种方法的用途、用法和输出结果，帮助理解数组遍历的各种场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

简介

接上回已经把遍历数组的方法说了，那么这里我们就来瞧一瞧数组的遍历方法
回顾一下什么是数组的遍历方法，数组的遍历方法就是数组的实例方法中可遍历数组元素的：

forEach()、map()、filter()、some()、every()、reduce()、find()、findIndex()、indexOf()、lastIndexOf()

数组的遍历方法

方法返回值是否改变原数组是否检测空数组能否链式调用是否触发实时视图更新
forEach()无否否否否
map()映射返回新数组否否可以否
filter()过滤器返回新数组否否可以可以
some()返回布尔值否否否否
every()返回布尔值否否否否
reduce()返回运算结果否直接报错可以否
find()返回元素否否可以否
findIndex()返回索引否否否否
indexOf()返回索引否否否否
lastIndexOf()返回索引否否否否
  • 空数组和数组元素含有空值是不一样的！

1. forEach()

说明：

按升序为数组中含有效值的每一项执行一次 回调函数，那些已删除或者未初始化的项将被跳过，回调函数里面可以依次传入数组的值、索引、数组本身（索引和数组本身都是可选填，下面的如果没有特别说明都是如此）

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        arr.forEach((item, key, arr) => {
            console.log(item, key, arr);
            item += 1
            key += 1
            console.log(item, key, arr);
        });

        console.log('========');
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , undefined, 123]
        arr1.forEach((item, key, arr) => {
            console.log(item, key, arr);
        });

输出：

2. map()映射遍历

说明：

创建一个新数组，数组中的元素为原始数组元素调用函数处理后的值，原数组不变，map()可以进行链式调用。

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let map1 = arr.map((item, key, arr) => {
            item += 1
            return item
        });
        console.log(map1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , undefined, 123]
        let map2 = arr1.map((item, key, arr) => {
            item += 1
            console.log(item, key, arr);
            return item
        });
        console.log(map2);
        console.log(arr1);
        console.log('========');

        // 箭头回调简写
        let map3 = arr1.map(key => key += 1);
        console.log(map3);

输出：

3. filter()过滤器遍历

说明：

创建一个新数组，其包含通过所提供函数实现的测试的所有元素，意思就是为数组中的每个元素都调用一次回调函数，并利用所有使得回调函数返回 true 或等价于 true 的值的元素创建一个新数组，原数组不变。

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let filter1 = arr.filter((item, key, arr) => {
            item += 1
            return item
        });
        console.log(filter1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , undefined, 123]
        let filter2 = arr1.filter((item, key, arr) => {
            item += 1
            console.log(item, key, arr);
            return item
        });
        console.log('========');
        console.log(filter2);
        console.log(arr1);
        console.log('========');

        // 箭头回调简写
        let filter3 = arr1.filter(key => key += 1);
        console.log(filter3);

输出：

4. some()

说明：

判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true，有true则true。一般多用于做判断是否有存在满足条件的。

  • 如果用一个空数组进行测试，在任何情况下它返回的都是false。

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let some1 = arr.some((item, key, arr) => {
            return item > 519
        });
        console.log(some1);

        let some2 = arr.some(item => item > 520);
        console.log(some2);

        let arr1 = ['wtf', , '', undefined, 123]
        let arr2 = []

        function checkItem(arr, item) {
            return arr.some(val => item === val)
        }

        console.log('========');
        console.log(checkItem(arr1, ));
        console.log(checkItem(arr1, ''));
        console.log(checkItem(arr1, undefined));

        console.log('========');
        console.log(checkItem(arr2, ));
        console.log(checkItem(arr2, ''));
        console.log(checkItem(arr2, undefined));

        console.log('========');
        console.log(arr);
        console.log(arr1);

输出：

5. every()

说明：

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true，有false则false。一般多用于判断是否少了什么的。

  • 若收到一个空数组，此方法在任何情况下都会返回 true。

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let every1 = arr.every((item, key, arr) => {
            return item < 520
        });
        console.log(every1);

        let every2 = arr.every(item => item < 521)
        console.log(every2);

        let arr1 = ['wtf', , '', undefined, 123]
        let arr2 = []

        function checkItem(arr, item) {
            return arr.every(val => item === val)
        }

        console.log('========');
        console.log(checkItem(arr1, ));
        console.log(checkItem(arr1, ''));
        console.log(checkItem(arr1, undefined));

        console.log('========');
        console.log(checkItem(arr2, ));
        console.log(checkItem(arr2, ''));
        console.log(checkItem(arr2, undefined));


        console.log('========');
        console.log(arr);
        console.log(arr1);

输出：

6. reduce()迭代（累加器）

说明：

对数组中的每个元素按顺序（升序）执行一个由您提供的reducer函数，将其结果汇总为单个返回值，不会改变原数组。
参数依次为：(自定义函数运算的值，数组元素，索引值，原数组)

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let reduce1 = arr.reduce((val, item, key, arr) => {
            console.log(val, item, key, arr);
            return val + item
        });
        console.log(reduce1);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123]
        let reduce2 = arr1.reduce((val, item, key, arr) => {
            console.log(val, item, key, arr);
            return val + item
        });
        console.log(reduce2);
        console.log('========');

        let arr2 = []
        let reduce3 = arr2.reduce((val, item, key, arr) => {
            console.log(val, item, key, arr);
            return val + item
        });
        console.log(reduce3);

输出：

7. find()

说明：

该方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。只要找到满足条件的就会停止继续遍历。在第一次调用回调函数时会确定元素的索引范围，注意回调函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。

  • find()只能返回值，如果需要找到第一个满足条件的索引只能用findIndex()

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let find1 = arr.find((item, key, arr) => {
            console.log(item, key, arr);
            return item < 521
        });
        console.log(find1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let find2 = arr1.find((item, key, arr) => {
            console.log(item, key, arr);
            return item > 3
        });
        console.log(find2);
        console.log('========');

        let arr2 = []
        let find3 = arr2.find(item => item);
        console.log(find3);

输出：

8. findIndex()

说明：

该方法返回数组中满足提供的测试函数的第一个元素的索引，若没有找到对应元素则返回 -1。只要找到满足条件的就会停止继续遍历。在第一次调用回调函数时会确定元素的索引范围，在稀疏数组中，即使对于数组中不存在的条目的索引也会调用回调函数。

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let findIndex1 = arr.findIndex((item, key, arr) => {
            console.log(item, key, arr);
            return item > 519
        });
        console.log('========');
        console.log(findIndex1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let findIndex2 = arr1.findIndex((item, key, arr) => {
            console.log(item, key, arr);
            return item === ''
        });
        console.log(findIndex2);
        console.log('========');

        let arr2 = []
        let findIndex3 = arr2.findIndex(item => item);
        console.log(findIndex3);

输出：

9. indexOf()

说明：

该方法返回在数组中从前往后查找首个被找到的元素在数组中的索引位置，如果不存在，则返回 -1。
传参依次为：(需要找到的元素, 开始查找的位置（可省略）)

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let indexOf1 = arr.indexOf(520, 0);
        console.log(indexOf1);
        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let indexOf2 = arr1.indexOf(undefined, 0);
        console.log(indexOf2);

        let arr2 = []
        let indexOf3 = arr2.indexOf('');
        console.log(indexOf3);

输出：

10. lastIndexOf()

说明：

该方法返回在数组中从后往前查找首个被找到的元素在数组中的索引位置，如果不存在，则返回 -1。
传参依次为：(需要找到的元素, 开始查找的位置（可省略）)

使用：

        let arr = [1, 2, 4, 3, 520, 6]
        let lastIndexOf1 = arr.lastIndexOf(520, 0);
        console.log(lastIndexOf1);
        console.log(arr.lastIndexOf(520, -2));
        console.log(arr.lastIndexOf(520, -3));
        console.log(arr.lastIndexOf(1, -6));

        console.log(arr);
        console.log('========');

        let arr1 = ['wtf', , '', undefined, 123, 5]
        let lastIndexOf2 = arr1.lastIndexOf('');
        console.log(lastIndexOf2);

        let arr2 = []
        console.log(arr2.lastIndexOf());

输出：

荧惑
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值