如何在不创建新数组的情况下使用另一个数组扩展现有的JavaScript数组?

Note: This is not a duplicate of How to append something to an array? -- the goal here is to add the whole contents of one array to the other, and to do it "in place", i.e. without copying all elements of the extended array.

注意:这不是如何向数组追加内容的副本吗?这里的目标是将一个数组的全部内容添加到另一个数组中，并在不复制扩展数组的所有元素的情况下“就地”执行。

There doesn't seem to be a way to extend an existing JavaScript array with another array, i.e. to emulate Python's extend method.

似乎没有一种方法可以用另一个数组来扩展现有的JavaScript数组，例如模拟Python的扩展方法。

What I want to achieve is the following:

我想达到的目标是:

>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
>>> a
[1, 2, 3, 4, 5]

I know there's a a.concat(b) method, but it creates a new array instead of simply extending the first one. I'd like an algorithm that works efficiently when a is significantly larger than b (i.e. one that does not copy a).

我知道有一个a.concat(b)方法，但是它创建了一个新的数组，而不是简单地扩展第一个数组。我想要一种算法，当a比b大得多时(即不复制a的算法)，它能有效地工作。

13 个解决方案

#1

The .push method can take multiple arguments, so by using .apply to pass all the elements of the second array as arguments to .push, you can get the result you want:

push方法可以取多个参数，使用.apply将第二个数组的所有元素作为参数传递给.push，可以得到想要的结果:

>>> a.push.apply(a, b)

or perhaps, if you think it's clearer:

或者，如果你觉得更清楚的话:

>>> Array.prototype.push.apply(a,b)

If your browser supports ES6, you can use the spread operator, which is more compact and elegant:

如果您的浏览器支持ES6，您可以使用扩展操作符，它更加紧凑和优雅:

>>> a.push(...b)

Please note that all these solutions will fail with a stack overflow error if array b is too long (trouble starts at about 100,000 elements, depending on the browser). If you cannot guarantee that b is short enough, you should use a standard loop-based technique described in the other answer.

请注意，如果数组b太长(根据浏览器的不同，问题开始于大约100,000个元素)，那么所有这些解决方案都会以堆栈溢出错误而失败。如果不能保证b足够短，您应该使用另一个答案中描述的标准基于循环的技术。

#2

For those that simply searched for "javascript array extend" and got here, you can very well use Array.concat.

对于那些搜索了“javascript数组扩展”并到达这里的用户，您可以很好地使用array .concat。

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

Concat will return a copy the new array, as thread starter didn't want. But you might not care (certainly for most kind of uses this will be fine).

Concat将返回一个新的数组副本，因为线程启动程序不希望这样。但你可能并不在意(当然，对于大多数用途来说，这是可以的)。

---

There's also some nice ES6 sugar for this in the form of the spread operator:

还有一些很好的ES6糖以扩散算子的形式存在:

const a = [1, 2, 3];
const b = [...a, 5, 4, 3];

(also copies)

(副本)

#3

You should use a loop-based technique. Other answers on this page that are based on using .apply can fail for large arrays.

您应该使用基于循环的技术。本页上基于使用.apply的其他答案对于大型数组可能会失败。

A fairly terse loop-based implementation is:

一个相当简洁的基于循环的实现是:

Array.prototype.extend = function (other_array) {
    /* you should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {this.push(v)}, this);    
}

You can then do the following:

你可以这样做:

var a = [1,2,3];
var b = [5,4,3];
a.extend(b);

DzinX's answer (using push.apply) and other .apply based methods fail when the array that we are appending is large (tests show that for me large is > 150000 entries approx in Chrome, and > 500000 entries in Firefox). You can see this error occurring in this jsperf.

DzinX的答案(使用push.apply)和其他基于.apply的方法在我们添加的数组较大时失败(测试显示，对于我来说，big是>，150000个条目，大约在Chrome中，> 500000个条目在Firefox中)。您可以在这个jsperf中看到这个错误。

An error occurs because the call stack size is exceeded when 'Function.prototype.apply' is called with a large array as the second argument. (The MDN has a note on the dangers of exceeding call stack size using Function.prototype.apply - see the section titled "apply and built-in functions")

当'Function.prototype时，会超出调用堆栈大小，因此会发生错误。第二个参数是用一个大数组调用apply'。(MDN注意到使用Function.prototype超出调用堆栈大小的危险。应用-请参阅标题为“应用和内置函数”的章节)

For a speed comparison with other answers on this page check out this jsperf (thanks to EaterOfCode). The loop-based implementation is similar in speed to using Array.push.apply, but tends to be a little slower than Array.slice.apply.

为了与本页上的其他答案进行速度比较，请查看这个jsperf(感谢EaterOfCode)。基于循环的实现在速度上类似于使用Array.push。应用，但是比Array.slice.apply要慢一些。

Interestingly, if the array you are appending is sparse, the forEach based method above can take advantage of the sparsity and outperform the .apply based methods, check out this jsperf if you want to test this for yourself.

有趣的是，如果要追加的数组是稀疏的，那么上面基于forEach的方法可以利用稀疏性，并且胜过基于.apply的方法，如果您想自己测试这个jsperf，请查看这个jsperf。

By the way, do not be tempted (as I was!) to further shorten the forEach implementation to:

顺便说一下，不要被引诱(就像我一样!)来进一步缩短每个实现的时间:

Array.prototype.extend = function (array) {
    array.forEach(this.push, this);    
}

because this produces garbage results! Why? Because Array.prototype.forEach provides 3 arguments to the function it calls - these are: (element_value, element_index, source_array). All of these will be pushed onto your first array for every iteration of forEach if you use "forEach(this.push, this)"!

因为这会产生垃圾结果!为什么?因为Array.prototype。forEach为它调用的函数提供3个参数——这些是:(element_value、element_index、source_array)。如果您使用“forEach”(this)，那么在forEach的每次迭代中，所有这些都将被推到您的第一个数组中。推动,这)”!

#4

I feel the most elegant these days is:

我觉得现在最优雅的是:

arr1.push(...arr2);

The MDN article on the spread operator mentions this nice sugary way in ES2015 (ES6):

MDN关于传播算子的文章提到了ES2015中这个美妙的含糖方式(ES6):

A better push

Example: push is often used to push an array to the end of an existing array. In ES5 this is often done as:

示例:push通常用于将数组推到现有数组的末尾。在ES5中经常这样做:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);

In ES6 with spread this becomes:

在ES6中，传播成为:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Do note that arr2 can't be huge (keep it under about 100 000 items), because the call stack overflows, as per jcdude's answer.

请注意arr2不能太大(将其保存在大约10万项之下)，因为调用堆栈溢出，正如jcdude的回答。

#5

First a few words about apply() in JavaScript to help understand why we use it:

首先，我简单介绍一下JavaScript中的apply()，以帮助我们理解为什么要使用它:

The apply() method calls a function with a given this value, and arguments provided as an array.

apply()方法调用具有给定此值的函数，并将参数作为数组提供。

Push expects a list of items to add to the array. The apply() method, however, takes the expected arguments for the function call as an array. This allows us to easily push the elements of one array into another array with the builtin push() method.

Push要求向数组添加项目列表。然而，apply()方法将函数调用的预期参数作为数组。这使我们可以轻松地将一个数组的元素用builtin push()方法推入另一个数组。

Imagine you have these arrays:

假设你有这些数组:

var a = [1, 2, 3, 4];
var b = [5, 6, 7];

and simply do this:

只是这样做:

Array.prototype.push.apply(a, b);

The result will be:

结果将是:

a = [1, 2, 3, 4, 5, 6, 7];

The same thing can be done in ES6 using the spread operator ("...") like this:

同样的事情也可以在ES6中使用扩展操作符(“…”)，比如:

a.push(...b); //a = [1, 2, 3, 4, 5, 6, 7]; 

Shorter and better but not fully supported in all browsers at the moment.

更短更好，但目前并不是所有浏览器都完全支持。

Also if you want to move everything from array b to a, emptying b in the process, you can do this:

如果你想把所有东西从数组b移动到a，在这个过程中清空b，你可以这样做:

while(b.length) {
  a.push(b.shift());
} 

and the result will be as follows:

结果如下:

a = [1, 2, 3, 4, 5, 6, 7];
b = [];

#6

If you want to use jQuery, there is $.merge()

如果想使用jQuery，可以使用$.merge()

Example:

例子:

a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);

Result: a = [1, 2, 3, 4, 5]

结果:a = [1,2,3,4,5]

#7

I like the a.push.apply(a, b) method described above, and if you want you can always create a library function like this:

我喜欢a.push。应用上面描述的(a, b)方法，如果你想要你总是可以创建一个这样的库函数:

Array.prototype.append = function(array)
{
    this.push.apply(this, array)
}

and use it like this

像这样使用

a = [1,2]
b = [3,4]

a.append(b)

#8

It is possible to do it using splice():

可以使用splice()实现:

b.unshift(b.length)
b.unshift(a.length)
Array.prototype.splice.apply(a,b) 
b.shift() // restore b
b.shift() // 

But despite being uglier it is not faster than push.apply, at least not in Firefox 3.0. Posted for completeness sake.

但是，尽管它更丑，但它并不比“推”快。至少在Firefox 3.0中不能应用。为了完整性。

#9

You can create a polyfill for extend as I have below. It will add to the array; in-place and return itself, so that you can chain other methods.

您可以创建一个用于扩展的多边形，如下所示。它将添加到数组中;就位并返回本身，以便您可以链接其他方法。

if (Array.prototype.extend === undefined) {
  Array.prototype.extend = function(other) {
    this.push.apply(this, arguments.length > 1 ? arguments : other);
    return this;
  };
}

function print() {
  document.body.innerHTML += [].map.call(arguments, function(item) {
    return typeof item === 'object' ? JSON.stringify(item) : item;
  }).join(' ') + '\n';
}
document.body.innerHTML = '';

var a = [1, 2, 3];
var b = [4, 5, 6];

print('Concat');
print('(1)', a.concat(b));
print('(2)', a.concat(b));
print('(3)', a.concat(4, 5, 6));

print('\nExtend');
print('(1)', a.extend(b));
print('(2)', a.extend(b));
print('(3)', a.extend(4, 5, 6));

body {
  font-family: monospace;
  white-space: pre;
}

#10

I can see very nice answers, and all depends on your array size, your requirement and goal. It can be done different ways.

我可以看到很好的答案，这取决于你的数组大小，你的需求和目标。可以用不同的方法来做。

I suggest using JavaScript For Loop:

我建议使用JavaScript进行循环:

var a = [1, 2];
var b = [3, 4, 5];

for (i = 0; i < b.length; i++) {
    a.push(b[i]);
}

console.log(a) output will be

console.log(a)输出

Array [ 1, 2, 3, 4, 5 ]

Then you can make your own function:

然后你就可以做你自己的功能:

function extendArray(a, b){
    for (i = 0; i < b.length; i++) {
        a.push(b[i]);
    }
    return a;
}

console.log(extendArray(a, b)); output will be

控制台。日志(extendArray(a,b));输出将

Array [ 1, 2, 3, 4, 5 ]

#11

Combining the answers...

结合答案……

Array.prototype.extend = function(array) {
    if (array.length < 150000) {
        this.push.apply(this, array)
    } else {
        for (var i = 0, len = array.length; i < len; ++i) {
            this.push(array[i]);
        };
    }  
}

#12

Another solution to merge more than two arrays

合并两个以上数组的另一个解决方案

var a = [1, 2],
    b = [3, 4, 5],
    c = [6, 7];

// Merge the contents of multiple arrays together into the first array
var mergeArrays = function() {
 var i, len = arguments.length;
 if (len > 1) {
  for (i = 1; i < len; i++) {
    arguments[0].push.apply(arguments[0], arguments[i]);
  }
 }
};

Then call and print as:

然后打电话并打印为:

mergeArrays(a, b, c);
console.log(a)

Output will be: Array [1, 2, 3, 4, 5, 6, 7]

输出将是:数组[1,2,3,4,5,6,7]

#13

The answer is super simple.

答案非常简单。

>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
(the following code will combine the 2 arrays)

a = a.concat(b);

>>> a
[1, 2, 3, 4, 5]

Concat acts very similarly to javascript string concatenation. It will return a combination of the parameter you put into the concat function on the end of the array you call the function on. The crux is that you have to asign the returned value to a variable or it gets lost. so for example

Concat的作用与javascript字符串连接非常相似。它将返回您在调用函数的数组末尾的concat函数中输入的参数的组合。关键是你必须把返回值赋给一个变量，否则它就会丢失。举个例子

a.concat(b);  <---This does absolutely nothing since it is just returning the combined arrays but it doesn't do anything with it