การใช้งาน Array ในภาษา TypeScript แบบง่ายๆ

สวัสดีครับผู้อ่านทุกท่าน! วันนี้เราจะมาทบทวนพื้นฐานของการใช้ `Array` ในภาษา TypeScript ซึ่งเป็นภาษาโปรแกรมที่ทรงพลังและเหมาะสำหรับการพัฒนาเว็บแอปพลิเคชัน ในบทความนี้เราจะพูดถึงวิธีการสร้างและจัดการ `Array` รวมถึงตัวอย่าง Code ที่ใช้ง่ายและสามารถนำไปประยุกต์ใช้ในโลกจริง อย่างเช่นการเก็บข้อมูลรายชื่อผู้ใช้ หรือการจัดการข้อมูลสินค้าในร้านค้าออนไลน์

วิธีการสร้าง Array ใน TypeScript

ใน TypeScript การสร้าง Array นั้นทำได้หลายวิธี โดยสามารถใช้การประกาศตัวแปรได้หลายแบบ เช่น

 let fruits: string[] = ['Apple', 'Banana', 'Cherry'];

ในที่นี้ เราประกาศตัวแปร `fruits` ซึ่งเป็น Array ของประเภท `string` และได้ทำการกำหนดค่าเบื้องต้นเป็นรายการผลไม้

นอกจากนี้ เรายังสามารถใช้ `Array` constructor เพื่อสร้าง `Array` ได้อีกด้วย:

 let numbers: Array<number> = new Array(1, 2, 3);

การเข้าถึงและแก้ไขค่าใน Array

การเข้าถึงค่าภายใน Array สามารถทำได้โดยใช้ดัชนี (index) ซึ่งเริ่มต้นที่ 0 ดังนี้:

 console.log(fruits[0]); // Output: Apple

ถ้าต้องการแก้ไขค่าใน Array ก็สามารถทำได้เช่นกัน:

 fruits[1] = 'Blueberry';
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']

ฟังก์ชันที่ใช้กับ Array

TypeScript มีฟังก์ชันมากมายที่ช่วยในการจัดการกับ Array เช่น `push()`, `pop()`, `map()`, `filter()`, และ `reduce()` ดังนี้:

1. push() และ pop()

ฟังก์ชัน `push()` ใช้ในการเพิ่มค่าลงใน Array และ `pop()` ใช้ในการลบค่าออกจากตอนท้ายของ Array

 fruits.push('Mango');
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry', 'Mango']

fruits.pop();
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']

2. map()

ฟังก์ชัน `map()` ใช้ในการสร้าง Array ใหม่จาก Array เดิมโดยการทำงานกับทุกองค์ประกอบใน Array:

 let fruitLengths = fruits.map(fruit => fruit.length);
console.log(fruitLengths); // Output: [5, 9, 6]

3. filter()

ฟังก์ชัน `filter()` ใช้ในการกรองข้อมูลออกจาก Array โดยเก็บเฉพาะค่าที่ตรงตามเงื่อนไข:

 let longFruits = fruits.filter(fruit => fruit.length > 6);
console.log(longFruits); // Output: ['Blueberry', 'Cherry']

4. reduce()

ฟังก์ชัน `reduce()` ใช้ในการรวมค่าใน Array เข้าด้วยกันเป็นค่าทีเดียว:

 let totalLength = fruits.reduce((total, fruit) => total + fruit.length, 0);
console.log(totalLength); // Output: 20

Use Case ในโลกจริง

การใช้ Array ใน TypeScript สามารถนำไปประยุกต์ใช้ได้หลายด้าน ในที่นี้เราจะยกตัวอย่างการจัดการข้อมูลสินค้าในร้านค้าออนไลน์

ตัวอย่างการใช้งานจริง

สมมติว่าเรามีร้านค้าออนไลน์ที่ขายสินค้า และเราต้องการเก็บข้อมูลสินค้าทั้งหมดใน Array

 interface Product {
    id: number;
    name: string;
    price: number;
    category: string;
}

let products: Product[] = [
    { id: 1, name: 'Laptop', price: 90000, category: 'Electronics' },
    { id: 2, name: 'Smartphone', price: 25000, category: 'Electronics' },
    { id: 3, name: 'Shoes', price: 3000, category: 'Fashion' },
];

// การเพิ่มสินค้าใหม่
products.push({ id: 4, name: 'T-shirt', price: 500, category: 'Fashion' });

// การกรองสินค้าในหมวด 'Electronics'
let electronics = products.filter(product => product.category === 'Electronics');

// การคำนวณค่าใช้จ่ายรวมของสินค้าทั้งหมด
let totalCost = products.reduce((total, product) => total + product.price, 0);

console.log(electronics);
console.log(`Total cost of products: ${totalCost}`);

ในตัวอย่างนี้ เราได้สร้าง `interface` สำหรับ `Product` และใช้ Array `products` เพื่อเก็บข้อมูลสินค้า โดยเราสามารถเพิ่มสินค้าใหม่ กรองสินค้าตามหมวดหมู่ หรือคำนวณค่าใช้จ่ายรวมได้ง่ายดาย

สรุป

Array ใน TypeScript เป็นเครื่องมือที่มีประโยชน์และหลากหลาย สามารถนำไปประยุกต์ใช้ในการจัดการข้อมูลในหลายบริบท เช่น การจัดเก็บข้อมูลผู้ใช้ สินค้า หรือแม้กระทั่งการจัดการข้อมูลในแอปพลิเคชันทางธุรกิจต่างๆ

หากคุณต้องการศึกษาเพิ่มเติมเกี่ยวกับการเขียนโปรแกรมในหลายๆ ภาษา รวมถึง TypeScript การเรียนรู้ที่ EPT (Expert-Programming-Tutor) คือคำตอบ! เรามีหลักสูตรที่เหมาะสำหรับผู้เริ่มต้นและผู้ที่ต้องการพัฒนาทักษะต่อเนื่องในสายงานนี้ พร้อมกับการสอนแบบตัวต่อตัวและการสนับสนุนจากทีมงานผู้เชี่ยวชาญในสายงาน

หวังว่าบทความนี้จะเป็นประโยชน์และสร้างแรงบันดาลใจให้กับผู้อ่านทุกท่านในการเริ่มต้นเขียนโปรแกรม และถ้าหากคุณมีคำถามเพิ่มเติมสามารถถามเราที่ EPT ได้เลยนะครับ!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง