Skip to main content

Array Methods

Arrays มี Methods ให้เราใช้หลายตัวมาก นำไปใช้ประโยชน์ได้ค่อนข้างเยอะ และทำให้เราทำงานได้ง่ายขึ้น

Add/Remove items

เรารู้จัก Methods การทำงานพวกนี้มาบ้างแล้วจากหัวข้อก่อนหน้านี้

  • arr.push(...items) สำหรับการเพิ่มไอเทมด้าน
  • arr.pop() สำหรับการเอาไอเทมออกจากด้านหลัง
  • arr.shift() สำหรับการเอาไอเทมออกจากด้านหน้า
  • arr.unshift(...items) สำหรับการเพิ่มไอเทมเข้าด้านหน้า

sprice

เราสามารถลบ Element ออกจาก Array ได้ไหม ?

Array ก็คือ Object เราลองมาใช้ delete ดู

let arr = ["Apple", "Banana", "Watermelon"];

delete arr[1]; // ลบ "Banana"

console.log( arr[1] ); // undefined

// now arr = ["Apple",  , "Watermelon"];
console.log( arr.length ); // 3

Element ถูกลบก็จริงแต่ว่าจำนวนใน Array ยังมีค่าเป็นเท่าเดิม ซึ่งอาจทำให้มีปัญหาในการทำงานในอนาคตเพราะฉะนั้นเราจะไปใช้การลบรูปแบบอื่น

arr.splice method เป็นเหมือนกับอาวุธของ Array เพราะมันสามารถทำงานได้ทุกอย่าง ไม่ว่าจะเป็น เพิ่ม, ลบ, ทับค่าเดิม

Syntax:

arr.splice(start[, deleteCount, elem1, ..., elemN])

โดยมันจะเริ่มทำงานจาก index start และ deleteCount คือจำนวนที่จะลบ ซึ่งเริ่มจาก index start และสามารถเพิ่ม elem1, ..., elemN แทนที่ที่เราลบไปได้และจะ return ค่ากลับมาเป็น elements ที่เราลบออกไป

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // from index 1 remove 1 element

alert( arr ); // ["I", "JavaScript"]

โดยตัวอย่างนี้ก็คือการเริ่ม index 1 และลบ 1 element

ต่อมาจะเป็นตัวอย่างการลบ 3 elements และ replace 2 element

let arr = ["I", "study", "JavaScript", "right", "now"];

// remove 3 first elements and replace them with another
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

ต่อมาเราจะมาดูค่า element ที่ถูกลบที่ splice return กลับมาให้

let arr = ["I", "study", "JavaScript", "right", "now"];

// remove 2 first elements
let removed = arr.splice(0, 2);

alert( removed ); // "I", "study" <-- array of removed elements

splice สามารถเพิ่มโดยที่ไม่ต้องลบ elements ใด ๆ ออกก็ได้ โดยแค่ตั้ง deleteCount เป็น 0

let arr = ["I", "study", "JavaScript"];

// from index 2
// delete 0
// then insert "complex" and "language"
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

splice สามารถเริ่มจาก index ติดลบได้ซึ่งก็จะนับตำแหน่งจากด้านหลัง

let arr = [1, 2, 5];

// from index -1 (one step from the end)
// delete 0 elements,
// then insert 3 and 4
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

slice

arr.slice จะมีความง่ายกว่า และคล้ายกับ arr.splice

arr.slice([start], [end])

มันจะคืนค่า array ตัวใหม่โดยเริ่มจาก index start ถึง end (แต่ไม่รวมตัว end ) ซึ่ง start กับ end สามารถติดลบได้

method นี้มีความเหมือนกับ str.slice จาก substrings เป็น subarrays

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (copy from 1 to 3)

alert( arr.slice(-2) ); // s,t (copy from -2 till the end)

เราสามารถเรียกใช้ arr.slice() โดยไม่ต้องใส่ arguments ได้ซึ่งมันจะเป็นการ clone arr โดยการทำงานกับ arr ใหม่ที่ได้รับมาจะไม่ไปยุ่งกับ arr เดิม

concat

arr.concat จะสร้าง array ใหม่โดยเป็นการรวมกับ array อื่น ๆ

arr.concat(arg1, arg2...)

ซึ่งไม่จำเป็นจะต้องเป็น array อย่างเดียวเราจะใส่เป็น data type อะไรก็ได้ซึ่งมันจะไปเพิ่มข้อมูลข้อมูลเข้าไปใน array ตามตัวอย่างด้านล่างนี้

let arr = [1, 2];

// create an array from: arr and [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4

// create an array from: arr and [3,4] and [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// create an array from: arr and [3,4], then add values 5 and 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

โดยปกติ method concat จะรับค่า array เป็นหลักแต่ก็สามารถรับค่าเดี่ยว ๆ ที่ไม่ใช่ array ได้แบบตัวอย่างด้านบน ทีนี้ถ้าเรามี array-like object แล้วเราต้องการ concat กับ array จะมีปัญหาตามตัวอย่างด้านล่าง

let arr = [1, 2];

let arrayLike = {
  0: "something",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

แต่ถ้า array-like object ของเรามี property Symbol.isConcatSpreadable จะสามารถ concat ได้ตามปกติ

let arr = [1, 2];

let arrayLike = {
  0: "something",
  1: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,something,else

Iterate: forEach

arr.forEach เป็น method ที่จะทำการ loop แล้วนำข้อมูลใน array ออกมาทีละตัวผ่าน callback function โดย callback function จะส่ง arguments เข้ามาทั้งหมด 3 ตัวดังนี้ item , index , array

arr.forEach(function(item, index, array) {
  // ... do something with an item
});

นี่คือตัวอย่างการใช้ method forEach

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

Searching in array

ต่อมาเรามาดูหัวข้อของการค้นหาข้อมูลใน array กัน

indexOf/lastIndexOf and includes

arr.indexOf และ arr.includes มีความคล้ายกันอย่างมากต่างกันแค่ array.indexOf จะ return index ของ item ที่เราต้องการหา ส่วน arr.includes จะ return boolean ว่ามี item ที่เราต้องการอยู่ใน array หรือใหม่

array.indexOf(item, from) จะหา item โดยเริ่มจาก index from ถ้าหาเจอก็จะ return index ของ item นั้น ๆ ออกมาแต่ถ้าหาไม่เจอจะ return -1

array.includes จะหา item โดยเริ่มจาก index from ถ้าหาเจอจะ return true แต่ถ้าหาไม่เจอจะ return false

ตัวอย่างดังนี้

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

สิ่งหนึ่งที่ควรทราบคือ method indexOf เป็นการเปรียบเทียบแบบ strict หรือ === ซึ่งต่อให้ข้อมูลจะเหมือนกันแต่ถ้าชนิดข้อมูลไม่เหมือนกันก็จะได้ return เป็น false

แล้วถ้าเราแค่อยากตรวจสอบว่ามี item ที่เราต้องการใน array หรือไม่โดยไม่ได้นำ index ไปใช้งานต่อใช้ arr.includes ก็เพียงพอ แต่ถ้าเราต้องการนำ index ไปทำงานต่อก็ควรจะใช้ array.indexOf

มี arr.lastIndexOf คือเหมือนกัน array.indexOf เลยแต่แค่เริ่มทำงานจาก ขวาไปซ้าย

let fruits = ['Apple', 'Orange', 'Apple']

alert( fruits.indexOf('Apple') ); // 0 (first Apple)
alert( fruits.lastIndexOf('Apple') ); // 2 (last Apple)