解决数组方法forEach使用return退出循环无效问题

在项目中有时候希望在使用forEach进行遍历数组元素,达到某一条件,想要退出循环,按照正常方法进行书写,

    <script>
        const arr = [1, 2, 3, 4, 5, 6]
        arr.forEach(item => {
            console.log(item)
            if (item === 3) {
                return
            }
        })
    </script>

代码执行结果如下

此时发现并不会退出,依然会对整个数组进行遍历

那么如何使用return退出循环并返回我们想要的数据呢?

使用步骤

1. 创建一个立即执行函数
2. 在数组方法外定义一个变量,用于存放返回的数据
3. 使用return将保存的数据返回给我们

    <script>
        console.log((function () {
            let arr = [1, 2, 3, 4, 5]
            let temp = ""
            arr.forEach(item => {
                if (item == 3) {
                    temp = item
                }
            })
            return temp

        })())
    </script>

代码执行结果如下

这样就可以顺利的拿到我们想要的数据啦

总结:

forEach 无法在所有元素都传递给调用的函数之前终止遍历 / 在forEach方法里 return 无效。且不会有返回值