JavaScript——大数组的合并问题及不同数组合并方法的探究

JavaScript——大数组的合并问题及不同数组合并方法的探究

最近在处理模型数据的时候出现了一个问题，当合并不同模型的vertex等数据的时候，从网上查了查都说Array.prototype.push()这个好，结果我使用了这个方法却报错了，后来改用concat才成功运行，实践出真知，所以要写一篇文章来记录测试不同的数组合并方式的快慢(其实是写代码写的头疼，放松一下)。

测试数据

let arr1=arr2=arr3=arr4=arr5=arr6=[];
let arrF1=arrF2=arrF3=arrF4=arrF5=arrF6=[];

for (let index = 0; index < 20000000; index++) {
  arr1.push(index);
  arrF1.push(Math.random()*index);
}
arr4=[...arr1];
arrF4=[...arrF1];
for (let index = 0; index < 1000000; index++) {
  arr2.push(index);
  arrF2.push(Math.random()*index);
}
arr5=[...arr2];
arrF5=[...arrF2];
arr3.push(111102);
arrF3.push(0.655468748);
arr6=[...arr3];
arrF6=[...arrF3];

Array.prototype.push.apply()

测试方法

function applyTest(a,b) {
  const start = (new Date()).getTime();
  a = a.push.apply(a,b);
  const end = (new Date()).getTime();
  console.log('apply time:', end - start);
}

测试结果

报RangeError: Maximum call stack size exceeded错误,十几二十个的长度应该可以用，懒得测了，浪费了我很长时间，还以为是自己的问题，记仇中…

Array.prototype.concat()

function concatTest(a,b) {
  const start = (new Date()).getTime();
  a = a.concat(b);
  const end = (new Date()).getTime();
  console.log('concat time:', end - start);
}

// concatTest(arr1,arr2);//181ms
// concatTest(arr5,arr4);//158ms

// concatTest(arr1,arr3);//159ms
// concatTest(arr6,arr4);//161ms

// concatTest(arrF1,arrF2);//128ms
// concatTest(arrF5,arrF4);//127ms

// concatTest(arrF1,arrF3);//129ms
// concatTest(arrF6,arrF4);//118ms

拓展运算符

function expandTest(a,b) {
  const start = (new Date()).getTime();
  a = [...a,...b];
  const end = (new Date()).getTime();
  console.log('expand time:', end - start);
}

// expandTest(arr1,arr2);//837ms
// expandTest(arr5,arr4);//657ms

// expandTest(arr1,arr3);//666ms
// expandTest(arr6,arr4);//939ms

// expandTest(arrF1,arrF2);//539ms
// expandTest(arrF5,arrF4);//615ms

// expandTest(arrF1,arrF3);//530ms
// expandTest(arrF6,arrF4);//625ms

Array.prototype.forEach()

function forEachTest(a,b) {
  const start = (new Date()).getTime();
  b.forEach(element=>a.push(element));
  const end = (new Date()).getTime();
  console.log('forEach time:', end - start);
}

// forEachTest(arr1,arr2);//566ms
// forEachTest(arr5,arr4);//589ms

// forEachTest(arr1,arr3);//569ms
// forEachTest(arr6,arr4);//591ms


// forEachTest(arrF1,arrF2);//571ms
// forEachTest(arrF5,arrF4);//606ms

// forEachTest(arrF1,arrF3);//540ms
// forEachTest(arrF6,arrF4);//598ms

结论

• Array.prototype.concat()是测试中最快的方法，无论是浮点型还是整型。

• Array.prototype.forEach()是在测试中第二快的方法，但是网上有人说这个方法是最快的因为没有产生新数组，但是在大数组合并中并不是这样。

• 拓展运算符是写起来最舒服的，因为比较简洁，但是在测试中他是能测出数据中最慢的的一个方法，语法糖好用是好用，但是也需要注意效率问题。

• Array.prototype.push.apply()是最垃圾的了，大数组的合并中完全没法用，网上还说是最好的一个方法。

• 同时在测出的数据中，可以发现如下两个个特点:

  • 浮点型的数组合并比整型整体要快
  • 小数组去合并大数组普遍要比大数组合并小数组要快

• 但是因为测试次数有限，以上仅为个人观点，其实除了拓展运算符这个方法外，其他的相差也不到100ms。

• 最重要的一点:网上人云亦云的太多了，影响办公效率，建议直接英文搜，结果稍微好一点

结束

有什么意见或者建议，欢迎加群交流！！！