Javascript中常见的数组遍历方法总结

数组遍历方法

1、for循环的使用

• 优化后的for循环，是用临时变量将长度缓存起来，避免了重复获取数组长度，当遍历的数组较长时，优化效果会比较明显。

    <script>
        var arr=[1,2,3,6,4,85]
        for (j = 0, len = arr.length; j < len; j++) {
            console.log(j)
        }
    </script>

2、forEach循环的使用

• forEach(function(currentValue, index, arr))方法是用来遍历数组，参数是一个回调函数，无返回值，对原数组无影响，不能使用break

    <script>
        // value ：数组中的元素，
        // index :对应的索引值
        // array : 当前元素所属的数组对象
        array.forEach((value, index, array) => {
            //执行代码
        })

        // 数组中有几项，回调函数就执行多少次
    </script>

正确使用for循环和forEach循环

• forEach循环是for循环的简化版

• 1.在数据长度固定且不需要计算的情况下，for循环的计算效率高于
  forEach

• 2.在数据比较复杂，且数组长度不固定的情况下，用forEach则更为好

• 3.forEach是函数，那么就存在函数作用域，而for循环则不存在函数作用域问题，因此在某些情况下则要自己权衡利弊了

3、map的使用（常用）

• map(function(currentValue, index, arr))方法是用来遍历数组，参数是一个回调函数，有返回值，返回值是一个利用回调函数处理之后的新数组，对原数组无影响，

    <script>
        // value ：数组中的元素，
        // index :对应的索引值
        // array : 当前元素所属的数组对象
        
        arr.map((value, index, array) => {

            //处理数据

            return '处理之后的数据'
        })

    </script>

4、filter的使用（常用）

• 循环数组，有返回值，返回一个新的过滤之后的数组

    <script>
    
        var arr = [73, 84, 56, 22, 100]
        var newArr = arr.filter(item => item > 80) //得到新数组 [84, 100]
        console.log(newArr)

    </script>

5、some()循环的使用（常用）

• 循环数组，检测到是否有某个值满足条件，有返回值true，否则返回false

    <script>
    let array = [1,2,3,4]
    let flag = array.some(item=>{

        return  item >1
    })
    console.log(flag) // true

    </script>

6、every() 循环的使用

• 循环数组，检测所有值是否都大于某个值。如果是就返回true,否则false

    <script>
        let array = [1, 2, 3, 4]
        let flag = array.some(item => {
            return item > 1
        })
        console.log(flag) // false

    </script>

• some和every的区别

• some循环，检测数据中是否有某个值满足这个条件，如果有，则返回true，如果都不满足否则返回false

• every循环，检测数组中是否每个值都满足这个条件，如果都满足，才返回true，否则任何一个不满足，就会返回false

7、find() 循环的使用

• find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

    <script>
          let array = [{
                name: '张三',
                gender: '男',
                age: 20
            },
            {
                name: '李四',
                gender: '男',
                age: 20
            }
        ]
        let flag = array.find(item => {
            return item.name === "张三"
        })
        console.log(flag) // {name: "张三", gender: "男", age: 20}

    </script>

8、findIndex() 的使用

• 对于数组中的每一个元素，findIndex 方法都会执行一次回调函数（利用升序索引），直到操作某个元素并且回调函数的返回值为true时。findIndex 方法将立即返回该回调函数返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。

findIndex 不会改变数组对象。

    <script>
        let array = [1, 5, 6, 9, 8]
        let flag = array.findIndex(item => {
            return item == 9
        })
        console.log(flag) // 打印结果为3 也即是9的索引值

    </script>

9、for of的使用

• for of 可以正确使用break、continue和return语句

    <script>

        //默认遍历元素
        for (var value of ['a', 'b']) {
                console.log(value);
        }

        // 还可以借助es6新增方法使用 entries()，keys()和values()


        for (let index of ['a', 'b'].keys()) {
            console.log(index);
        }
        // 0
        // 1

        for (let elem of ['a', 'b'].values()) {
            console.log(elem);
        }
        // 'a'
        // 'b'

        for (let [index, elem] of ['a', 'b'].entries()) {
            console.log(index, elem);
        }
        // 0 "a"
        // 1 "b"

    </script>

注意： 此外还有reduce()方法、reduceRight()方法，详情请查看文档 https://es6.ruanyifeng.com/

• 两种方法的区别是：

  • reduce()方法：reduce接受一个函数作为累加器，数组中的每个值将从左自右进行累加，最终返回一个值。此外函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组。

  • reduceRight()方法：功能和reduce()一样，都是对数组中的元素进行累加，不同的是从右往左进行累加。