js数组循环性能问题

js数组循环性能问题

1、研究循环方法有for、forEach、for in、forof、map。

2、数据：

let arr = [1,2,3];
arr[100000] = 100000;

4、公用方法提取

//获取当前时间，并将其转为时间戳
const getTimeFn =()=>{
            return (new Date()).getTime();
        }

//获取时间差的方法，fnName为遍历方法名称，backFn为传入执行的遍历方法，由于js是单线程，按顺序执行，故timer2 - timer1即为传入遍历数组方法的执行时间
const timeDiffFn = (fnName,backFn)=>{
            timer1 = getTimeFn();
            backFn();
            timer2 = getTimeFn();
            timeDiff = timer2 - timer1;
            console.log(`${fnName} : ${timeDiff}`)
        }

使用如下：

        timeDiffFn('for',()=>{
            for(let i=0;i<arr.length;i++){

            }
        });
        //输出结果，例如：for ： 48

5、只遍历数组，不做其他操作：

        let arr = [1,2,3]; arr[100000000] = 100000000;
        let timer1 = null,timer2 = null,timeDiff = null;
        const getTimeFn =()=>{
            return (new Date()).getTime();
        }
        const timeDiffFn = (fnName,backFn)=>{
            timer1 = getTimeFn();
            backFn();
            timer2 = getTimeFn();
            timeDiff = timer2 - timer1;
            console.log(`${fnName} : ${timeDiff}`)
        }
        timeDiffFn('for',()=>{
            for(let i=0;i<arr.length;i++){

            }
        });
        timeDiffFn('forEach',()=>{
            arr.forEach(element => {
                
            });
        });
        timeDiffFn('for in',()=>{
            for (let key in arr) {

            }
        });
        timeDiffFn('for of',()=>{
            for (let key of arr) {
                
            }
        });
        timeDiffFn('map',()=>{
            arr.map((key)=>{

            })
        });

在chrome浏览器的console下面跑出来的结果如下：

for ： 48

forEach : 1887

for in : 0

for of : 2144

map : 1824

6、在遍历方法中输出对应的值

由于在console中输出会设计到io操作,

        //调用如下，只做console
        timeDiffFn('for',()=>{
            for(let i=0;i<arr.length;i++){
                console.log(arr[i]);
            }
        });

当arr.length为10000时，let arr = [1,2,3]; arr[10000] = 10000;：

for：

1. 1
2. 2
3. 3
4. 【9997】 undefined
5. 10000
6. for : 692

forEach

1. 1
2. 2
3. 3
4. 10000
5. forEach : 0

for in，输出为key

1. 0
2. 1
3. 2
4. 10000
5. for in : 0

for of

1. 1
2. 2
3. 3
4. 【9997】 undefined
5. 10000
6. for : 738

map

1. 1
2. 2
3. 3
4. 10000
5. map : 1

7总结

在遍历数组的情况下，for方法的执行效率明显高于forEach、for of、map等，但如果数组中存在部分数据为定义的情况则情况会变得不一样，for循环回去执行每一次循环的操作，而forEach、for in、for of、map只会执行被定义了的数据项，从而执行的更快