วิธีเพิ่มรายการไปยังตำแหน่งอาร์เรย์เฉพาะด้วย JavaScript

เรียนรู้วิธีเพิ่มรายการในตำแหน่งอาร์เรย์เฉพาะ (ดัชนี) ใน JavaScript

สมมติว่าคุณต้องการเพิ่มรายการในอาร์เรย์ แต่คุณไม่ต้องการผนวก (เพิ่มที่ส่วนท้าย) หรือเติมไว้ข้างหน้า (เพิ่มที่จุดเริ่มต้น) คุณต้องการเพิ่มรายการในตำแหน่ง/ตำแหน่งเฉพาะของอาร์เรย์

หมายเหตุ:เมื่อเราดำเนินการจัดการข้อมูลที่ตำแหน่ง/สถานที่เฉพาะ เรามักจะเรียกมันว่า ดัชนี ด้วย ดัชนีอาร์เรย์ เริ่มนับที่ 0 ซึ่งหมายความว่า:

• 0 คือ 1
• 1 คือ 2
• และอื่นๆ

ดังนั้น หากคุณมีอาร์เรย์ที่มี 5 รายการ และต้องการเข้าถึงรายการที่ 3 คุณจะต้องระบุเป็น 2 .

เอาล่ะ มาทำสิ่งที่คุณมาที่นี่กันเถอะ

ป้อนเมธอด splice()

ในการเพิ่มรายการในตำแหน่งดัชนีเฉพาะในอาร์เรย์ เราสามารถใช้ JavaScript array.splice() อันทรงพลัง กระบวนการ. splice() วิธีเพิ่มหรือลบรายการออกจากอาร์เรย์ได้

splice() ไวยากรณ์มีลักษณะดังนี้:

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

splice() วิธีรับ 3 อาร์กิวเมนต์ขึ้นไป:

• อาร์กิวเมนต์ 1:startIndex ซึ่งเป็นตำแหน่ง (ตำแหน่ง) ที่คุณต้องการเพิ่มบางสิ่ง
• อาร์กิวเมนต์ 2:ทางเลือก deleteCount อาร์กิวเมนต์ที่คุณสามารถระบุจำนวนรายการที่คุณต้องการลบ (จาก startIndex ตำแหน่ง)
• อาร์กิวเมนต์ 3:ค่าไอเท็มใหม่ที่คุณต้องการเพิ่มในอาร์เรย์

ตัวอย่างการประกบเชิงปฏิบัติ ()

สมมติว่าเรามีรายชื่อนักแสดงจากภาพยนตร์แอคชั่นแนวแฟนตาซีเรื่อง “ถามคำถามภายหลัง” รายชื่อนักแสดงจะเรียงลำดับตามขนาดบทบาทในภาพยนตร์

นักแสดงคนหนึ่งจากทีมนักแสดงตัดสินใจที่จะโวยวายเพราะชื่อของเขาไม่ปรากฏในรายชื่อนักแสดงหลัก:

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman"
  "The Rock",
  "Wesley Snipes"
]

และนักแสดงอารมณ์เสียไม่ใช่ใครอื่นนอกจากผู้ยิ่งใหญ่ Steven Seagal(!!) ที่ปรากฎตัวในหนังเรื่องนี้ 7 วินาที เพียงพอแล้วที่จะเอาชนะศัตรู 10 ตัวที่ไร้สติ คุณซีกัลเชื่อว่านี่เป็นเวลาที่หน้าจอเพียงพอที่จะทำให้เขาอยู่ในรายชื่อนักแสดงหลัก

แล้วใครจะเถียงกับสตีเวน ซีกัล?

เอาล่ะ มาเพิ่มเขาในรายการนักแสดงหลักโดยใช้ splice() วิธีการและรูปแบบการโต้แย้งที่คุณเพิ่งเรียนรู้

เราจะเพิ่ม Steven Seagal เป็นนักแสดงคนที่ 2 ในรายชื่อนักแสดงหลัก ต่อจาก Michael Jai White (ฉันจะอธิบายว่าทำไมในอีกสักครู่):

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes",
]

mainCastList.splice(1, 0, "Steven Seagal")

console.log(mainCastList)
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

ไปกันเถอะ Steven ฉันหวังว่าคุณจะมีความสุขในตอนนี้!

และเพียงเพราะการทำซ้ำเป็นส่วนสำคัญของการเรียนรู้ นี่คือสิ่งที่เกิดขึ้นในโค้ดด้านบน:

• เราแนบ splice() วิธีการ mainCastList ตัวแปร
• จากนั้น เราใช้ 3 อาร์กิวเมนต์กับ splice() , ตำแหน่ง startIndex (1 ) deleteCount (0 =ไม่มีอะไรถูกลบ) และสุดท้าย รายการที่เราต้องการเพิ่มในตำแหน่งดัชนีนั้น ("Steven Seagal" )

โอ้ และเหตุผลที่เราไม่สามารถเพิ่ม Mr. Seagal เป็นอันดับหนึ่งในรายการได้ก็คือ Michael Jai White จะเตะตูดเขาแน่นอน

ข้อควรรู้เกี่ยวกับวิธีการ splice()

เพิ่มรายการพร้อมกัน

หากคุณต้องการเพิ่มรายการพร้อมกัน ให้คั่นด้วยเครื่องหมายจุลภาค ดังนี้:

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

ลบรายการทั้งหมดจาก startIndex

หากคุณไม่ผ่านอาร์กิวเมนต์ที่ 2 (ในตัวอย่างของเรา 0 ) จากนั้น ทั้งหมด รายการจาก startIndex ตำแหน่งจะถูกลบออกโดยค่าเริ่มต้น ดังนั้นโปรดใช้ความระมัดระวังเมื่อใช้ splice() ในโครงการในชีวิตจริง

เริ่มจากส่วนท้ายของอาร์เรย์

หากคุณต้องการระบุตำแหน่งที่คุณต้องการเพิ่ม/ลบรายการจากจุดสิ้นสุดของอาร์เรย์แทนที่จะเป็นจุดเริ่มต้น ให้ใช้ ค่าลบ ใน splice() . แรก อาร์กิวเมนต์เช่นนี้:

mainCastList.splice(-1, 0, "Steven Seagal")
console.log(mainCastList)
// ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]

ตอนนี้คุณซีกัลอยู่อันดับที่ 2 ของรายชื่อนักแสดงหลัก ซึ่งเป็นการตัดสินใจที่กล้าหาญ คุณต้องรับความเสี่ยงเอง