摘要：針對當(dāng)對數(shù)據(jù)量龐大的數(shù)組執(zhí)行遍歷時，會相當(dāng)耗費時間和內(nèi)存，因為是單線程，因此在這個循環(huán)執(zhí)行完之前會一直阻塞后面的代碼執(zhí)行，從而影響頁面的渲染，邏輯綁定等等。這里講下如何處理大數(shù)據(jù)的遍歷的方法。

當(dāng)js對數(shù)據(jù)量龐大的數(shù)組執(zhí)行遍歷時，會相當(dāng)耗費時間和內(nèi)存，因為js是單線程，因此在這個循環(huán)執(zhí)行完之前會一直阻塞后面的代碼執(zhí)行，從而影響頁面的渲染，邏輯綁定等等。這里講下如何處理大數(shù)據(jù)的遍歷的方法。

遍歷方法一般如下：

for(let i=0;i
但是當(dāng)面對龐大的數(shù)組時，上面代碼執(zhí)行的時間可能會相當(dāng)長，下面來優(yōu)化這個數(shù)組。
前提
優(yōu)化的前提是，需要滿足下面兩個條件

數(shù)據(jù)處理可以不同步運行

數(shù)據(jù)處理可以不按順序進(jìn)行


具體方法
可以利用定時器去優(yōu)化遍歷數(shù)組，讓遍歷異步進(jìn)行，這樣就不會阻塞下面代碼的執(zhí)行，而且也可以正常遍歷。具體代碼如下：
function chunk (data) {
    setTimeout(function() {
        processData(data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}
上面方法主要是利用data.shift獲取數(shù)組中第一個元素的值,對這個值執(zhí)行數(shù)據(jù)處理方法，并檢查該數(shù)組是否有下一項，有的話利用callee繼續(xù)執(zhí)行該函數(shù)。這里的延時時間是100ms，可以根據(jù)具體的業(yè)務(wù)場景調(diào)整。這項技術(shù)叫做數(shù)據(jù)分塊
方法優(yōu)化
由于某些處理程序需要帶入上下文，因此可以將方法繼續(xù)優(yōu)化，如下：
function chunk (data, context) {
    setTimeout(function() {
        processData.call(context, data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}
context 可以傳也可以不傳，舉一個具體例子：
let arr = [1,2,3,4,5,6,7,8,9,10],
    nowTime = +new Date();

function processData (data) {
    console.log(data, +new Date() - nowTime);
}

function chunk (data, context) {
    setTimeout(function() {
        processData.call(context, data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

chunk(arr);
打印的結(jié)果如下：

可以看出遍歷是異步執(zhí)行，執(zhí)行間隔為100ms。
注意：在這里是順序執(zhí)行的，但是如果間隔為0ms，并且數(shù)據(jù)處理程序需要執(zhí)行很長時間時，就有可能導(dǎo)致遍歷的方法不按順序執(zhí)行另外，shift方法是直接對原數(shù)組進(jìn)行操作，所以如果不想要修改原數(shù)組時，可以傳入原數(shù)組的拷貝。
let arr = [1,2,3,4,5,6,7,8,9,10],
    nowTime = +new Date();

function processData (data) {
    console.log(data, +new Date() - nowTime);
}

function chunk (data, context) {
    setTimeout(function() {
        processData.call(context, data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

chunk(arr.concat());
這里利用了concat方法，生成了一個新數(shù)組，亦可以用extend等等，達(dá)到效果即可。
原文鏈接
the end.

3Fuyu