วันนี้ได้เตรียมโจทย์สำหรับสอน แล้วมีการใช้งาน unshift เลยขอโน๊ตไว้หน่อย เกี่ยวกับเทคนิคในการนำค่าเข้า หรือ ดึงค่าออกจาก array ซึ่งเราสามารถที่จะทำได้ทั้งค่าแรกและค่าสุดท้ายของ array ด้วย function push, pop, shift และ unshift

Mutate Array

การทำงานของทั้ง 4 คำสั่งนี้ จะเป็นการทำ mutate array เลยขอแวะอธิบาย mutate array ใน javascript กันก่อน

mutate array เป็นแนวคิดของการเปลี่ยนแปลงค่าในตัวแปรอาเรย์โดยตรง (การเปลี่ยนแปลงที่เกิดขึ้นกับอาเรย์เดิม) แทนที่จะสร้างอาเรย์ใหม่

const numberList = [1, 2, 3]; // arr = [1, 2, 3]
numberList.push(9); // arr = [1, 2, 3, 9]

การ push ค่าลงใน array

Mutating Methods

บาง methods ของ array จะเปลี่ยนแปลงค่าใน array ต้นฉบับโดยตรง เช่น

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

Immutable Methods

ส่วน methods ที่จะไม่เปลี่ยนแปลง array เดิม แต่สร้าง array จากค่าที่เปลี่ยนแปลงแล้ว เราสามารถใช้ methods ที่ไม่ Mutate ได้ เช่น

  • map()
  • filter()
  • slice()
  • concat()

สรุป คือ

  • Mutate Array เป็นการเปลี่ยน array ต้นฉบับ เช่น push, pop, splice
  • ไม่ Mutate Array (Immutable) เป็นการสร้าง array ใหม่ โดยไม่เปลี่ยน array เดิม เช่น map, filter, slice

ได้เวลาเข้าเรื่องหลัก...

.push()

เป็น function ที่ใช้กันบ่อยๆ เพราะว่าเป็น function ที่เพิ่มค่าเข้าไปที่ค่าสุดท้ายของ array โดย push นั้นจะทำการ mutate array ตัวเก่า

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

array.push(6)
console.log(array) // [1, 2, 3, 4, 5, 6]
console.log(array.length) // 6

การเพิ่มค่าเข้าไปที่ index สุดท้ายของ array ด้วย push

.pop()

ตรงข้ามกับ push ก็คือ pop ซึ่งเป็นการนำค่าใน index สุดท้ายออก และ return ค่านั้นออกมา ซึ่ง pop จะทำการ mutate array เช่นเดียวกันกับของ push ทำให้เวลาเราเรียก array เดิม ก็จะแสดงเป็น array ค่าใหม่ แต่ถ้าเรียก pop กับ array ว่าง ก็จะได้ค่าเป็น undefined แทน

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

array.pop()
console.log(array) // [1, 2, 3, 4]
console.log(array.length) // 4

การดึงค่า index สุดท้ายออกจาก array ด้วย pop

.unshift()

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

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

array.unshift(0)
console.log(array) // [0, 2, 3, 4, 5]
console.log(array.length) // 6

การเพิ่มค่า 0 เข้าไปที่ index แรกของ array ด้วย unshift

.shift()

ทีนี้ถ้าเราอยากดึงค่าใน index แรกของ array ออก ก็มี function shift ให้เราใช้ ซึ่งถ้าเกิดว่า array ที่เราจะ shift นั้นเป็น array ว่าง ค่าที่ return ออกมาก็จะเป็น undefined ครับ

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

array.shift()
console.log(array) // [2, 3, 4, 5]
console.log(array.length) // 4

การดึงค่าของ index แรกออกจาก array ด้วย shift

ข้อควรระวัง

อย่างที่ได้บอกไว้ข้างต้น ว่า การทำงานของคำสั่งทั้ง 4 ตัวนี้ จะเป็นการทำ mutate array จากตัวเก่า ดังนั้นในการใช้งานตัว push และ unshift นั้น เราจะเป็นการเพิ่มค่าเข้าไปใน array ซึ่งค่านั้นจะเป็นอะไรก็ได้ ไม่ว่าจะเป็น string, number, array และ object เมื่อเราใช้การ push/unshift array ที่ 2 เข้าไปใน array แรก ค่าที่เราจะได้ก็อาจจะเป็น array ซ้อน array ได้

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

array.unshift([9, 8, 7, 6])
console.log(array) // [ [ 9, 8, 7, 6 ], 1, 2, 3, 4, 5 ]
console.log(array.length) // 6

ถ้าหากมีการ unshift ค่าที่เป็น array จะได้เป็น array ซ้อน array

concat()

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

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

const newArray = [9, 8, 7, 6].concat(array)
console.log(newArray) // [9, 8, 7, 6, 1, 2, 3, 4, 5]
console.log(newArray.length) // 9

การแก้ไขกรณี array ซ้อน array ด้วย concat

spread operator (...)

หรือ เราอาจจะใช้ spread operator (...) การรวม array ทั้ง 2 ตัวเข้าด้วยกันก็ได้

const array = [1, 2, 3, 4, 5]
console.log(array) // [1, 2, 3, 4, 5]
console.log(array.length) // 5

const newArray = [9, 8, 7, 6, ...array]
console.log(newArray) // [9, 8, 7, 6, 1, 2, 3, 4, 5]
console.log(newArray.length) // 9

การรวม array ทั้ง 2 ตัว ด้วย spread operator

ในการใช้งาน array ยังมีคำสั่งให้เราได้ใช้งานอื่นๆ อีกมากมาย ลองเข้าไปอ่าน doc และลองเล่นกันดูได้

References