JavaScript，for循环效率测试，不同遍历循环测试，数组添加效率测试，大数组拼接测试，for循环遍历修改 和 string replace效率

for循环估计是大家平时用到的最多的循环遍历了，一般情况下大家都会使用编程软件写一个for敲一下Tab，自动生成for循环结构

for (let index = 0; index < array.length; index++) {
        const element = array[index];
        
    }

应为for循环用的比较多，那有没有什么方法能提高一下for循环的效率，观察主体结构，index没什么好说的，循环的索引，中间的<是循环跳出的条件，逻辑运算符，也不能动，只能向array.length下手了，我们知道每次循环的时候都需要用index和array.length比较，而获取array.length时，还需要计算一下数组元素的长度，这就导致了每次循环都要计算一次，所以我们可以提前把这个长度计算出来，存入变量，用的时候直接来取。

let arr = [];
//创建一个数组，提供测试
function arrCreat() {
    for (let index = 0; index < 1000000; index++) {
        arr.push(false);
    }
}
arrCreat();
//不提前计算长度，遍历数组
function forNolength(arr) {
    for (let index = 0; index < arr.length; index++) {
        if(arr[index].boolean === false) {
            arr[index].boolean = true;
        }
    }
}
console.time('NoNoNo1');
forNolength(arr);
console.timeEnd('NoNoNo1');
//提前计算长度，遍历数组
function forAndLength(arr) {
    for (let index = 0, length = arr.length;index < length; index++) {
        if(arr[index].boolean === false) {
            arr[index].boolean = true;
        }
    }
}
console.time('forAndLength1');
forAndLength(arr);
console.timeEnd('forAndLength1');

查看遍历时间（NoNoNo表示没有提前计算长度，forAndLength表示没有提前计算长度）

在这里插入图片描述

第二次

在这里插入图片描述

for系列遍历循环测试

• for
• forEach
• for in
• for of
• map
• filter

function nativeFor(array) {
    for (let index = 0, length = array.length; index < length; index++) {
        if(arr[index].boolean === false) {
            arr[index].boolean = true;
        }
    }
}
console.time('nativeFor');
nativeFor(arr);
console.timeEnd('nativeFor');
function forEach(array) {
    array.forEach((element) => {
        if (element.boolean === false) {
            element.boolean = true;
        }
    });
}
console.time('forEach');
forEach(arr);
console.timeEnd('forEach');
function forIn(array) {
    for (const key in array) {
        if (array[key].boolean === false) {
            array[key].boolean = true;
        }
    }
}
console.time('forIn');
forIn(arr);
console.timeEnd('forIn');
function forOf(array) {
    for (const iterator of array) {
        if (iterator.boolean === false) {
            iterator.boolean = true;
        }
    }
}
console.time('forOf');
forOf(arr);
console.timeEnd('forOf');
function forMap(array) {
    array.map((element) => {
        if (element.boolean === false) {
            element.boolean = true;
        }
    });
}
console.time('forMap');
forMap(arr);
console.timeEnd('forMap');
function filter(array) {
    array.filter((item) => {
        return item === false;
    });
}
console.time('filter');
filter(arr);
console.timeEnd('filter');

运行结果

在这里插入图片描述

数组添加效率比较

let baseArrStr = ['123', '456', '789'];
function concatArrFunc() {
    let tempArr = [];
    for (let index = 0; index < 10000; index++) {
        tempArr = tempArr.concat(baseArrStr);
    }
}
console.time('concatArrFunc');
concatArrFunc(arr);
console.timeEnd('concatArrFunc');

function pushArrFunc() {
    let tempArr = [];
    for (let index = 0; index < 10000; index++) {
        for (let index1 = 0, length = baseArrStr.length; index1 < length; index1++) {
            tempArr.push(baseArrStr[index1]);
        }
    }
}
console.time('pushArrFunc');
pushArrFunc(arr);
console.timeEnd('pushArrFunc');

function extendArrFunc() {
    let tempArr = [];
    for (let index = 0; index < 10000; index++) {
        tempArr.push(...baseArrStr);
    }
}
console.time('extendArrFunc');
extendArrFunc(arr);
console.timeEnd('extendArrFunc');

function applyArrFunc() {
    let tempArr = [];
    for (let index = 0; index < 10000; index++) {
        Array.prototype.push.apply(tempArr, baseArrStr);
    }
}
console.time('applyArrFunc');
applyArrFunc(arr);
console.timeEnd('applyArrFunc');

在这里插入图片描述

• 两个大数组拼接，看看执行效率会有什么变化

let arr1 = [];
let arr2 = [];
function arrCreat() {
    for (let index = 0; index < 100000; index++) {
        arr1.push('123');
        arr2.push('123');
    }
}
arrCreat();

function concatArrFunc(arr1, arr2) {
    arr1 = arr1.concat(arr2);
}
console.time('concatArrFunc');
concatArrFunc(arr1, arr2);
console.timeEnd('concatArrFunc');



function pushArrFunc(arr1, arr2) {
    for (let index = 0, length = arr2.length; index < length; index++) {
        arr1.push(arr2[index]);
    }
}
console.time('pushArrFunc');
pushArrFunc(arr1, arr2);
console.timeEnd('pushArrFunc');



function extendArrFunc(arr1, arr2) {
    arr1.push(...arr2);
}
console.time('extendArrFunc');
extendArrFunc(arr1, arr2);
console.timeEnd('extendArrFunc');



function applyArrFunc(arr1, arr2) {
    Array.prototype.push.apply(arr1, arr2);
}
console.time('applyArrFunc');
applyArrFunc(arr1, arr2);
console.timeEnd('applyArrFunc');

运行结果如下

在这里插入图片描述