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

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

数组是可变的，结果可以存储在一个输入数组中。

使用

concat（）

方法连接两个或多个数组。它不会更改现有数组，只返回已联接数组的副本

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

---

使用concat功能可轻松实现：

var a = [1,2,3];
var b = [2,3,4];
a = a.concat(b);
>> [1,2,3,2,3,4]

试试这个：

i=new Array("aaaa", "bbbb");
j=new Array("cccc", "dddd");

i=i.concat(j);

您可以使用站点来比较性能。这里是链接到

增加了以下内容之间的比较：

var c = a.concat(b);

以及：

var c=[]；
对于（i=0；i

---

在chrome中，第二个阵列的速度几乎慢了10倍。

如果要连接两个以上的阵列，这是方便和可能的性能的方法

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（）

但是使用

在ECMAScript 2015及更高版本中，这可以进一步减少到

a.push(...b)

但是，对于大型数组（100000个或更多成员），将元素数组传递到

push

（使用

apply（）

或ECMAScript 2015 spread操作符）的技术可能会失败。对于这样的阵列，使用循环是更好的方法。有关详细信息，请参阅

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

编辑：效率证明：

---

edit2:timsupinie在评论中提到，这可能会导致解释器超过调用堆栈的大小。这可能取决于js引擎，但至少在Chrome上我也得到了“超过最大调用堆栈大小”。测试用例：

[].concat.apply（[]，数组（300000）.fill（）.map（=>[1,2,3]）

。（我使用当前接受的答案也得到了相同的错误，因此人们正在预测此类用例或为其他人构建库，无论您选择哪种解决方案，都可能需要进行特殊测试。）

其中“n”是一些数组，可能是一个数组数组

---

var-answer=u.reduce（n，函数（a，b）{return a.concat（b）}）

使用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]

---

如果你是通过映射/过滤器/排序等来处理结果，并且你想要排列数组的数组，你可以使用<代码>减少< /代码>

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']

---

下面是一个函数，通过它可以连接多个数组

function concatNarrays(args) {
    args = Array.prototype.slice.call(arguments);
    var newArr = args.reduce( function(prev, next) {
       return prev.concat(next) ;
    });

    return newArr;
}

范例-

console.log(concatNarrays([1, 2, 3], [5, 2, 1, 4], [2,8,9]));

将输出

[1,2,3,5,2,1,4,2,8,9]

---

如果concat只有两个数组，并且实际上需要附加其中一个数组，而不是创建一个新的数组，那么push或loop就是最好的选择

基准：适用于使用ES2015（ES6）的人群 现在可以使用排列语法连接数组：

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]

---

对于多阵列阵列和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 ]

---

如果您有数组，并且希望将元素合并到单个数组中，请尝试以下代码（需要ES2015）：

或者如果你喜欢函数式编程

let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = arrOfArr.reduce((result,current)=>{
    result.push(...current);
    return result;
});

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

或者更好地使用ES5语法，而不使用扩展运算符

var arrOfArr = [[1,2,3,4],[5,6,7,8]];
var newArr = arrOfArr.reduce((result,current)=>{
    return result.concat(current);
});
console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

---

如果您在编写代码时不知道数组的数量，这种方法非常方便。

现在我们可以使用

ES6

Spread

组合多个数组。 不要使用

concat（）

连接数组，而是尝试使用扩展语法将多个数组组合成一个扁平数组。 例如：

就这样解决了

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

用ES6缩短

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

这对多个阵列进行了concat和unique处理

let数组=[
['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=新集合（[].concat（…数组））；
//这是没有必要的
设dStr=''；
Boom.forEach（e=>{
dStr+=e+''；
})
文件编写（dStr）
如果N个数组是从数据库中获取的，而不是硬编码的，那么我将使用ES6这样做

let get_fruits = [...get_fruits , ...DBContent.fruit];

将阵列与推送合并：


const数组1=[2,7,4]；
常量数组2=[3,5,9]；
阵列1.推送（…阵列2）；
log（array1）
在不同的JS引擎中，正确答案似乎有所不同。以下是我从中得到的结果：


[].concat.apply
在Windows和Android上的Chrome 83中速度最快，其次是
reduce
（慢约56%）
在Mac上的Safari 13中，looped
concat
速度最快，其次是
reduce
（慢约13%）
reduce
在iOS上的Safari 12中速度最快，其次是looped
concat
（大约慢40%）
elementwise
push
在Windows上的Firefox 70中速度最快，其次是
[].concat.apply
（大约慢30%）
以10倍的速度迭代数组，就像它们是一个数组一样，而不实际加入它们（如果您可以帮助的话）

我很惊讶concat比push稍微快一点，除非测试有点不公平


const arr1=['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i']；
常数arr2=['j'，'k'，'l'，'i'，'m'，'n'，'o'，'p'，'q'，'r'，'s']；
常数arr3=['t'，'u'，'v'，'w']；
常数arr4=['x'，'y'，'z']；
让我们开始；
//不加入但迭代所有数组-最快
//大约0.06毫秒
开始=性能。现在（）
const joined=[arr1，arr2，arr3，arr4]；
对于（设j=0；j<1000；j++）{
设i=0；
while（连接长度）{
//console.log（加入[0][i]）；
如果（i<连接[0]。长度-1）i++；
否则{
joined.shift（）
i=0；
}
}
}
log（performance.now（）-start）；
//浓缩（0.51ms）。
开始=性能。现在（）
对于（设j=0；j<1000；j++）{
常数
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]

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

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

let get_fruits = [...get_fruits , ...DBContent.fruit];

let array2d = [[1, 2, 3], [5, 4], [7, 8]];

let array1d = array2d.reduce((merged, block) => {
                          merged.push(...block); 
                          return merged; 
                     }, []);

console.log(array1d); // [1, 2, 3, 5, 4, 7, 8]

let array2d = [[1, 2, 3], [5, 4], [7, 8]];
console.log([].concat(...array2d)); // [1, 2, 3, 5, 4, 7, 8]

let array2d = [[1, 2, 3], [5, 4], [7, 8]];
console.log(array2d.join().split(',').map(Number); // [1, 2, 3, 5, 4, 7, 8]