JavaScript Copy Array:คำแนะนำ

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

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

ปัญหาในการคัดลอกอาร์เรย์ JavaScript

ในบางระดับ ตัวดำเนินการ "=" จะสร้างสำเนาของอาร์เรย์ลงในตัวแปรใหม่ มันเป็นตัวชี้มากกว่าการคัดลอก เนื่องจากตัวดำเนินการ “=" สร้างการอ้างอิงไปยังอาร์เรย์ดั้งเดิม ไม่สร้างซ้ำกับอาร์เรย์ที่มีอยู่

มาลองสร้างสำเนาของอาร์เรย์โดยใช้โอเปอเรเตอร์การมอบหมายที่ไม่มีโค้ดอื่นกัน:

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = berries;

console.log(fruits);

รหัสของเราส่งคืน:

[ "Strawberry", "Gooseberry", "Raspberry" ]

ดูเหมือนว่าอาร์เรย์ของเราจะถูกคัดลอก “ผลไม้” มีค่าทั้งหมดจากอาร์เรย์ “เบอร์รี่” ของเรา

ตอนนี้ มาลองเพิ่มรายการในอาร์เรย์ "ผลไม้":

fruits.push("Melon");
console.log(fruits);
console.log(berries);

เราได้เพิ่ม “เมล่อน” ให้กับผลไม้นานาชนิด จากนั้นเราพิมพ์ค่าของ "ผลไม้" และ "เบอร์รี่" ลงในคอนโซล:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

ทั้ง “ผลไม้” และ “เบอร์รี่” มีค่าเท่ากัน นั่นเป็นเพราะว่าเราไม่ได้ทำการโคลนอาร์เรย์ในทางเทคนิค เราเพิ่งสร้างการอ้างอิงถึงมัน

ทุกครั้งที่เราจัดการอาร์เรย์ "เบอร์รี่" การเปลี่ยนแปลงจะเกิดขึ้นในอาร์เรย์ "ผลไม้"

วิธีการคัดลอกอาร์เรย์ JavaScript

ตัวดำเนินการมอบหมายจะไม่คัดลอกอาร์เรย์ เราต้องใช้แนวทางอื่น โชคดีสำหรับเรา มีวิธีมากมายในการสร้างสำเนาของอาร์เรย์ แนวทางสามอันดับแรกคือ:

• การใช้ตัวดำเนินการการแพร่กระจาย
• การใช้ for วนซ้ำ
• การใช้ Array.from

มาคุยกันทีละคน

การใช้ตัวดำเนินการสเปรด

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

ตัวดำเนินการการแพร่กระจายประกอบด้วยจุดสามจุด เช่น จุดไข่ปลา (…) มาลองสร้างสำเนาอาร์เรย์ "เบอร์รี่" ของเราจากก่อนหน้านี้:

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [...berries];
fruits.push("Melon");

เราใช้ตัวดำเนินการสเปรดเพื่อสร้างสำเนาอาร์เรย์ของเรา มาตรวจสอบค่าของอาร์เรย์ของเราเพื่อให้แน่ใจว่าถูกต้อง:

console.log(berries);
console.log(fruits);

รหัสของเราส่งคืน:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

ค่า "Melon" ถูกเพิ่มลงในอาร์เรย์ "fruits" เท่านั้น เนื่องจากเราใช้ตัวดำเนินการการแพร่กระจายเพื่อสร้างอาร์เรย์ "เบอร์รี่" ที่ซ้ำกัน ตอนนี้อาร์เรย์ "ผลไม้" เป็นอาร์เรย์ของตัวเอง ค่าของมันจะแยกจากอาร์เรย์ "เบอร์รี่"

การใช้ for ลูป

วิธีที่พยายามและเป็นจริงโดยใช้ for loop เป็นวิธีที่ดีในการสร้างสำเนาของอาร์เรย์

วิธีนี้อาจไม่ได้รับความนิยมเท่ากับตัวดำเนินการสเปรด เนื่องจากต้องใช้โค้ดหลายบรรทัด จากที่กล่าวมา a for loop จะคัดลอกวัตถุได้ดี

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [];

for (var i = 0; i < berries.length; i++) {
	fruits[i] = berries[i]
}

เราได้ประกาศสองรายการ:ผลเบอร์รี่และผลไม้ ผลไม้เป็นรายการว่างในขั้นต้น จากนั้น เราใช้ for loop เพื่อวนซ้ำทุกรายการในรายการ "เบอร์รี่" สำหรับแต่ละรายการในรายการ ค่าจะถูกคัดลอกไปยังอาร์เรย์ "ผลไม้"

มาทดสอบกันเพื่อดูว่าอาร์เรย์ของเราแยกจากกันหรือไม่:

fruits.push("Grapefruit");
console.log(berries);
console.log(fruits);

รหัสของเราส่งคืน:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]

ความสำเร็จ! “ผลเบอร์รี่” และ “ผลไม้” เป็นสองอาร์เรย์ที่แยกจากกัน

การใช้ Array.from()

Array.from() วิธีการเปลี่ยนวัตถุ iterable ใด ๆ เป็นอาร์เรย์ โดยจะผ่านแต่ละรายการใน iterable และผนวกเข้ากับอาร์เรย์ใหม่ ซึ่งหมายความว่าสามารถใช้เพื่อคัดลอกอาร์เรย์ได้

มาสร้างสำเนาอาร์เรย์ "เบอร์รี่" ของเราอีกครั้ง:

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = Array.from(berries);

โซลูชันนี้ เช่นเดียวกับไวยากรณ์ตัวดำเนินการสเปรด ใช้โค้ดเพียงสองบรรทัดเท่านั้น เป็นวิธีที่มีประสิทธิภาพและกระชับในการคัดลอกอาร์เรย์ ตอนนี้ มาทำการทดสอบเพื่อตรวจสอบอาร์เรย์ใหม่ของเรา:

fruits.push("Pineapple");
console.log(berries);
console.log(fruits);

รหัสของเราส่งคืน:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]

อาร์เรย์ของเราได้รับการคัดลอกเรียบร้อยแล้ว

บทสรุป

การคัดลอกอาร์เรย์ใน JavaScript เป็นเรื่องง่ายเมื่อคุณรู้วิธี

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

คุณสามารถสร้างสำเนาของอาร์เรย์โดยใช้ตัวดำเนินการสเปรด, a for loop หรือ Array.from() กระบวนการ. ตอนนี้คุณก็พร้อมที่จะคัดลอกอาร์เรย์ใน JavaScript อย่างผู้เชี่ยวชาญแล้ว