遍历数组的方法及其区别

遍历数组

1、forEach方法

用来调用数组的每个元素，将元素传给回调函数。

优缺点：

• 不会返回新数组;
• 无法中途跳出循环，
• return或break无效；
• 会跳过数组的空位；
• 不会改变原始数组。

        let arr = [0, ,4,6,8];
        let sum = 0;
        const str = arr.forEach((item,index,arr) =>{
            sum += item;
            console.log("sum的值为：",sum); //0 4 10 18
        })
        console.log(sum);// 18
        console.log(str); //undefined

2、filter方法

filter的使用和forEach很像，filter为数组中的每个元素调用一次callback函数，并利用所有使得callback返回为true的值的元素来创建一个新数组。

优缺点：

• 返回新数组；
• 跳过数组的空位；
• 不会改变原始数组；

        let arr = [0, ,4,6,8];
        const str = arr.filter((item) => {
            console.log(item); // 0 4 6 8
            return item >1;
        })
        console.log(str); // [4, 6, 8]

2、map方法

map即是 “映射”的意思 用法与forEach 相似。

优缺点：

• 会跳过空位，但会保留这个值；
• 支持return，返回新数组；
• 不会改变原始数组。

        // 没有return的时候
        let arr = [0, ,4,6,8];
        let sum = 0;
        const str = arr.map((item,index,arr) => {
            sum += item;
            console.log(sum); // 0 4 10 18
        });

        console.log(str); // [undefined, empty, undefined, undefined, undefined]


        // 有return的时候
        let arr = [0, ,4,6,8];
        let sum = 0;
        const str = arr.map((item,index,arr) => {
            sum += item;
            console.log(sum);  // 0 4 10 18
            return item/2;
        });
        console.log(str); // [0, empty, 2, 3, 4]

2、filter方法

filter的使用和forEach很像，filter为数组中的每个元素调用一次callback函数，并利用所有使得callback返回为true的值的元素来创建一个新数组。

优缺点：

• 返回新数组；
• 跳过数组的空位；
• 不会改变原始数组；

        let arr = [0, ,4,6,8];
        const str = arr.filter((item) => {
            console.log(item); // 0 4 6 8
            return item >1;
        })
        console.log(str); // [4, 6, 8]

3、for…of方法方法

map即是 “映射”的意思 用法与forEach 相似。

优缺点：

• 会跳过空位，但会保留这个值；
• 支持return，返回新数组；
• 不会改变原始数组。

        // 没有return的时候
        let arr = [0, ,4,6,8];
        let sum = 0;
        const str = arr.map((item,index,arr) => {
            sum += item;
            console.log(sum); // 0 4 10 18
        });

        console.log(str); // [undefined, empty, undefined, undefined, undefined]


        // 有return的时候
        let arr = [0, ,4,6,8];
        let sum = 0;
        const str = arr.map((item,index,arr) => {
            sum += item;
            console.log(sum);  // 0 4 10 18
            return item/2;
        });
        console.log(str); // [0, empty, 2, 3, 4]