Cinecus CC
Published on

แชร์ JavaScript Array Method ที่ใช้บ่อย ๆ ตอนที่ 1 : Array iteration

Overview

ในการเขียนโค้ดหลีกเลี่ยงไม่ได้เลยที่จะต้องจัดการชุดข้อมูลที่เป็น Array วันนี้จะมาแชร์ Array function ที่ใช้บ่อย ๆ กัน ผมจะพยายามแบ่งกลุ่มของ function ที่มีลักษณะการทำงานคล้าย ๆ กัน โดยจะมีฟังก์ชั่นอะไรบ้างไปดูกันครับ

What is Array ?

Array เป็น data type ตัวนึงของ JavaScript ซึ่งถ้าคนเขียนภาษา Python มา มันก็คือ list นั่นเอง เราใช้ Array ในการทำงานเยอะมาก ๆ ไม่ว่าจะดึงข้อมูลจาก Database หรือ รับ-ส่ง API ยังไงก็ต้องได้ใช้ Array โดนเราสามารถเก็บ data type อื่นๆ ไว้ใน array ไม่ว่าจะเป็น object,number,string และสามารถเข้าถึงข้อมูลได้จาก index แต่ละตัวได้โดย index ก็จะเริ่มจาก 0

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

// การเข้าถึง index
console.log(programming_language[0])        // JavaScript

// จำนวนข้อมูลใน array
console.log(programming_language.length)    // 6

// การเปลี่ยนแปลงข้อมูลใน array
programming_language[0] = 'TypeScript'
console.log(programming_language)           // ['TypeScript','Python','Java','Go','C++','C#']

ในกรณีที่เราต้องการ clone ตัว array นี้จะทำอย่างไร ?

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

const programming_language_clone = programming_language
console.log(programming_language_clone)     // ['JavaScript','Python','Java','Go','C++','C#']

//ลองเปลี่ยนค่าของ index ตัวที่ 0 ใน array ต้นแบบ
programming_language[0] = 'TypeScript'
console.log(programming_language)           // ['TypeScript','Python','Java','Go','C++','C#']
console.log(programming_language_clone)     // ['TypeScript','Python','Java','Go','C++','C#']

สังเกตุว่าหากเรากำหนดค่า ตัวแปร programming_language_cloneให้เท่ากับ programming_language แต่ว่าทั้ง 2 ก็ยังเป็นตัวเดียวกัน คิดเสมือนว่า programming_language_clone เป็น pointer ชี้ไปหา programming_language

วิธีการ clone array ที่ถูกต้อง ควรจะเป้นดังนี้

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

const programming_language_clone = [...programming_language]
console.log(programming_language_clone)     // ['JavaScript','Python','Java','Go','C++','C#']

//ลองเปลี่ยนค่าของ index ตัวที่ 0 ใน array ต้นแบบ
programming_language[0] = 'TypeScript'
console.log(programming_language)           // ['TypeScript','Python','Java','Go','C++','C#']
console.log(programming_language_clone)     // ['JavaScript','Python','Java','Go','C++','C#']

for Loop (for,for in,for of,forEach)

ต่อมาเราจะพูดกันถึงเรื่อง iteration หรือการวน loop กัน โดยใน JavaScript จะมีการวนแบบ while loop เหมือนกัน แต่ขอไม่พูดถึง มาดูความแตกต่างของแต่ละ for กัน

for (ธรรมดา)

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

for(let i=0;i<programming_language.length;i++){
    console.log(`${i}: ${programming_language[i]}`)
}

ผลลัพธ์ :

0: JavaScript
1: Python
2: Java
3: Go
4: C++
5: C#

for in

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

for(const x in programming_language){
    console.log(`${x}: ${programming_language[x]}`)
}

ผลลัพธ์ :

0: JavaScript
1: Python
2: Java
3: Go
4: C++
5: C#

for of

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

for (const [index, element] of programming_language.entries()) {
    console.log(`${index}: ${element}`)
}

ผลลัพธ์ :

0: JavaScript
1: Python
2: Java
3: Go
4: C++
5: C#

forEach

index.js
const programming_language = ['JavaScript','Python','Java','Go','C++','C#']

programming_language.forEach((element,i)=>{
    console.log(`${i}: ${element}`)
})

ผลลัพธ์ :

0: JavaScript
1: Python
2: Java
3: Go
4: C++
5: C#

สรุปการใช้ for แต่ละแบบ

  • ถ้าเบื้องต้นคิดอะไรไม่ออกก็ใช้ for ธรรมดา
  • for in ค่าที่ได้เป็น index
  • for of ค่าที่ได้เป็น element
  • for of กับ forEach ทำงานคล้ายกันแต่ for of สามารถใช้ร่วมกับ break,continue ได้ และ for of ทำงานได้ไวกว่าด้วย

References