数组遍历高效解析

前言

程序员在开发中会频繁的使用到数组遍历，熟练掌握数组遍历的各种方法能提高日常工作的开发效率，使得开发更加快捷、方便。

简介

数组遍历的方法多种多样，在开发中选择适当的遍历方法可使开发效率更高效、代码更整洁美观。

数组遍历的方法

1. for
2. map
3. forEach
4. every
5. some
6. filter
7. for…of
8. reduce
9. reduceRight
10. find
11. findIndex
12. keys
13. values
14. entries

遍历方法简介及使用

for

说明

• 使用临时变量，将长度缓存下来，避免重复获取数组长度，当数组较大时优化效果才能更明显。

Demo1

通过封装函数处理返回需要的数据。

	forLoop = (arr) => {
        for (let i = 0; i < arr.length; i++) {
            // TODO 做数组操作
            return arr[i];
        }
    }
    let forVariate = forLoop([2, '3', 'hello']);
    console.log(forVariate); // 2

Demo2

简单的数组遍历

	let arr = [2, '3', 'hello'];
    for (let i = 0; i < arr.length; i++) {
        // TODO1 : 打印数组的每一项
        console.log(arr[i]); // 2 3 hello

        // TODO2 : 打印数组中下表为1的那一项
        if (i == 1) {
            console.log(arr[1]); // 3
        }

        // TODO.....
    }

打印结果：

map

说明：

• 改变原数组。

Demo1

说明：使用map遍历数组。

	let arr = ['1', 2, 2, 4, 5, 'like'];
    arr.map((item, index, originArr) => {
        console.log(`值：${item} -- 下标：${index} -- 原数组:${originArr}`);
    })

打印结果：

Demo2

说明：使用map会改变原数组。

	let arr = [
        {
            name:'lily',
            age:'12'
        },
        {
            name:'Mike',
            age:'18'
        }
    ];
    arr.map((item,index) => {
        if (index == '1') {
            item.age = '100';
        }
    })
    console.log(arr);

打印结果：

forEach

说明：使用forEach遍历。

	let arr = ['a', 'b', 'c', 'd'];
    arr.forEach((item, index, originArr) => {
        console.log(`值：${item} -- 下标：${index} -- 原数组：${originArr}`)
    })

打印结果：

Demo2

说明:forEach遍历改变原数组。

	let arr = [
        {
            name: 'lily',
            age: '12'
        },
        {
            name: 'Mike',
            age: '18'
        }
    ];
    arr.forEach((item, index) => {
        if (index == '1') {
            item.age = '100';
        }
    })
    console.log(arr);

打印结果：

every

说明：
解释：every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。他返回一个布尔值。
语法：arr.every(callback[,thisArg])
参数：
callback：用来测试每个元素的函数，他可以接收三个参数：
element：用于测试的当前值。
index：可选。用于测试的当前值得索引。
array：可选。调用every的当前数组。
thisArg：执行callback时使用的this值。
返回值:如果回调函数的每一次返回都为truthy值，返回true，否则返回false。
注意：
1.若收到一个空数组，此方法在一切情况下都会返回true。
2.every()不会改变原数组。

Demo1

说明：使用every遍历originalArr，判断数组的value值是否等于橙子的value值（1044A2100000000ENEXD）。

	let originalArr = [
        {
            label: "苹果",
            parentValue: "-1",
            value: "1044A21000000006BNS6"
        },
        {
            label: "香蕉",
            parentValue: "-1",
            value: "1044AA1000000000006X"
        },
        {
            label: "橘子",
            parentValue: "-1",
            value: "1044AA1000000000007D"
        },
        {
            label: "榴莲",
            parentValue: "-1",
            value: "1044A21000000009CBVI"
        },
        {
            label: "橙子",
            parentValue: "-1",
            value: "1044A2100000000ENEXD"
        },
        {
            label: "西瓜",
            parentValue: "-1",
            value: "1044A510000000331G9V"
        }
    ];
    let newArr1 = originalArr.every(item => item.value == '1044A2100000000ENEXD');
    console.log(newArr1); // false

打印结果：

Demo2

说明：用every遍历originalArr，判断数组的value值是否等于橙子的value值（1044A2100000000ENEXD）或 榴莲的value值（1044A21000000009CBVI）。

	let originalArr = [
        {
            label: "苹果",
            parentValue: "-1",
            value: "1044A21000000006BNS6"
        },
        {
            label: "香蕉",
            parentValue: "-1",
            value: "1044AA1000000000006X"
        },
        {
            label: "橘子",
            parentValue: "-1",
            value: "1044AA1000000000007D"
        },
        {
            label: "榴莲",
            parentValue: "-1",
            value: "1044A21000000009CBVI"
        },
        {
            label: "橙子",
            parentValue: "-1",
            value: "1044A2100000000ENEXD"
        },
        {
            label: "西瓜",
            parentValue: "-1",
            value: "1044A510000000331G9V"
        }
    ];
    let newArr2 = originalArr.every(item => {
        return item.value == '1044A2100000000ENEXD' || item.value == '1044A21000000009CBVI';
    })
    console.log(newArr2); // false 
    // 或
    let newArr3 = originalArr.every(item => item.value == '1044A2100000000ENEXD' || item.value == '1044A21000000009CBVI')
    console.log(newArr2); // false

打印结果：

Demo3

说明：用every遍历originalArr,判断数组的每一项的value值是否存在。

	let newArr4 = originalArr.every(item => item.value);
    console.log(newArr4); // true

打印结果：

some

说明：

Demo1

说明

filter

说明：

for…of

说明：

reduce

说明：

reduceRight

说明：

find

说明：
1.find遍历，不会改变原数组。
2.find对于空数组，函数是不会执行的。
3.如果没有符合条件的元素返回 undefined。

Demo1

find可作判断条件的应用。

	var arr = [
        {
            name: "lily",
            age: '15',
            birth: '2018',
        },
        {
            name: "lily",
            age: '18',
            birth: '2019',
        },
        {
            name: "Mike",
            age: '18',
            birth: '2019',
        }
    ];

    if (arr.find(({ name, birth }) => name == 'Mike')) {
        console.log('YES'); // YES
    }

    if (arr.find(({ name, birth }) => name == 'Mike1')) {
        console.log('YES');
    } else {
        console.log('NO'); // NO
    }

    let status1 = arr.find(({ name, birth }) => birth == '2018');
    console.log(status1); // {name: "lily", age: "15", birth: "2018"}

    let status2 = arr.find(({ name, birth }) => name == 'lily1');
    console.log(status2); // undefined

	console.log(typeof arr.find(({ name }) => name == 'Mike')); // object

打印结果：

后续未完,请继续关注,Thanks!☺