วิธีการขยายอาร์เรย์ 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สั้นพอคุณควรใช้เทคนิคแบบวนรอบมาตรฐานที่อธิบายไว้ในคำตอบอื่น ๆ

_{อัปเดตปี 2561 : คำตอบที่ดีกว่าคือคำตอบใหม่ของฉัน : 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 นี้หากคุณต้องการทดสอบด้วยตัวเอง

ยังไงก็ตามอย่าเพิ่งถูกล่อลวง (เหมือนอย่างที่ฉันเป็น!)

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):

การผลักดันที่ดีกว่า

ตัวอย่าง: การกดมักจะใช้เพื่อผลักอาร์เรย์ไปยังจุดสิ้นสุดของอาร์เรย์ที่มีอยู่ ใน 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 รายการ) เนื่องจาก call stack ล้นออกไปตามคำตอบของ jcdude

เป็นคำแรกที่พูดถึงapply()ใน JavaScript เพื่อช่วยให้เข้าใจว่าทำไมเราจึงใช้:

apply()วิธีการเรียกฟังก์ชั่นที่มีการกำหนดthisค่าและการขัดแย้งให้เป็นอาร์เรย์

พุชคาดว่ารายการของรายการที่จะเพิ่มไปยังอาร์เรย์ อย่างไรก็ตามapply()วิธีการใช้อาร์กิวเมนต์ที่คาดหวังสำหรับการเรียกใช้ฟังก์ชันเป็นอาร์เรย์ สิ่งนี้ทำให้เราสามารถอิลีเมนต์pushของอาเรย์หนึ่งไปยังอาเรย์อีกอันได้อย่างง่ายดายด้วยpush()เมธอดbuiltin

ลองนึกภาพคุณมีอาร์เรย์เหล่านี้:

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 ในตอนท้ายของอาร์เรย์ที่คุณเรียกใช้ฟังก์ชั่น crux คือคุณต้องกำหนดค่าที่ส่งคืนให้กับตัวแปรหรือสูญเสีย ตัวอย่างเช่น

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> 150,000 รายการ

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