Array.splice() และ Array.slice() ทั้งคู่เป็นเมธอดใน JavaScript ที่ชื่อคล้ายกัน แต่ทำหน้าที่ต่างกัน โดยสามารถเปรียบเทียบแบบเห็นภาพง่ายๆ ได้ดังนี้
1. Array.splice() – เป็นการตัดแปะ: ลบ/แทรก/แทนที่ ค่าภายในอาร์เรย์เดิม
• ใช้เพื่อ: ลบ หรือ เพิ่มค่าเข้าไปในอาร์เรย์ ณ ตำแหน่งที่ระบุ
• ผลลัพธ์: คืนค่าที่ถูกลบออก และเปลี่ยนอาร์เรย์ต้นฉบับ
array.splice(start, deleteCount, item1, item2, …)
คำอธิบาย
start: ตำแหน่งที่จะเริ่มลบ
deleteCount คือ “จำนวนสมาชิกที่ต้องการลบ” เริ่มจากตำแหน่ง start แต่ถ้า deleteCount = 0 → ไม่ลบ แต่สามารถ “แทรก” ค่าได้
item1, item2, … คือ สมาชิกใหม่ ที่ต้องการเพิ่มเข้าไปใน Array ณ ตำแหน่ง start ที่ระบุไว้ ถ้ามีมากกว่าหนึ่งสมาชิก จะเพิ่มเข้ามาทั้งหมดในตำแหน่งที่กำหนด หลังจากการลบสมาชิกตาม start และ deleteCount ที่กำหนด
ตัวอย่าง
1.1. ลบสมาชิกในอาร์เรย์
let fruits = [“apple”, “banana”, “orange”];
fruits.splice(1, 1, “grape”);
// ลบ “banana” ที่ index 1 แล้วใส่ “grape” แทน
// ผลลัพธ์ คือ fruits = [“apple”, “grape”, “orange”]
let arr = [“a”, “b”, “c”, “d”];
arr.splice(1, 2);
// เริ่มที่ index 1 (“b”) แล้วลบ 2 ตัว (“b” และ “c”)
// ผลลัพธ์ คือ arr = [“a”, “d”]
1.2. ไม่ลบ แต่แทรกเข้าไป
let arr = [“a”, “b”, “c”];
arr.splice(1, 0, “x”);
// เริ่มที่ index 1, ไม่ลบเลย (deleteCount = 0), แทรก “x”
// ผลลัพธ์คือ arr มีค่าเป็น [“a”, “x”, “b”, “c”]
1.3. ลบและแทรกพร้อมกัน
let arr = [“a”, “b”, “c”];
arr.splice(1, 1, “x”, “y”);
// ลบ 1 ตัวที่ index 1 (“b”) แล้วแทรก “x” และ “y”
// ผลลัพธ์คือ arr มีค่าเป็น [“a”, “x”, “y”, “c”]
2. Array.slice() – เป็นการแยกสำเนา ดึงบางส่วนออกมา โดยไม่กระทบอาร์เรย์เดิม
- ใช้เพื่อ: คัดลอกบางส่วนของอาร์เรย์ โดยไม่กระทบอาร์เรย์เดิม
- ผลลัพธ์: คืนอาร์เรย์ใหม่
array.slice(start, end)
คำอธิบาย
start: ตำแหน่งเริ่มต้น (รวมตำแหน่งนี้ด้วย)
end: ตำแหน่งสุดท้าย (ไม่รวมตำแหน่งนี้)
ตัวอย่าง
let fruits = [“apple”, “banana”, “orange”];
let newFruits = fruits.slice(1, 2);
// ผลลัพธ์ คือ newFruits = [“banana”]
// fruits = [“apple”, “banana”, “orange”]; ยังคงเหมือนเดิม
สรุปเนื้อหา
splice = “แทรกหรือลบ” → เปลี่ยนของเดิม
slice = “ตัดบางส่วนออก” → ไม่กระทบของเดิม
