Cách mở rộng một mảng JavaScript hiện có với một mảng khác mà không cần tạo một mảng mới

Dường như không có cách nào để mở rộng một mảng JavaScript hiện có với một mảng khác, tức là mô phỏng extendphương thức của Python .

Tôi muốn đạt được những điều sau đây:

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

Tôi biết có một a.concat(b)phương thức, nhưng nó tạo ra một mảng mới thay vì chỉ mở rộng cái đầu tiên. Tôi muốn một thuật toán hoạt động hiệu quả khi alớn hơn đáng kể so với b( thuật toán không sao chép a).

_{Lưu ý: Đây không phải là bản sao của Cách nối một thứ gì đó vào một mảng? - mục tiêu ở đây là thêm toàn bộ nội dung của một mảng vào mảng khác và thực hiện "tại chỗ", tức là không sao chép tất cả các thành phần của mảng mở rộng.}

Các .pushphương pháp có thể mất nhiều tranh cãi. Bạn có thể sử dụng toán tử trải để truyền tất cả các phần tử của mảng thứ hai làm đối số cho .push:

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

Nếu trình duyệt của bạn không hỗ trợ ECMAScript 6, bạn có thể sử dụng .applythay thế:

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

Hoặc có lẽ, nếu bạn nghĩ nó rõ ràng hơn:

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

Xin lưu ý rằng tất cả các giải pháp này sẽ thất bại với lỗi tràn ngăn xếp nếu mảng bquá dài (sự cố bắt đầu ở khoảng 100.000 phần tử, tùy thuộc vào trình duyệt).
Nếu bạn không thể đảm bảo bđủ ngắn, bạn nên sử dụng kỹ thuật dựa trên vòng lặp tiêu chuẩn được mô tả trong câu trả lời khác.

_{Cập nhật 2018 : Một câu trả lời tốt hơn là một câu trả lời mới hơn của tôi : a.push(...b). Đừng upvote cái này nữa, vì nó không bao giờ thực sự trả lời câu hỏi, nhưng đó là một bản hack năm 2015 xung quanh lần đầu tiên truy cập vào Google :)}

Đối với những người chỉ cần tìm kiếm "mảng JavaScript mở rộng" và đã đến đây, bạn có thể sử dụng rất tốt Array.concat.

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

Concat sẽ trả về một bản sao của mảng mới, vì trình khởi động luồng không muốn. Nhưng bạn có thể không quan tâm (chắc chắn đối với hầu hết các loại sử dụng, điều này sẽ ổn).

Ngoài ra còn có một số đường ECMAScript 6 đẹp cho dạng này dưới dạng toán tử trải:

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

(Nó cũng sao chép.)

Bạn nên sử dụng một kỹ thuật dựa trên vòng lặp. Các câu trả lời khác trên trang này dựa trên việc sử dụng .applycó thể thất bại đối với các mảng lớn.

Một triển khai dựa trên vòng lặp khá ngắn gọn là:

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

Sau đó, bạn có thể làm như sau:

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

Câu trả lời của DzinX (sử dụng push.apply) và các .applyphương thức dựa trên khác không thành công khi mảng mà chúng tôi đang nối thêm lớn (các thử nghiệm cho thấy đối với tôi lớn là> 150.000 mục nhập trong Chrome và> 500.000 mục trong Firefox). Bạn có thể thấy lỗi này xảy ra trong jsperf này .

Xảy ra lỗi vì kích thước ngăn xếp cuộc gọi bị vượt quá khi 'Function.prototype.apply' được gọi với một mảng lớn làm đối số thứ hai. (MDN có một lưu ý về sự nguy hiểm của việc vượt quá kích thước ngăn xếp cuộc gọi bằng cách sử dụng Function.prototype.apply - xem phần có tiêu đề "các hàm áp dụng và tích hợp".)

Để so sánh tốc độ với các câu trả lời khác trên trang này, hãy xem jsperf này (nhờ EaterOfCode). Việc thực hiện dựa trên vòng lặp có tốc độ tương tự như sử dụng Array.push.apply, nhưng có xu hướng chậm hơn một chút so với Array.slice.apply.

Thật thú vị, nếu mảng bạn đang nối thêm thưa thớt, forEachphương thức dựa trên có thể tận dụng độ thưa thớt và vượt trội so với các .applyphương thức dựa trên; kiểm tra jsperf này nếu bạn muốn tự mình kiểm tra điều này.

Nhân tiện, đừng bị cám dỗ (như tôi đã từng!) Để rút ngắn hơn nữa việc thực hiện forEach thành:

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

bởi vì điều này tạo ra kết quả rác! Tại sao? Bởi vì Array.prototype.forEachcung cấp ba đối số cho hàm mà nó gọi - đó là: (Element_value, Element_index, source_array). Tất cả những thứ này sẽ được đẩy lên mảng đầu tiên của bạn cho mỗi lần lặp forEachnếu bạn sử dụng "forEach (this.push, this)"!

Tôi cảm thấy thanh lịch nhất những ngày này là:

arr1.push(...arr2);

Các bài viết MDN trên hành lan rộng đề cập đến cách này có đường ngơi thoải mái tại ES2015 (ES6):

Đẩy tốt hơn

Ví dụ: đẩy thường được sử dụng để đẩy một mảng đến cuối của một mảng hiện có. Trong ES5, điều này thường được thực hiện như sau:

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

Trong ES6 với sự lây lan, điều này trở thành:

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

Xin lưu ý rằng arr2không thể lớn (giữ dưới 100 000 mục), vì ngăn xếp cuộc gọi tràn ra, theo câu trả lời của jcdude.

Trước tiên, một vài từ về apply()JavaScript để giúp hiểu lý do tại sao chúng tôi sử dụng nó:

Các apply()phương pháp gọi một hàm với một định thisgiá trị, và đối số cung cấp như một mảng.

Push mong đợi một danh sách các mục để thêm vào mảng. Các apply()phương pháp, tuy nhiên, có những lập luận dự kiến cho cuộc gọi chức năng như một mảng. Điều này cho phép chúng ta dễ dàng pushcác phần tử của một mảng thành một mảng khác với push()phương thức dựng sẵn .

Hãy tưởng tượng bạn có những mảng này:

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

và chỉ cần làm điều này:

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

Kết quả sẽ là:

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

Điều tương tự có thể được thực hiện trong ES6 bằng cách sử dụng toán tử trải (" ...") như thế này:

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

Hiện tại ngắn hơn và tốt hơn nhưng không được hỗ trợ đầy đủ trong tất cả các trình duyệt.

Ngoài ra nếu bạn muốn chuyển mọi thứ từ mảng bsang a, làm trống btrong quy trình, bạn có thể làm điều này:

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

và kết quả sẽ như sau:

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

Nếu bạn muốn sử dụng jQuery, có $ .merge ()

Thí dụ:

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

Kết quả: a = [1, 2, 3, 4, 5]

Tôi thích a.push.apply(a, b)phương pháp được mô tả ở trên và nếu bạn muốn, bạn luôn có thể tạo một hàm thư viện như thế này:

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

và sử dụng nó như thế này

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

a.append(b)

Có thể làm điều đó bằng cách sử dụng splice():

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

Nhưng mặc dù xấu hơn nhưng nó không nhanh hơn push.apply, ít nhất là không có trong Firefox 3.0.

Giải pháp này hiệu quả với tôi (sử dụng toán tử trải rộng của 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);

Bạn có thể tạo một polyfill để mở rộng như tôi có bên dưới. Nó sẽ thêm vào mảng; tại chỗ và trả về chính nó, để bạn có thể xâu chuỗi các phương thức khác.

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

Kết hợp các câu trả lời ...

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

Một giải pháp khác để hợp nhất nhiều hơn hai mảng

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

Sau đó gọi và in như:

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

Đầu ra sẽ là: Array [1, 2, 3, 4, 5, 6, 7]

Câu trả lời là siêu đơn giản.

>>> 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 hoạt động rất giống với nối chuỗi JavaScript. Nó sẽ trả về một tổ hợp tham số bạn đặt vào hàm concat ở cuối mảng bạn gọi hàm trên. Điểm mấu chốt là bạn phải gán giá trị trả về cho một biến hoặc nó bị mất. Ví dụ

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

Sử dụng Array.extendthay vì Array.pushcho 150.000 hồ sơ.

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

Siêu đơn giản, không tính vào các toán tử lây lan hoặc áp dụng, nếu đó là một vấn đề.

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

Sau khi chạy một số bài kiểm tra hiệu năng về điều này, nó rất chậm, nhưng trả lời câu hỏi liên quan đến việc không tạo ra một mảng mới. Concat nhanh hơn đáng kể, ngay cả jQuery cũng kiểm tra $.merge()nó.

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