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

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

遍歷方法一般如下：

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

數據處理可以不同步運行

數據處理可以不按順序進行


具體方法
可以利用定時器去優化遍歷數組，讓遍歷異步進行，這樣就不會阻塞下面代碼的執行，而且也可以正常遍歷。具體代碼如下：
function chunk (data) {
    setTimeout(function() {
        processData(data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}
上面方法主要是利用data.shift獲取數組中第一個元素的值,對這個值執行數據處理方法，并檢查該數組是否有下一項，有的話利用callee繼續執行該函數。這里的延時時間是100ms，可以根據具體的業務場景調整。這項技術叫做數據分塊
方法優化
由于某些處理程序需要帶入上下文，因此可以將方法繼續優化，如下：
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);
打印的結果如下：

可以看出遍歷是異步執行，執行間隔為100ms。
注意：在這里是順序執行的，但是如果間隔為0ms，并且數據處理程序需要執行很長時間時，就有可能導致遍歷的方法不按順序執行另外，shift方法是直接對原數組進行操作，所以如果不想要修改原數組時，可以傳入原數組的拷貝。
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方法，生成了一個新數組，亦可以用extend等等，達到效果即可。
原文鏈接
the end.

3Fuyu