连接N个数组的最有效方法是什么？

Question

在JavaScript中连接N个对象数组的最有效方法是什么？

数组是可变的,结果可以存储在其中一个输入数组中.

Answer 1

如果你连接两个以上的数组,那么concat()是方便和可能性能的方法.

var a = [1, 2], b = ["x", "y"], c = [true, false];
var d = a.concat(b, c);
console.log(d); // [1, 2, "x", "y", true, false];

为了连接两个数组,可以使用push接受包含要添加到数组的元素的多个参数的事实来将一个数组中的元素添加到另一个数组的末尾而不生成新数组.使用slice()它也可以代替使用,concat()但这样做似乎没有性能优势.

var a = [1, 2], b = ["x", "y"];
a.push.apply(a, b);
console.log(a); // [1, 2, "x", "y"];

在ECMAScript 2015及更高版本中,这可以进一步降低

a.push(...b)

但是,对于大型数组(大约100,000个成员或更多),将元素数组传递给push(使用apply()或使用ECMAScript 2015扩展运算符)的技术可能会失败.对于这样的数组,使用循环是一种更好的方法.有关详细信息,请参阅/sf/answers/1215767101/.

Answer 2

[].concat.apply([], [array1, array2, ...])

编辑:效率证明:http://jsperf.com/multi-array-concat/7

edit2:Tim Supinie在评论中提到这可能导致解释器超出调用堆栈大小.这可能取决于js引擎,但我至少还得到了"Chrome上的最大调用堆栈大小".测试用例:[].concat.apply([], Array(300000).fill().map(_=>[1,2,3])).(我也使用当前接受的答案得到了同样的错误,因此人们期待这样的用例或为其他人建立一个库,无论您选择哪种解决方案,都可能需要进行特殊测试.)

Answer 3

适用于使用ES2015(ES6)的用户

您现在可以使用Spread语法来连接数组:

const arr1 = [0, 1, 2],
      arr2 = [3, 4, 5];

const result1 = [...arr1, ...arr2]; // -> [0, 1, 2, 3, 4, 5]

// or...

const result2 = [...arr2, ...arr1]; // -> [3, 4, 5, 0, 1, 2]

Answer 4

该concat()方法用于连接两个或多个数组.它不会更改现有数组,只返回已连接数组的副本.

array1 = array1.concat(array2, array3, array4, ..., arrayN);

Answer 5

使用Array.prototype.concat.apply来处理多个数组的连接:

var resultArray = Array.prototype.concat.apply([], arrayOfArraysToConcat);

例:

var a1 = [1, 2, 3],
    a2 = [4, 5],
    a3 = [6, 7, 8, 9];
Array.prototype.concat.apply([], [a1, a2, a3]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Answer 6

如果你正在通过map/filter/sort等来管理结果,你想要连接数组的数组,你可以使用 reduce

let sorted_nums = ['1,3', '4,2']
  .map(item => item.split(','))   // [['1', '3'], ['4', '2']]
  .reduce((a, b) => a.concat(b))  // ['1', '3', '4', '2']
  .sort()                         // ['1', '2', '3', '4']

Answer 7

对于多个阵列和ES6的阵列,请使用

Array.prototype.concat(...arr);

例如:

const arr = [[1, 2, 3], [4, 5, 6], [7, 8 ,9]];
const newArr = Array.prototype.concat(...arr);
// output: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Answer 8

像这样解决了。

let arr = [[1, 2], [3, 4], [5, 6]];
 console.log([].concat(...arr));

Answer 9

现在我们可以使用组合多个数组ES6 Spread.不要使用concat()连接数组,而是尝试使用扩展语法将多个数组组合成一个扁平数组.例如:

var a = [1,2];
var b = [3,4];
var c = [5,6,7];
var d = [...a, ...b, ...c];
// resulting array will be like d = [1,2,3,4,5,6,7]

Answer 10

用 ES6 缩短。

new Set([].concat(...Array));

这确实连接并唯一了多个数组；

new Set([].concat(...Array));

let Array = [
  ['vue','babel','npm','gulp','mysql','less','laravel'],
  ['jquery','react','js','css','wordpress','html','bootstrap'],
  ['vue','babel','npm','gulp','mysql','less','laravel'],
  ['angular','cms','js','css','graphql','nodejs','php'],
  ['severless','headless','js','css','design','photoshop','php'],
]

const Boom = new Set([].concat(...Array));


// This is not necessary 
let dStr = '';
Boom.forEach(e=>{
  dStr += e + ' ';
})
document.write(dStr);

Answer 11

使用推送合并数组：

const array1 = [2, 7, 4];
const array2 = [3, 5,9];
array1.push(...array2);
console.log(array1)

使用Concat和Spread 运算符：

const array1 = [1,2];
const array2 = [3,4];

// Method 1: Concat 
const combined1 = [].concat(array1, array2);

// Method 2: Spread
const combined2 = [...array1, ...array2];

console.log(combined1);
console.log(combined2);