js循环性能比较之for forEach map 跳出循环

我们经常会用到js的各种循环，掌握他们之间的区别和各个跳出循环的方法对性能优化有极大的帮助

1.性能比较 : for>forEach>map

• for :   for循环没有额外的函数调用栈和上下文，所以它的实现最为简单.
• forEach : 对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环.
• map: map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销.

2.跳出循环的方法

 2.1 for  :使用break

        for (let index = 0; index < 5; index++) {
            if(index>3){
                break;
            }
            console.log(index);// 0 1 2 3
        }

2.2 forEach / map : 使用try...catch

        try {
            [0,1,2,3,4,5].forEach(element => {
                if(element>3){
                    throw new Error('Irregular element')
                }
                console.log(element);// 0 1 2 3
            });
        } catch (error) {
            console.log(error.toString());//Error: Irregular element
        }

2.3 for of :使用break

        for (const ele of [0,1,2,3,4,5]) {
            if(ele>3){
                break;
            }
            console.log(ele);// 0 1 2 3
        }

3.相同效果的while循环

        const arr = [0,11,22,33,44,55];
        let i=0;
        while (arr[i]<=33) {
            console.log(arr[i]);// 0 11 22 33
            i++;
        }

 

补充概念：可迭代对象：

ES6中引入了 iterable 类型，Array Set Map String arguments NodeList 都属于 iterable， 他们特点就是都拥有 [Symbol.iterator] 方法，包含他的对象被认为是可迭代的 iterable。

判断是否是可迭代对象：

const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'function';

isIterable ('abc'); // true