มาเข้าใจความแตกต่างระหว่าง slice() กับ splice() ของ Array[…] กันเถอะ

ชื่อนี้มีแต่ความสับสน

เชื่อว่าหลายๆ คนคงเคยสับสนระหว่าง slice กับ splice ใน JavaScript อย่างแน่นอน ด้วยความที่ชื่อมันคล้ายกันจนบางทีก็ยังเรียกกันผิดๆ ถูกๆ แต่จริงๆ แล้ว หน้าที่ของทั้งสอง method มีความแตกต่างกันอยู่พอสมควร เอาเป็นว่าเรามาทำความเข้าใจกับหน้าที่ของแต่ละ method กันดีกว่า

.slice()

มาเริ่มกันที่ slice ที่เป็น method หนึ่งของ array กันก่อน คำว่า slice ถ้าแปลแบบตรงตัวหน่อย ก็จะแปลว่า “การหั่น” ซึ่งหน้าที่ของมันก็ตรงตามคำแปลนั่นแหละ โดย slice จะทำการ return array ใหม่ ที่ค่าภายในคือส่วนที่หั่นออกจาก array เดิม ซึ่ง parameters ที่ slice รับเข้าไปคือ ค่า index เริ่มต้น และ ค่า index สุดท้าย ที่เราต้องการจะหั่น

array.slice(begin, end)

ถ้าหากว่าไม่ได้ทำการใส่ ค่า index สุดท้าย slice จะทำการหั่นตั้งแต่ index เริ่มต้นถึง index สุดท้ายของ array ให้เอง แต่ถ้าหากว่าใส่ค่า index สุดท้ายเข้าไปด้วย ค่าของ index สุดท้ายใน array ที่เราเลือกจะไม่ถูก return ออกมาด้วย!!! อ่านแล้วอาจจะงงๆ เอาเป็นว่าดูตัวอย่างแล้วกัน

ปล. slice ยังสามารถใช้งานร่วมกับ string ได้อีกด้วยนะ

.splice()

ถึงแม้ว่า splice นั้นจะมีชื่อคล้ายๆ กับ slice แต่ว่า splice จะทำการเปลี่ยนแปลง array ตัวเก่า ไม่ได้สร้าง array ใหม่เหมือนกับ slice โดยมันสามารถที่จะนำมาใช้ใน การเพิ่มค่าเข้า หรือดึงค่าออก จาก array แต่ว่าการทำงานของมันค่อนข้างจะเข้าใจยากอยู่พอสมควร แต่จะลองพยายามอธิบายให้เข้าใจง่ายๆ ละกันนะ

array.splice(start, deleteCount, item1, item2, ...)

มาดู การดึงค่าออกจาก array ด้วย splice กันก่อน โดย parameter ที่ส่งเข้าไปให้กับ splice เพื่อดึงค่าออกจาก array ก็จะมี ค่า index เริ่มต้น เป็นค่าแรก ส่วนค่าที่สองก็คือ จำนวนของ item ที่เราต้องการจะตัดออก

ส่วน การเพิ่มค่าเข้าไปยัง array นั้น เราจะต้องมีการส่ง parameter ของค่าที่เราต้องการส่งเข้าไป โดยเราสามารถเพิ่มเข้าไปได้มากกว่า 1 ค่า แต่ว่า parameter deleteCount จะต้องเป็น 0

แต่ถ้าหากว่าเราต้องการที่จะเปลี่ยนค่าใน array เป็นค่าใหม่ เราจะต้องใช้ท่า การดึงค่าออก และ การเพิ่มค่าเข้า พร้อมกัน

สรุป

slice นั้นเป็นการหั่นส่วนของ array ตาม index ที่เราต้องการ และ return ออกมาเป็น array ใหม่ แต่ว่า splice จะเป็นการเปลี่ยนแปลงค่าใน array เดิม ซึ่งเราสามารถที่จะ เพิ่ม ลด หรือ แทนที่ ค่าใน array ได้

ก็หวังว่าอ่านบทความนี้แล้วจะเข้าใจความแตกต่างระหว่าง slice กับ splice กันมากขึ้นนะครับ โดย splice นั้นอาจจะเข้าใจยากหน่อย เพราะว่ามันสามารถรับ parameter ได้หลายตัว และมีหน้าที่มากกว่าหนึ่งนั่นเองครับ

References

slice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

splice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice