คุณเคยเรียนรู้วิธีเพิ่มและลบรายการจากอาร์เรย์ด้วยเมธอด push() ของ JavaScript
แต่ถ้าเราต้องการเพิ่มอาร์เรย์ของรายการเข้าไปในอาร์เรย์ที่มีอยู่แล้ว? กล่าวคือ ต้องการรวมอาร์เรย์สองตัวที่ต่างกันเข้าด้วยกัน?
เพื่อรวมอาร์เรย์สองตัวขึ้นไปใน JavaScript คุณสามารถใช้ Array.prototype.push.apply()
สมมติว่าเรามีตะกร้าผลไม้สองใบ และต้องการรวมผลไม้ทั้งหมดในตะกร้าเดียว ไม่เป็นไร
ES5
var fruitBasketOne = ["apple", "banana", "grapes"] var fruitBasketTwo = ["orange", "apricot", "pear"] Array.prototype.push.apply(fruitBasketOne, fruitBasketTwo) // returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear'] console.log(fruitBasketOne) // returns ["orange", "apricot", "pear"] console.log(fruitBasketTwo)
นี่จะรวมอาร์เรย์ที่สองเข้าไปในอาร์เรย์แรก สังเกตว่าอาร์เรย์ที่สอง fruitBasketTwo ยังคงอยู่ในหน่วยความจำ วิธีนี้ ไม่ ลบอาร์เรย์ต้นฉบับ
การรวมอาร์เรย์ด้วย ES6
การรวมอาจง่ายกว่านี้ โดยใช้ spread operator ของ ES6:
let fruitBasketOne = ["apple", "banana", "grapes"] let fruitBasketTwo = ["orange", "apricot", "pear"] fruitBasketOne.push(...fruitBasketTwo) // returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear'] console.log(fruitBasketOne)
ความเข้ากันได้
เมธอด push แรกเข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด และย้อนกลับไปถึง IE6 แล้ว เมธอดที่สองทำงานได้เฉพาะเบราว์เซอร์สมัยใหม่ แต่คุณสามารถใช้ pre-processor เช่น Babel คอมไพล์ JavaScript กลับเป็นโค้ด ES5 ที่เข้ากันได้กับเบราว์เซอร์เก่า
อ่านเพิ่มเติมเกี่ยวกับเมธอด Array Push