การแทรกอาร์เรย์ JavaScript - วิธีเพิ่มลงในอาร์เรย์ด้วยฟังก์ชัน Push, Unshift และ Concat

อาร์เรย์ JavaScript เป็นประเภทข้อมูลที่ฉันชอบมาก เป็นแบบไดนามิกใช้งานง่ายและมีวิธีการในตัวมากมายที่เราสามารถใช้ประโยชน์ได้

อย่างไรก็ตามยิ่งคุณมีตัวเลือกมากขึ้นก็จะยิ่งสับสนในการตัดสินใจว่าควรใช้ตัวเลือกใด

ในบทความนี้ฉันต้องการพูดถึงวิธีทั่วไปในการเพิ่มองค์ประกอบลงในอาร์เรย์ JavaScript

วิธีการกด

เป็นครั้งแรกและอาจจะเป็นวิธีการที่พบมากที่สุดอาร์เรย์ JavaScript คุณจะพบคือการผลักดัน () วิธี push () ใช้สำหรับการเพิ่มองค์ประกอบที่ส่วนท้ายของอาร์เรย์

สมมติว่าคุณมีอาร์เรย์ขององค์ประกอบแต่ละองค์ประกอบเป็นสตริงที่แสดงถึงงานที่คุณต้องทำให้สำเร็จ ควรเพิ่มรายการที่ใหม่กว่าที่ส่วนท้ายของอาร์เรย์เพื่อให้เราทำงานก่อนหน้านี้ให้เสร็จก่อน

ลองดูตัวอย่างในรูปแบบรหัส:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

เอาล่ะ push ทำให้เรามีไวยากรณ์ที่ดีและเรียบง่ายสำหรับการเพิ่มรายการที่ส่วนท้ายของอาร์เรย์ของเรา

สมมติว่าเราต้องการเพิ่มทีละสองหรือสามรายการในรายการเราจะทำอย่างไร? ปรากฎว่าpush ()สามารถยอมรับหลายองค์ประกอบที่จะเพิ่มในครั้งเดียว

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

ตอนนี้เราได้เพิ่มงานบางอย่างในอาร์เรย์ของเราแล้วเราอาจต้องการทราบจำนวนรายการที่อยู่ในอาร์เรย์ของเราเพื่อพิจารณาว่าเรามีมากเกินไปในจานของเราหรือไม่

โชคดีที่push ()มีค่าส่งคืนพร้อมกับความยาวของอาร์เรย์หลังจากเพิ่มองค์ประกอบของเราแล้ว

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

วิธี Unshift

งานทั้งหมดไม่ได้ถูกสร้างขึ้นเท่ากัน คุณอาจพบกับสถานการณ์ที่คุณกำลังเพิ่มงานในอาร์เรย์ของคุณและจู่ๆคุณก็พบกับงานที่เร่งด่วนกว่างานอื่น ๆ

ถึงเวลาแนะนำเพื่อนของเราunshift ()ที่ช่วยให้เราสามารถเพิ่มรายการที่จุดเริ่มต้นของอาร์เรย์ของเราได้

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

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

วิธีการ Concat

ย่อมาจาก concatenate (เพื่อเชื่อมโยงเข้าด้วยกัน) วิธีconcat ()ใช้สำหรับการรวมอาร์เรย์สองชุด

หากคุณจำจากด้านบนวิธีunshift ()และpush () จะส่งกลับความยาวของอาร์เรย์ใหม่ concat ()ในทางกลับกันจะส่งคืนอาร์เรย์ใหม่ทั้งหมด

นี่เป็นความแตกต่างที่สำคัญมากและทำให้concat ()มีประโยชน์อย่างมากเมื่อคุณจัดการกับอาร์เรย์ที่คุณไม่ต้องการกลายพันธุ์ (เช่นอาร์เรย์ที่เก็บไว้ในสถานะ React)

นี่คือลักษณะของกรณีพื้นฐานและตรงไปตรงมา:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

สมมติว่าคุณมีอาร์เรย์หลายอาร์เรย์ที่คุณต้องการรวมเข้าด้วยกัน ไม่ต้องกังวลconcat ()อยู่ที่นั่นเพื่อช่วยวัน!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

การโคลนด้วย Concat

จำได้ว่าฉันพูดว่าconcat ()มีประโยชน์อย่างไรเมื่อคุณไม่ต้องการกลายพันธุ์อาร์เรย์ที่มีอยู่ของคุณ? มาดูวิธีที่เราจะใช้ประโยชน์จากแนวคิดนี้เพื่อคัดลอกเนื้อหาของอาร์เรย์หนึ่งไปยังอาร์เรย์ใหม่ได้อย่างไร

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

สุดยอด! เราสามารถเป็นหลัก "โคลน" อาร์เรย์ใช้concat ()

แต่มี 'gotcha' เล็ก ๆ ในกระบวนการโคลนนี้ อาร์เรย์ใหม่คือ "สำเนาตื้น" ของอาร์เรย์ที่คัดลอก ซึ่งหมายความว่าวัตถุใด ๆ ถูกคัดลอกโดยการอ้างอิงไม่ใช่วัตถุจริง

ลองมาดูตัวอย่างเพื่ออธิบายแนวคิดนี้ให้ชัดเจนยิ่งขึ้น

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

แม้ว่าเราจะไม่ได้ทำการเปลี่ยนแปลงใด ๆ กับอาร์เรย์ดั้งเดิมของเราโดยตรงแต่ในที่สุดอาร์เรย์ก็ได้รับผลกระทบจากการเปลี่ยนแปลงที่เราทำในอาร์เรย์ที่โคลนของเรา!

มีหลายวิธีในการสร้าง "โคลนลึก" ของอาร์เรย์อย่างถูกต้อง แต่ฉันจะปล่อยให้คุณทำการบ้าน

TL; ดร

เมื่อคุณต้องการเพิ่มองค์ประกอบที่ส่วนท้ายของอาร์เรย์ของคุณให้ใช้push () หากคุณต้องการเพิ่มองค์ประกอบที่จุดเริ่มต้นของอาร์เรย์ของคุณให้ลองunshift () และคุณสามารถเพิ่มอาร์เรย์เข้าด้วยกันโดยใช้concat ()

มีตัวเลือกอื่น ๆ อีกมากมายสำหรับการเพิ่มองค์ประกอบในอาร์เรย์และฉันขอเชิญชวนให้คุณออกไปค้นหาวิธีการอาร์เรย์ที่ยอดเยี่ยมกว่านี้!

อย่าลังเลที่จะติดต่อฉันทาง Twitter และแจ้งให้เราทราบวิธีอาร์เรย์ที่คุณชื่นชอบสำหรับการเพิ่มองค์ประกอบลงในอาร์เรย์