但是當(dāng)面對(duì)龐大的數(shù)組時(shí)，上面代碼執(zhí)行的時(shí)間可能會(huì)相當(dāng)長(zhǎng)，下面來(lái)優(yōu)化這個(gè)數(shù)組。
前提
優(yōu)化的前提是，需要滿足下面兩個(gè)條件
數(shù)據(jù)處理可以不同步運(yùn)行
數(shù)據(jù)處理可以不按順序進(jìn)行
具體方法
可以利用定時(shí)器去優(yōu)化遍歷數(shù)組，讓遍歷異步進(jìn)行，這樣就不會(huì)阻塞下面代碼的執(zhí)行，而且也可以正常遍歷。具體代碼如下：
function chunk (data) {
setTimeout(function() {
processData(data.shift());
if (data.length > 0) {
setTimeout(arguments.callee, 100);
}
}, 100);
}
上面方法主要是利用data.shift獲取數(shù)組中第一個(gè)元素的值,對(duì)這個(gè)值執(zhí)行數(shù)據(jù)處理方法，并檢查該數(shù)組是否有下一項(xiàng)，有的話利用callee繼續(xù)執(zhí)行該函數(shù)。這里的延時(shí)時(shí)間是100ms，可以根據(jù)具體的業(yè)務(wù)場(chǎng)景調(diào)整。這項(xiàng)技術(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 可以傳也可以不傳，舉一個(gè)具體例子：
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í)行很長(zhǎng)時(shí)間時(shí)，就有可能導(dǎo)致遍歷的方法不按順序執(zhí)行另外，shift方法是直接對(duì)原數(shù)組進(jìn)行操作，所以如果不想要修改原數(shù)組時(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方法，生成了一個(gè)新數(shù)組，亦可以用extend等等，達(dá)到效果即可。
原文鏈接
the end.
3Fuyu
