针对
当js对数据量庞大的数组执行遍历时，会相当耗费时间和内存，因为js是单线程，因此在这个循环执行完之前会一直阻塞后面的代码执行，从而影响页面的渲染，逻辑绑定等等。这里讲下如何处理大数据的遍历的方法。
原始方法
遍历方法一般如下：
for(let i=0;i<data.length;i++) {
processData(data[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
