แนะนำ Array และ Object

รู้จักกับ Array

ตัวแปร Array

Array คือ สิ่งที่ใช้สำหรับเก็บตัวแปรที่สามารถเก็บข้อมูลมากกว่า 1 ข้อมูลได้ในตัวแปรเดียวกัน เช่น

• หากเราต้องการเก็บหมายเลข 3 ตัวจาก number1, number2, number3 ก็จะเปลี่ยนมาเก็บเป็น array number เป็นตัวแปรเดียวได้

ตัวอย่างการประกาศ array

// ประกาศ​ array เก็บ Number
let numbers = [1, 2, 3]

// ประกาศ array เก็บ String
let names = ['mike', 'test', 'unit']

// array สามารถผสมกันได้
let datas = [1, 'mike', false]

ทีนี้ วิธีการหยิบข้อมูลใน array มาใช้ เราจะอ้างอิงเป็นตำแหน่งใน array (เรียกว่า index) สามารถจิ้มไปยังตำแหน่งต่างๆใน Array ได้โดย

• ตำแหน่งแรกสุดของ Array คือ index 0 (ตำแหน่งแรกใน array เป็น 0)
• ตำแนห่งสุดท้ายใน Array คือ index ขนาด array - 1

ลองมาดูตัวอย่าง code นี้กัน

let names = ['mike', 'test', 'unit']

console.log(names[0]) // mike
console.log(names[1]) // test
console.log(names[2]) // unit

การจัดการ Array และ loop

ทีนี้จาก code ด้านบนเอง เราสามารถเข้าถึง Array แต่ละตัวได้ 2 วิธีคือ

• ใช้ for loop (แบบหัวข้อก่อนหน้านี้)
• ใช้ forEach สำหรับการอ้างอิงแต่ละ item ใน array

เราจะมาลองดูตัวอย่างการแสดง console.log แต่ละตัวแปรออกมาจากทั้ง 2 วิธีกัน

let names = ['mike', 'test', 'unit']

// วิธี for
for (let i = 0; i < names.length; i++) {
  console.log(i, names[i])
}

// วิธี forEach
names.forEach((name, i) => {
  console.log(i, name)
})

ซึ่ง array นั้นก็สามารถแทนค่าได้เหมือนกับตัวแปรทั่วไป แต่ Array เองก็มีคุณสมบัติการ modified array ซึ่งขอแนะนำ 2 วิธีที่สามารถจัดการได้ก่อนคือ

1. push = การต่อข้อมูลเข้าไปใน array
2. pop = การนำข้อมูลตัวสุดท้ายออกจาก array

เรามาลองดูตัวอย่างกัน

let names = ['mike', 'test']
names.push('tani') // ต่อข้อมูล String 'tani' เข้า array names เข้าไป

console.log(names) // ['mike', 'test', 'tani']

names.pop() // เอาตัวสุดท้ายออก
console.log(names) // ['mike', 'test']

รู้จักกับ Object

Object คือ collection ของคู่ key, value ที่สามารถเก็บข้อมูลหลากหลายประเภทไว้ในตัวแปรเดียวกันได้

จะแตกต่างกับ Array ตรงที่ตัวแปร Object นั้นจะเป็นตัวแปรที่เป็นข้อมูล "ตัวเดียว" ที่สามารถเก็บข้อมูลหลากหลายประเภทได้ ซึ่งมันจะสามารถใช้งานร่วมกับ Array ได้ (เดี๋ยวเราจะมาแนะนำเพิ่มเติมกัน)

ตัวอย่าง Object จะมีลักษณะประมาณนี้

• สมมุติเราจะเก็บข้อมูลบุคคลเอาไว้ในตัวแปร person
• โดยตัวแปรนั้นจะเก็บข้อมูล 3 อย่างเอาไว้คือ
  • ชื่อจริง (firstname)
  • นามสกุล (lastname)
  • อายุ (age)

// ประกาศตัวแปร Object
let person = {
  firstname: 'John',
  lastname: 'Doe',
  age: 25
}

เราจะเรียก firstname, lastname, age ว่า key และค่าที่อยู่หลัง ":" ว่า value เพราะฉะนั้น ตาม object ด้านบนนั้น

• key firstname มี value = 'John'
• key lastname มี value = 'Doe'
• key age มี value = 25

วิธีการ access เข้าไปใน value ของแต่ละ key เราจะใช้ . ในการ access เข้าถึงแต่ละ key

let person = {
  firstname: 'John',
  lastname: 'Doe',
  age: 25
}

// ลองแสดงแต่ละ value
console.log(person.firstname) // John
console.log(person.lastname) // Doe
console.log(person.age) // 25

นำ Object มาผสมกับ Array

ซึ่ง Object นั้นก็สามารถใช้คุณสมับัติร่วมกันกับ Array ได้เช่นกันเราจะลองพาทำคือ

1. สามารถใช้ร่วมกับ loop Array ได้

ตัวอย่าง code ลองใช้ for loop และ forEach loop ในการวนลูป array ของ Object

let persons = [
  { name: 'Mike', age: 24 },
  { name: 'Tanit', age: 30 }
]

// ใช้ for loop
for (let i = 0; i < persons.length; i++) {
  console.log(persons[i].name)
  console.log(persons[i].age)
}

// ใช้ forEach
persons.forEach(person => {
  console.log(person.name)
  console.log(person.age)
})

2. สามารถใช้ push, pop ในการเพิ่มข้อมูลเข้า Array

เรามาลองดูตัวอย่างกัน

let persons = [
  { name: 'Mike', age: 24 },
  { name: 'Tanit', age: 30 }
]

persons.push({
  name: 'Eiei',
  age: 20
})

console.log(persons)
/*
ผลลัพธ์ที่ได้
[
  { name: 'Mike', age: 24 },
  { name: 'Tanit', age: 30 },
  { name: 'Eiei', age: 20 }
]
*/

persons.pop() // เอาตัวสุดท้ายออก
console.log(persons)
/*
ผลลัพธ์ที่ได้
[
  { name: 'Mike', age: 24 },
  { name: 'Tanit', age: 30 },
]
*/