Как расширить существующий массив JavaScript другим массивом, не создавая новый массив

Кажется, не существует способа расширить существующий массив JavaScript другим массивом, то есть эмулировать extendметод Python .

Я хочу добиться следующего:

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

Я знаю, что есть a.concat(b)метод, но он создает новый массив вместо простого расширения первого. Я хотел бы алгоритм, который работает эффективно, когда aзначительно больше, чем b(то есть тот, который не копирует a).

_{Примечание: это не дубликат Как добавить что-либо в массив? - цель здесь состоит в том, чтобы добавить все содержимое одного массива в другой и сделать это «на месте», т.е. без копирования всех элементов расширенного массива.}

.pushМетод может принимать несколько аргументов. Вы можете использовать оператор распространения, чтобы передать все элементы второго массива в качестве аргументов .push:

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

Если ваш браузер не поддерживает ECMAScript 6, вы можете использовать .applyвместо этого:

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

Или, может быть, если вы думаете, что это яснее:

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

Обратите внимание, что все эти решения завершатся с ошибкой переполнения стека, если массив bслишком длинный (проблема начинается с 100 000 элементов, в зависимости от браузера).
Если вы не можете гарантировать, что bон достаточно короткий, вам следует использовать стандартную методику, основанную на циклах, описанную в другом ответе.

_{Обновление 2018 : Лучший ответ новее один из моих : a.push(...b). Не одобряйте это больше, так как он никогда не отвечал на вопрос, но это был хак 2015 года вокруг первого попадания в Google :)}

Для тех, кто просто искал "Расширение массива JavaScript" и получил здесь, вы можете очень хорошо использовать Array.concat.

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

Concat вернет копию нового массива, поскольку запускатель потоков не захотел. Но вам может быть все равно (конечно, для большинства видов использования это будет хорошо).

Для этого есть также хороший сахар ECMAScript 6 в виде оператора распространения:

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

(Это также копирует.)

Вы должны использовать технику на основе цикла. Другие ответы на этой странице, основанные на использовании, .applyмогут не работать для больших массивов.

Довольно краткая реализация, основанная на циклах:

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);
}

Затем вы можете сделать следующее:

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

Ответ DzinX (с использованием push.apply) и других .applyоснованных на нем методов завершается неудачей, когда добавляемый нами массив большой (тесты показывают, что для меня большой размер составляет> 150 000 записей в Chrome и> 500 000 записей в Firefox). Вы можете увидеть эту ошибку, возникающую в этом jsperf .

Ошибка возникает из-за превышения размера стека вызовов при вызове Function.prototype.apply с большим массивом в качестве второго аргумента. (У MDN есть примечание об опасностях превышения размера стека вызовов с помощью Function.prototype.apply - см. Раздел «Применение и встроенные функции».)

Для сравнения скорости с другими ответами на этой странице, проверьте этот jsperf (благодаря EaterOfCode). Реализация на основе циклов похожа по скорости на использование Array.push.apply, но имеет тенденцию быть немного медленнее, чем Array.slice.apply.

Интересно, что если массив, который вы добавляете, является разреженным, forEachоснованный метод выше может использовать преимущества разреженности и опережать .applyоснованные методы; Проверьте этот jsperf, если вы хотите проверить это для себя.

Между прочим, не поддавайтесь искушению (как я!) Дополнительно сократить реализацию forEach до:

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

потому что это приводит к результатам мусора! Почему? Потому что Array.prototype.forEachпредоставляет три аргумента вызываемой функции - это: (element_value, element_index, source_array). Все они будут помещены в ваш первый массив для каждой итерации, forEachесли вы используете «forEach (this.push, this)»!

Я чувствую себя самым элегантным в эти дни:

arr1.push(...arr2);

В статье MDN об операторе спреда в ES2015 (ES6) упоминается этот приятный сладкий путь:

Лучший толчок

Пример: 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);

В ES6 с распространением это становится:

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

Обратите внимание, что он arr2не может быть огромным (не более 100 000 элементов), потому что стек ответов переполняется, согласно ответу jcdude.

Сначала несколько слов о apply()JavaScript, чтобы понять, почему мы его используем:

apply()Метод вызывает функцию с заданным thisзначением, и при условии , аргументы в виде массива.

Push ожидает список элементов для добавления в массив. Однако apply()метод принимает ожидаемые аргументы для вызова функции в виде массива. Это позволяет нам легко помещать pushэлементы одного массива в другой с помощью встроенного push()метода.

Представьте, что у вас есть эти массивы:

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

и просто сделайте это:

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

Результатом будет:

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

То же самое можно сделать в ES6 с помощью оператора распространения (" ...") следующим образом:

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

Короче и лучше, но не полностью поддерживается на данный момент во всех браузерах.

Также, если вы хотите переместить все из массива bв aпустую bв процессе, вы можете сделать это:

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

и результат будет следующим:

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

Если вы хотите использовать jQuery, есть $ .merge ()

Пример:

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

Результат: a = [1, 2, 3, 4, 5]

Мне нравится a.push.apply(a, b)метод, описанный выше, и если вы хотите, вы всегда можете создать библиотечную функцию следующим образом:

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

и использовать это так

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

a.append(b)

Это можно сделать с помощью splice():

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

Но несмотря на то, что он уродлив, он не быстрее push.apply, по крайней мере, в Firefox 3.0.

Это решение работает для меня (используя оператор распространения ECMAScript 6):

let array = ['my', 'solution', 'works'];
let newArray = [];
let newArray2 = [];
newArray.push(...array); // Adding to same array
newArray2.push([...array]); // Adding as child/leaf/sub-array
console.log(newArray);
console.log(newArray2);

Вы можете создать Polyfill для расширения, как у меня ниже. Это добавит в массив; на месте и вернуть себя, так что вы можете связать другие методы.

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;
}

Объединяя ответы ...

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]);
        };
    }  
}

Еще одно решение для объединения более двух массивов

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]);
  }
 }
};

Затем позвоните и распечатайте как:

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

Выход будет: Array [1, 2, 3, 4, 5, 6, 7]

Ответ супер прост.

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

a = a.concat(b);

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

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.

Используйте Array.extendвместо Array.push> 150000 записей.

if (!Array.prototype.extend) {
  Array.prototype.extend = function(arr) {
    if (!Array.isArray(arr)) {
      return this;
    }

    for (let record of arr) {
      this.push(record);
    }

    return this;
  };
}

Супер просто, не рассчитывать на операторов спреда или применять, если это проблема.

b.map(x => a.push(x));

После выполнения некоторых тестов производительности это очень медленно, но отвечает на вопрос о том, чтобы не создавать новый массив. Concat работает значительно быстрее, даже jQuery $.merge()делает это.

https://jsperf.com/merge-arrays19b/1