[Part 4] JS: Array & Object

Collections Variable

[Part 1] JS: Basic programming

กระบวนการพื้นฐานของโปรแกรม (Input-Process-Output) การเขียนโปรแกรมพื้นฐานประกอบด้วย 3 ขั้นตอนหลัก 1. Input: รับข้อมูลจากผู้ใช้ 2. Process: ประมวลผลข้อมูล 3. Output: แสดงผลลัพธ์ Syntax พื้นฐาน 1. คอมเมนต์ (Comment) * ใช้ // สำหรับคอมเมนต์บรรทัดเดียว * /* */ สำหรับหลายบรรทัด // This is a single-line comment console.log(“test

Pathompat SungpankhaoPathompat Sungpankhao

จากเรื่อง Variable หรือตัวแปร เราสามารถเก็บค่าใดค่าหนึ่งและนำมาใช้ในโปรแกรมของเราได้ แต่ถ้าเราต้องการเก็บค่ามากกว่า 1 ค่าหรือค่าที่มี key-value เราจะต้องใช้ตัวแปรเพิ่มเติมเหล่านี้

• Array
• Object

Array

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

// Variable
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Cherry";
console.log(fruit2); // Banana

// Array
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana

// Change value
fruits[1] = "Orange";
console.log(fruits[1])

Array Iteration

1. for loop

const fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

2. for...of

const fruits = ["Apple", "Banana", "Cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}

Array properties

• Array.length: ใช้เช็คจำนวนสมาชิกใน Array นั้น

Array methods

1. เพิ่มสมาชิกใหม่ - .push(), unshift()

fruits.push("Durian"); // เพิ่มท้าย
fruits.unshift("Avocado"); // เพิ่มหน้า

2. ลบสมาชิก - .pop(), shift()

fruits.pop(); // ลบตัวสุดท้าย
fruits.shift(); // ลบตัวแรก

3. เรียงลำดับสมาชิก - .sort()

fruits.sort();

4. Copy array ไปที่ตัวแปรใหม่ - .slice()

const newFruits = fruits.slice();

5. วนลูปสมาชิก - .forEach()

ใช้เรียกฟังก์ชันกับสมาชิกแต่ละตัว

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

6. map()

สร้าง Array ใหม่จากการแปลงค่าของสมาชิกเดิม:

const fruits = ["Apple", "Banana", "Cherry"];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);

7. filter()

สร้าง Array ใหม่จากสมาชิกที่ตรงตามเงื่อนไข:

const fruits = ["Apple", "Banana", "Cherry"];
const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits);

8. reduce()

รวมค่าของสมาชิกทั้งหมดเป็นค่าเดียว

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

Nested Array, 2D Array, Multi-dimensional Array

คือ Array ที่มี Array ซ้อนอยู่ข้างใน (คล้ายกล่องในกล่อง) ตัวอย่างโจทย์ที่ใช้ใน 2D array

• Matrix
• ตาราง Excel

ตัวอย่างสิ่งที่ใช้ใน 3D Array

• ไฟล์รูป RGB
• ไฟล์วิดีโอ

ตัวอย่าง code:

const matrix = [
  [1, 2, 3],    
  [4, 5, 6], 
  [7, 8, 9] 
];

console.log(matrix[0][1]); // 2
console.log(matrix[2][0]); // 7

// Loop in 2d array
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
  }
}

Object คืออะไร?

Object คือชุดของ key-value pairs (คล้าย dictionary ใน Python) มีประโยชน์ในการใช้เก็บข้อมูลที่มีความเกี่ยวข้องกัน ลดการประกาศตัวแปรได้

// Use variable
// const personFirstName = "John";
// const personLastName = "Doe";
// const personAge = 30;
// const personIsStudent = false;

// Use object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  isStudent: false
};

console.log(person.firstName); // John
console.log(person["age"]);    // 30

เพิ่ม/แก้ไข/ลบข้อมูลใน object

person.age = 31;              // แก้ค่า
person.country = "Thailand";  // เพิ่ม key ใหม่
delete person.isStudent;      // ลบ key

Loop object

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Nested Object

const user = {
  name: "Nina",
  address: {
    city: "Bangkok",
    zip: 10200
  }
};
console.log(user.address.city)

Array of Object

Array ที่ภายในมี object หลายตัว

const users = [
  { id: 1, name: "Alice", isActive: true },
  { id: 2, name: "Bob", isActive: false },
  { id: 3, name: "Charlie", isActive: true }
];

Loop through Array of Object

users.forEach(user => {
  console.log(`${user.name} is ${user.isActive ? "active" : "inactive"}`);
});

การใช้ Method Array ร่วมกับ Object

// Filter only active user
const activeUsers = users.filter(user => user.isActive);
console.log(activeUsers);

// Find first user name = Bob
const found = users.find(user => user.name === "Bob");
console.log(found);

// Map user name to array
const names = users.map(user => user.name);
console.log(names);

Excercise

1. รับค่า input จาก user 5 ครั้งเป็นตัวเลข จากนั้นแสดงผลลัพธ์
   1. แสดงข้อมูลใน index ที่ 2 ออกมา
   2. แสดงผลรวมของค่าใน array นี้
   3. แสดงตัวเลขที่น้อยที่สุดของ array นี้
2. รับ input ข้อมูลนักเรียน ดังนี้
   1. ชื่อจริง
   2. นามสกุล
   3. ชื่อเล่น
   4. อายุ
1. แสดงข้อมูลนักเรียนคนนี้ทั้งหมดผ่าน console.log
3. รับข้อมูลจากข้อ 2 เป็นกลุ่มนักเรียน 3 คน (ใช้ Array object) จากนั้นแสดงค่าดังนี้
   1. แสดงข้อมูลชื่อจริงนักเรียนทั้งหมด
   2. แสดงอายุเฉลี่ยของนักเรียน 3 คนนี้
   3. แสดงชื่อเล่นของนักเรียนที่อายุมากที่สุดในนี้

Assignment

const users = [
  {
    id: 1,
    username: "nina123",
    password: "Nina@1234",
    firstname: "Nina",
    lastname: "Supakorn"
  },
  {
    id: 2,
    username: "john99",
    password: "john#2023",
    firstname: "John",
    lastname: "Doe"
  },
  {
    id: 3,
    username: "alicex",
    password: "alice456",
    firstname: "Alice",
    lastname: "Tanaka"
  },
  {
    id: 4,
    username: "bee_admin",
    password: "BeeAdmin01#",
    firstname: "Bee",
    lastname: "Phuwanai"
  },
  {
    id: 5,
    username: "mike_dev",
    password: "devMike@1",
    firstname: "Mike",
    lastname: "Somsri"
  }
];

1. จากโปรแกรมในบทความที่แล้วให้เปลี่ยนแปลงการเช็ค username และ password จาก Array Object ด้านบนแทน
2. เงื่อนไขการเช็ค password เมื่อ user พิมพ์ username และ password มาแล้ว ให้เช็คว่ามี username, password ตรงกับข้อมูลใดใน Array นี้ไหม ถ้ามี = Login passed, ถ้าไม่มี login failed
3. จากข้อมูลข้างบนให้เพิ่ม field เก็บข้อมูลการเรียนเป็น object ใน user mike_dev โดยมี
   1. ชื่อคอร์ส
   2. เวลาทั้งหมดในคอร์ส (นาที)
   3. เวลาที่ user เรียนไป (นาที)
   4. วันเวลาหมดอายุของคอร์ส
4. เมื่อ user ที่ login มีประวัติการเรียน ให้แสดงผล ชื่อคอร์ส และเวลาที่ user เรียนไป (นาที) ด้วย ตัวอย่าง

Please input username: mike_dev
Please input password: devMike@1
Login passed
Your course
Name: Programming 101
Time used: 300 minutes

Reference

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

[Part 3] Python 101: Collections

Collections Variable จากที่เรียนตัวแปรและชนิดของตัวแปรไปเมื่อคราวที่แล้ว [Part 1] Python 101: Basic programmingBasic Process Basic syntax 1. Comment ใช้ # คั่นข้างหน้าสุด ส่วนนั้นจะไม่ทำงาน ใช้อธิบายโค้ดหรือใช้โน้ตสำหรับ Developer # Hello Python 2. Output # print hello world print(“Hello

Pathompat SungpankhaoPathompat Sungpankhao