Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีรวมอาร์เรย์ใน Vanilla JavaScript (ES5 และ ES6)

คุณเคยเรียนรู้วิธีเพิ่มและลบรายการจากอาร์เรย์ด้วยเมธอด 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