Cinecus CC
Published on

แชร์ JavaScript Array Method ที่ใช้บ่อย ๆ ตอนที่ 3 : indexOf, find, findIndex

Overview

จากตอนที่สองเราได้รู้จักวิธีการใช้ map, filter และ reduce กันไปแล้ว วันนี้จะแชร์วิธีการค้นหาตำแหน่งของข้อมูลที่เราอยากค้นหากันครับ

Array Data

ก่อนอื่นขอสมมติข้อมูล Array ชื่อ customers_name ที่เก็บชื่อของลูกค้าเป็น string ขึ้นมา

index.js
const customers_name = ['Tom','Chis','Robert','Chis','Mark']

indexOf

indexOf เป็น Array Method ที่จะทำการค้นหา index โดยรับ argument 2 ค่า ค่าแรกคือค่าที่ต้องการค้นหา , ค่าที่สองคือค่า index เริ่มต้นที่ค้นหา

array.indexOf(search_item,start_index)

ตัวอย่างแรก : อยากหาตำแหน่งของคนชื่อว่า Tom

index.js
const index = customers_name.indexOf('Tom')

console.log('index', index)

ผลลัพธ์

index 0

ตัวอย่างที่ 2 : อยากหาตำแหน่งของคนชื่อว่า Chis โดย Chis ที่เห็นจะมี 2 คน ก็สามารถระบุได้ว่าอยากได้คนแรกหรือคนหลัง โดย default ของคำสั่งจะยึดเอาตำแหน่งตัวแรกที่เจอเสมอ

index.js
const index1 = customers_name.indexOf('Chis')
const index2 = customers_name.indexOf('Chis',2)

console.log('index1', index1)
console.log('index2', index2)

ผลลัพธ์

index1 1
index2 3

lastIndexOf

lastIndexOf จะเหมือนกับ indexOf ต่างกันที่ lastIndexOf จะไล่จากท้ายไปหน้าแทน

array.lastIndexOf(search_item,start_index)

ตัวอย่าง : อยากหาตำแหน่งของคนชื่อว่า Chis โดย Chis ที่เห็นจะมี 2 คน ถ้าไม่ระบุ index ที่เริ่มจะยึดเอาตำแหน่งแรกที่เจอ

index.js
const index1 = customers_name.lastIndexOf('Chis')

console.log('index1', index1)

ผลลัพธ์

index1 3

สมมติมีข้อมูลชุดใหม่ คือ customers โดยเป็น array ที่เก็บชุดข้อมูล object ที่มี feild คือ id, name, phone_number

index.js
const customers = [
    {
        id:101,
        name:'Tom',
        phone_number:'0900000000'
    },
    {
        id:102,
        name:'Chis',
        phone_number:'0900000001'
    },
    {
        id:103,
        name:'Robert',
        phone_number:'0900000002'
    },
    {
        id:104,
        name:'Chis',
        phone_number:'0900000003'
    },
    {
        id:105,
        name:'Mark',
        phone_number:'0900000004'
    },
]

ทีนี้จะลองใช้ indexOf ค้นหาตำแหน่งข้อมูลใน array ที่เป็น object ดูบ้าง

index.js
const index = customers.indexOf({
        id:105,
        name:'Mark',
        phone_number:'0900000004'
    })

console.log('index', index)

ผลลัพธ์

index -1

เห็นได้ว่า เราไม่สามารถใช้ indexOf หาตำแหน่งของ array ที่เป็น object ได้เลย ดังนั้นสิ่งที่จะมาช่วยก็คือ find และ findIndex นั่นเอง

find

find วิธีการใช้จะคล้ายกับ map โดยข้างในจะเป็น function ที่รับ argument ตัวแรกคือ element ตัวหลังตือ index แล้ว return ผลลัพธ์เป็นสิ่งที่เราต้องการหา find จะคืนค่าให้เป็นตัวแรกที่หาเจอเสมอ โดยเราสามารถเปลี่ยนแปลงค่าของ array ผ่าน find ได้ด้วย

array.find(element => condition)

ตัวอย่าง : ต้องการหา คนที่ชื่อ Mark และ เปลี่ยนชื่อเป็น MarkII

index.js
const find = customers.find((elemnt, i) => {
    return elemnt.name === 'Mark'
})

console.log('before', find)

find.name = 'MarkII'

console.log('after',find)

console.log('customers',customers)

ผลลัพธ์

before { id: 105, name: 'Mark', phone_number: '0900000004' }
after { id: 105, name: 'MarkII', phone_number: '0900000004' }
[
  { id: 101, name: 'Tom', phone_number: '0900000000' },
  { id: 102, name: 'Chis', phone_number: '0900000001' },
  { id: 103, name: 'Robert', phone_number: '0900000002' },
  { id: 104, name: 'Chis', phone_number: '0900000003' },
  { id: 105, name: 'MarkII', phone_number: '0900000004' }
]

findIndex

findIndex ใช้เหมือน find แต่ค่าที่ได้จะเป็น index แทน ถ้าต้องการเปลี่ยนแปลงข้อมูล array สามารถเข้าถึงได้จาก index ตามปกติ

array.findIndex(element => condition)

ตัวอย่าง : ต้องการหาตำแหน่ง คนชื่อ Mark และ เปลี่ยนชื่อเป็น MarkII

index.js
const find_index = customers.findIndex((elemnt, i) => {
    return elemnt.name === 'Mark'
})

console.log('find_index', find_index)

customers[find_index].name = 'MarkII'

console.log('customers',customers)

ผลลัพธ์

find_index 4
customers [
  { id: 101, name: 'Tom', phone_number: '0900000000' },
  { id: 102, name: 'Chis', phone_number: '0900000001' },
  { id: 103, name: 'Robert', phone_number: '0900000002' },
  { id: 104, name: 'Chis', phone_number: '0900000003' },
  { id: 105, name: 'MarkII', phone_number: '0900000004' }
]

สรุปการใช้ indexOf, lastIndexOf, find, findIndex

  • indexOf และ lastIndexOf ใช้กับ array ที่ข้างในเป็น string กับ number ได้ แต่ไม่สามารถใช้กับ object ได้
  • ถ้าค้นหาจาก object ใช้ find กับ findIndex
  • find จะเป็น pointer ที่ชี้ไปยัง object ใน array โดยค่า array จะเปลี่ยนไปด้วย ถ้าสิ่งที่ find มีการแก้ไข
  • กรณีถ้าหาค่าไม่เจอใน indexOf, lastIndexOf, findIndex จะได้ค่ากลับมาเป้น -1 แต่ find ได้ค่ากลับมาเป็น undefined

References