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

简介

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

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());