ใน JavaScript การคัดลอก array ไม่ได้ง่ายแค่ใช้ assignment operator (=) สร้าง duplicate ถ้าคุณเคยลอง คุณจะประหลาดใจว่ามันสร้างแค่ link ไปที่ original list เท่านั้น ปัญหาคืออะไร?
ในคู่มือนี้ เราจะพูดถึงวิธีคัดลอก JavaScript array จะเดินทางผ่านโค้ดสำหรับสาม JavaScript copy array strategies เพื่อให้คุณเริ่มคัดลอก arrays ได้
ปัญหากับการคัดลอก JavaScript Arrays
ในระดับหนึ่ง "=" operator สร้าง copy ของ array เข้า variable ใหม่ แต่มันเป็น pointer มากกว่า copy เพราะ "=" operator สร้าง reference ไปที่ original array ไม่สร้าง duplicate ของ existing array
ลองสร้าง copy ของ array ด้วย assignment operator โดยไม่มีโค้ดอื่น:
var berries = ["Strawberry", "Gooseberry", "Raspberry"]; var fruits = berries; console.log(fruits);
โค้ดคืนค่า:
[ "Strawberry", "Gooseberry", "Raspberry" ]
ดูเหมือน array ถูกคัดลอก "fruits" มีค่าทั้งหมดจาก "berries" array
ตอนนี้ลองเพิ่ม item เข้า "fruits" array:
fruits.push("Melon"); console.log(fruits); console.log(berries);
เราเพิ่ม "Melon" เข้า fruits array แล้วพิมพ์ค่าของ "fruits" และ "berries" ไปที่ console:
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ] [ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
ทั้ง "fruits" และ "berries" มีค่าเหมือนกัน เพราะเราไม่ได้ clone array จริง แค่สร้าง reference ไปที่มัน
ทุกครั้งที่เรา manipulate "berries" array การเปลี่ยนแปลงจะเกิดใน "fruits" array ด้วย
วิธีคัดลอก JavaScript Array
Assignment operator ไม่คัดลอก array เราต้องใช้วิธีอื่น โชคดีที่มีหลายวิธีสร้าง copy ของ array สามวิธีชั้นนำคือ:
- ใช้ spread operator
- ใช้ for loop
- ใช้ Array.from
มา обсуждать ทีละอย่าง
ใช้ Spread Operator
Spread operator เป็นฟีเจอร์ที่มาพร้อม JavaScript ES6 อนุญาตให้เข้าถึงเนื้อหาของ iterable object ใช้สร้าง shallow copy ของ array บ่อย
Spread operator ประกอบด้วยสามจุด เหมือน ellipsis (…) ลองสร้าง copy ของ "berries" array จากก่อนหน้า:
var berries = ["Strawberry", "Gooseberry", "Raspberry"]; var fruits = [...berries]; fruits.push("Melon");
เราใช้ spread operator สร้าง copy ของ array ลองเช็คค่าของ arrays ว่าถูกต้องไหม:
console.log(berries); console.log(fruits);
โค้ดคืนค่า:
[ "Strawberry", "Gooseberry", "Raspberry" ] [ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
ค่า "Melon" เพิ่มเข้า "fruits" array เท่านั้น เพราะเราใช้ spread operator สร้าง duplicate ของ "berries" array ตอนนี้ "fruits" array เป็น array ของมันเอง ค่าของมันแยกจาก "berries" array
ใช้ For Loop
วิธีพื้นฐาน ใช้ for loop เป็นวิธีดีสำหรับสร้าง copy ของ array
วิธีนี้อาจไม่ได้รับความนิยมเท่า spread operator เพราะต้องโค้ดหลายบรรทัด แต for loop คัดลอก object ได้ดี
var berries = ["Strawberry", "Gooseberry", "Raspberry"]; var fruits = []; for (var i = 0; i < berries.length; i++) { fruits[i] = berries[i] }
เราประกาศสองลิสต์: berries และ fruits fruits เริ่มต้นเป็นลิสต์ว่าง แล้วใช้ for loop วนลูปทุก item ใน "berries" list สำหรับแต่ละ item ค่าจะถูกคัดลอกเข้า "fruits" array
ลองรัน test ดูว่า arrays แยกกันไหม:
fruits.push("Grapefruit"); console.log(berries); console.log(fruits);
โค้ดคืนค่า:
[ "Strawberry", "Gooseberry", "Raspberry" ] [ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]
สำเร็จ! "berries" และ "fruits" เป็นสอง arrays แยกกัน
ใช้ Array.from()
Array.from() method เปลี่ยน iterable object ใดๆ ให้เป็น array มันผ่านทุก item ใน iterable และ append เข้า array ใหม่ หมายความว่ามันใช้คัดลอก array ได้
ลองสร้าง copy ของ "berries" array อีกครั้ง:
var berries = ["Strawberry", "Gooseberry", "Raspberry"]; var fruits = Array.from(berries);
วิธีนี้ เหมือน spread operator syntax ใช้แค่สองบรรทัด วิธีมีประสิทธิภาพและสั้นกระชับสำหรับคัดลอก array ตอนนี้ลองรัน test เช็ค arrays ใหม่:
fruits.push("Pineapple"); console.log(berries); console.log(fruits);
โค้ดคืนค่า:
[ "Strawberry", "Gooseberry", "Raspberry" ] [ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]
Arrays ของเราถูกคัดลอกสำเร็จ
สรุป
การคัดลอก array ใน JavaScript ง่ายตอนคุณรู้วิธี
Assignment operator ไม่พอคัดลอก array ถ้าอยากสร้าง separate version ของ array เพราะ assignment operator สร้าง pointer ไป existing array ไม่สร้าง array ใหม่
คุณสามารถสร้าง copy ของ array ด้วย spread operator, for loop, หรือ Array.from() method ตอนนี้คุณพร้อมคัดลอก arrays ใน JavaScript แบบมืออาชีพแล้ว
