อาเรย์ ในภาษา TypeScript

อาเรย์ (Array) คือออบเจ็คที่ใช้สำหรับเก็บข้อมูลหลายค่าในตัวแปรเดียวและสามารถเข้าถึงค่าที่เก็บผ่านทาง Index ของอาเรย์ อาเรย์เป็นออบเจ็คจากคลาส Array ที่มีเมธอดที่ใช้ในการจัดการกับข้อมูลในอาเรย์ได้ ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการใช้งานอาเรย์ในภาษา TypeScript นี่เป็นเนื้อหาในบทนี้

• การประกาศและใช้งานอาเรย์
• การเข้าถึงและอ่านค่าในอาเรย์
• อาเรย์ของออบเจ็คและคลาส
• อาเรย์สองมิติและหลายมิติ
• เมธอดของอาเรย์

การประกาศและใช้งานอาเรย์

อาเรย์ คือออบเจ็คที่ใช้สำหรับเก็บข้อมูลหลายค่าในตัวแปรอาเรย์และสามารถเข้าถึงค่าที่เก็บผ่านทาง Index ของอาเรย์ เพื่อระบุประเภทข้อมูลอาเรย์ในภาษา TypeScript เราใช้เครื่องหมาย [] หลังชื่อประเภทข้อมูลพื้นฐาน ยกตัวอย่างเช่น numbers[] เป็นประเภทข้อมูลอาเรย์สำหรับเก็บตัวเลข หรือ string[] เป็นประเภทข้อมูลอาเรย์สำหรับเก็บ String ต่อไปมาลองประกาศอาเรย์กัน

let numbers: number[] = [10, 20, 30, 40, 50];
let names: string[] = ["Andrew", "Jonas", "Julia", "Emily"];

console.log(numbers);
console.log(names);

นี่เป็นผลลัพธ์เมื่อรันโปรแกรม

[ 10, 20, 30, 40, 50 ]
[ 'Andrew', 'Jonas', 'Julia', 'Emily' ]

นี่เป็นการประกาศสองอาเรย์สำหรับเก็บตัวเลขและชื่อของผู้คน จะเห็นว่าเนื่องจากเรามีข้อมูลเป็นจำนวนมากที่ต้องการเก็บ ดังนั้นเราสามารถใช้อาเรย์เพื่อเก็บข้อมูลเหล่านี้ได้ การกำหนดค่าให้กับอาเรย์จะอยู่ภายในเครื่องหมาย [...] และคั่นแต่ละค่าด้วยเครื่องหมายคอมมา (,)

และนอกจากเราจะสามารถกำหนดค่าให้กับอาเรย์ในตอนที่มันถูกประกาศแล้ว เรายังสามารถประกาศอาเรย์เอาไว้ก่อน และจากนั้นเพิ่มค่าเข้าไปในอาเรย์ภายหลังด้วยเมธอด push ได้ ซึ่งมันเป็นเมธอดสำหรับเพิ่มข้อมูลไปยังอาเรย์ นี่เป็นตัวอย่าง

let fruits: string[] = [];

fruits.push("Apple");
fruits.push("Orange");
fruits.push("Banana");

console.log(fruits);
console.log(`Length of array: ${fruits.length}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[ 'Apple', 'Orange', 'Banana' ]
Length of array: 3

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

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

console.log(`Length of array: ${fruits.length}`);

และสำหรับทุกตัวแปรอาเรย์ เราสามารถหาขนาดของอาเรย์ได้จาก Property length นี่จะส่งค่ากลับเป็นจำนวนสมาชิกทั้งหมดในอาเรย์ ในตัวอย่างอาเรย์ fruits มีขนาดเป็น 3

การเข้าถึงและอ่านค่าในอาเรย์

อาเรย์เก็บข้อมูลเป็นลำดับโดยใช้ Index ในการอ้างถึงข้อมูลเหล่านั้น ดังนั้่นมันจึงเป็นไปได้ที่เราจะเข้าถึงค่าในอาเรย์ผ่านทาง Index ของมัน โดยที่ Index ของอาเรย์ในภาษา TypeScript นั้นจะเริ่มต้นจาก 0 ไปจนถึงขนาดของอาเรย์ลบด้วย 1 ที่เป็นสมาชิกตัวสุดท้ายในอาเรย์ นี่เป็นตัวอย่าง

let colors: string[] = ["Red", "Green", "Blue", "Pink", "Violet"];

colors[0] = "#ff0000";
colors[2] = "#0000ff";

console.log(`colors[0] = ${colors[0]}`);
console.log(`colors[1] = ${colors[1]}`);

console.log(colors);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

colors[0] = #ff0000
colors[1] = Green
[ '#ff0000', 'Green', '#0000ff', 'Pink', 'Violet' ]

ในตัวอย่างนี้ ตัวแปรอาเรย์ colors ใช้สำหรับเก็บชื่อของสี และเราได้เปลี่ยนแปลงค่าในอาเรย์ที่ตำแหน่งแรกและตำแหน่งที่สามให้เป็นค่าใหม่ผ่านทาง Index 0 และ 2 ตามลำดับ และจากนั้นเป็นการแสดงผลค่าในอาเรย์ที่สองตำแหน่งแรก และค่าทั้งหมดในอาเรย์ออกทางหน้าจอ จะเห็นว่าการอ้างถึงค่าในอาเรย์เพื่ออัพเดทและอ่านค่าจะทำในรูปแบบ arr[index]

และเน่ื่องจาก Index ของอาเรย์เป็นค่าที่เรียงลำดับและต่อเนื่องกัน นั่นทำให้เราสามารถใช้คำสั่ง for loop ในการสร้าง Index เพื่อเข้าถึงค่าภายในอาเรย์ได้ นี่เป็นตัวอย่าง

let languages: string[] = [
    "TypeScript", "Java", "PHP", "Python", "Golang"
];

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

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

languages[0] => TypeScript
languages[1] => Java
languages[2] => PHP
languages[3] => Python
languages[4] => Golang

ในตัวอย่างนี้ เราได้ใช้คำสั่ง for loop วนอ่านค่าในอาเรย์ผ่าน Index ของมันจาก 0 ถึงสมาชิกตำแหน่งสุดท้ายในอาเรย์ (languages.length - 1) และแสดงผลออกทางหน้าจอ การใช้งานคำสั่ง for loop กับอาเรย์เป็นนั้นสามารถพบได้ทั่วไปในการเขียนโปรแกรม

มาดูตัวอย่างต่อไปในการใช้งานอาเรย์ กำหนดให้มีอาเรย์ของอายุของผู้คนระหว่าง 18 ถึง 48 ปีของคนจำนวน 10 คน ต่อไปเรามาลองเขียนโปรแกรมเพื่อหาค่าเฉลี่ยของอายุในอาเรย์ นี่เป็นตัวอย่าง

let ages: number[] = [31, 37, 48, 50, 30, 44, 18, 49, 44, 26];

let sum: number = 0;
for (let age of ages) {
    sum += age;
}

console.log(`Average age: ${sum / ages.length}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Average age: 37.7

ในตัวอย่างนี้ เรามีตัวแปร ages ที่เก็บอาเรย์ของคนจำนวน 10 คนในอาเรย์ และเพื่อคำนวณหาค่าเฉลี่ยของอายุในอาเรย์ เราสามารถใช้คำสั่ง for of เพื่อวนอ่านแต่ละค่าในอาเรย์เพื่อนำมาหาผลรวม และหารด้วยจำนวนของสมาชิกทั้งหมดในอาเรย์ที่ได้จาก ages.length และเราจะได้รับค่าเฉลี่ยในที่สุดและแสดงมันออกทางหน้าจอ

คำสั่ง for of จะให้วนเพื่ออ่านค่าในอาเรย์อย่างเป็นลำดับเริ่มจากค่าแรกยังค่าสุดท้าย มันส่งค่าในอาเรย์กลับมายังตัวแปร age ในการทำงานแต่ละรอบ มันมักใช้งานเมื่อเราต้องการเข้าถึงค่าทั้งหมดในอาเรย์อย่างเป็นลำดับ ในกรณีอื่นๆ คุณสามารถใช้คำสั่ง for แบบธรรมดาได้

อาเรย์ของออบเจ็คและคลาส

ไม่ใช่เพียงแค่ประเภทข้อมูลพื้นฐานเท่านั้นที่สามารถเก็บได้ในอาเรย์ แต่อาเรย์นั้นยังสามารถใช้เก็บข้อมูลได้ทุกประเภท เราสามารถใช้อาเรย์เก็บค่าของออบเจ็ค ฟังก์ชัน หรือข้อมูลอื่นได้ทุกประเภทรวมถึงอาเรย์เอง นี่เป็นตัวอย่างการใช้อาเรย์สำหรับเก็บออบเจ็ค Literal ในภาษา TypeScript

let users: object[] = [
    { id: 1, name: "Andrew" },
    { id: 2, name: "Jonas" },
    { id: 3, name: "Julia" },
    { id: 4, name: "Emily" },
];

for (let user of users) {
    console.log(user);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

{ id: 1, name: 'Andrew' }
{ id: 2, name: 'Jonas' }
{ id: 3, name: 'Julia' }
{ id: 4, name: 'Emily' }

สำหรับการเก็บออบเจ็ค Literal ในอาเรย์นั้น เรากำหนดประเภทข้อมูลของอาเรย์เป็น object[] เหมือนกับที่คุณเห็นในตัวอย่าง เราแค่เพิ่ม [] ต่อท้ายเข้าไปยังประเภทข้อมูลใดๆ เพื่อทำให้มันเป็นประเภทข้อมูลอาเรย์ของประเภทข้อมูลดังกล่าว

มาดูตัวอย่างเพิ่มเติมในการใช้งานอาเรย์ในภาษา TypeScript ในตัวอย่างนี้ เป็นการใช้อาเรย์สำหรับเก็บออบเจ็คของคลาส Song ซึ่งเป็นคลาสที่เราสร้างขึ้นมาเองสำหรับเก็บข้อมูลเกี่ยวกับเพลง ดังนั้นเราใช้คลาสนี้เป็นประเภทข้อมูลของอาเรย์

class Song {
    name: string;
    artist: string;

    constructor(name: string, artist: string) {
        this.name = name;
        this.artist = artist;
    }

    toString(): string {
        return `${this.artist} - ${this.name}`;
    }
}

let songs: Song[] = [
    new Song("Full stop", "Jeremy Zucker"),
    new Song("Lonely Eyes", "Lauv"),
    new Song("Home", "Passenger")
];

for (let song of songs) {
    console.log(song.toString());
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Jeremy Zucker - Full stop
Lauv - Lonely Eyes
Passenger - Home

ในตัวอย่าง เราได้สร้างคลาส Song ที่เป็นคลาสสำหรับเก็บข้อมูลของเพลง จากนั้นสร้างสามออบเจ็คของเพลงและเก็บมันในตัวแปรอาเรย์ของคลาสนี้่ นี่จะแสดงให้เห็นว่าประเภทข้อมูลใดๆ ในภาษา TypeScript สามารถใช้งานในรูปแบบของอาเรย์ได้

อาเรย์สองมิติและหลายมิติ

อารย์หลายมิติหรืออาเรย์ของอาเรย์ คืออาเรย์ที่ใช้เก็บค่าของอาเรย์ด้วยกันเอง โดยอาเรย์สามารถมีได้ตั้งแต่ 2 มิติ 3 มิติ หรือมากกว่านั้นได้ อาเรย์สองมิติจะใช้สำหรับเก็บข้อมูลที่แสดงในรูปแบบของแถวหรือตาราง ยกตัวอย่างเช่น ค่าของเมทริกซ์ หรือตารางในสองมิติ เป็นต้น

เพื่อแสดงการใช้งานของอาเรย์สองมิติ มาเขียนโปรแกรมสำหรับการบวกเมทริกซ์ การบวกเมทริกซ์เป็นการคำนวณทางคณิตศาสตร์ที่นำค่าในเมทริกซ์ในแถวและหลักเดียวกันมาบวกกัน และให้ผลลัพธ์เป็นเมทริกซ์ใหม่ นี่เป็นตัวอย่างของโปรแกรม

let a: number[][] = [
    [1, 4, 9],
    [3, 2, 9],
    [1, 0, 2]
];

let b: number[][] = [
    [5, 1, 5],
    [8, 2, 1],
    [2, 0, 6]
];

let c: number[][] = [];

for (let i = 0; i < 3; i++) {
    let row: number[] = [];
    for (let j = 0; j  < 3; j++) {
        row.push(a[i][j] + b[i][j]);
    }
    c.push(row);
}

console.log("a + b = ", c);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a + b =  [ [ 6, 5, 14 ], [ 11, 4, 10 ], [ 3, 0, 8 ] ]

นี่เป็นโปรแกรมบวกเมทริกซ์ขนาด 3*3 เราสร้างสองเมทริกซ์ a และ b โดยเก็บค่าของมันในรูปแบบของอาเรย์สองมิติ โดยที่ number[][] เป็นรูปแบบของการกำหนดประเภทข้อมูลสำหรับเก็บอาเรย์สองมิติหรืออาเรย์ของตัวเลขที่ซ้อนกันสองครั้ง

จากนั้นเราใช้คำสั่ง for loop ในการสร้าง Index ของอาเรย์จาก [0][0] ไปยัง [2][2] และเข้าถึงค่าในแต่ละอาเรย์เพื่อนำมาบวกกันและเก็บผลลัพธ์ไว้ในอาเรย์ c ซึ่งก็เป็นอาเรย์สองมิติเช่นเดียวกัน

อย่างไรก็ตาม อาเรย์สามารถมิติที่มากกว่า 2 ได้ เช่น อาเรย์ 3 มิติ หรืออาเรย์ 4 มิติ เป็นต้น ซึ่งในการเขียนโปรแกรมทั่วไปแล้วมักจะใช้งานกันไม่เกิน 3 มิติ นี่เป็นตัวย่างของการประกาศอาเรย์สามมิติสำหรับเก็บค่าของ String ในภาษา TypeScript

let threeD: string[][][];

เมธอดของอาเรย์

อาเรย์เป็นออบเจ็คจากคลาส Array และมันมีเมธอดเป็นจำนวนมากที่ช่วยอำนวยความสะดวกในการทำงานกับอาเรย์ ในบทนี้ จะเป็นการแนะนำเมธอดของอาเรย์เบื้องต้นที่คุณสามารถใช้เมื่อต้องเขียนโปรแกรมที่ทำงานกับอาเรย์

ในการวนรอบค่าในอาเรย์ แทนที่จะใช้คำสั่ง for loop เหมือนกับในตัวอย่างที่ผ่านมา อาเรย์นั้นมีเมธอด forEach ที่ใช้สำหรับวนรอบค่าในอาเรย์ได้ นี่เป็นตัวอย่างการใช้งาน

let foods: string[] = ["Burger", "Pizza", "Salad", "Pie", "Cobbler"];

foods.forEach((value: string, index: number) => {
    console.log(`${index + 1}. ${value}`);
});

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1. Burger
2. Pizza
3. Salad
4. Pie
5. Cobbler

ในตัวอย่าง เมธอด forEach ใช้สำหรับวนค่าในอาเรย์โดยมันรับฟังก์ชัน Callback ที่จะส่งค่าและ Index ของแต่ละสมาชิกในอาเรย์เพื่อใช้งาน และเราได้แสดงลำดับและชื่อของอาหารในอาเรย์ออกทางหน้าจอ การใช้เมธอด forEach นั้นสะดวกและรวดเร็วในการวนรอบค่าในอาเรย์

และข้อดีอย่างหนึ่งของการใช้งานเมธอด forEach แทนคำสั่ง for loop เนื่องจากเมธอด forEach รับฟังก์ชันเพื่อทำงาน ดังนั้นพารามิเตอร์ value และ index จะมีขอบเขตการใช้งานเพียงในฟังก์ชันนี้เท่านั้น

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

let sports: string[] = [
    "Football", "Badminton", "Hockey", "Tennis", "Cricket"
];

let newArray = sports.map((value: string, index: number): string => {
    return `${index}-${value.toUpperCase()}`;
});

console.log(sports);
console.log(newArray);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[ 'Football', 'Badminton', 'Hockey', 'Tennis', 'Cricket' ]
[ '0-FOOTBALL', '1-BADMINTON', '2-HOCKEY', '3-TENNIS', '4-CRICKET' ]

ในตัวอย่างนี้ เรามีอาเรย์ที่เก็บชื่อของกีฬา sports จากนั้นใช้เมธอด map เพื่อแปลงค่าในอาเรย์ให้เป็นค่าใหม่ เมธอดรับพารามิเตอร์เป็นฟังก์ชัน Callback ที่จะส่งค่าและ Index เป็นพารามิเตอร์ และค่าที่ส่งกลับจากฟังก์ชันจะกลายมาเป็นค่าใหม่ของอาเรย์ และสุดท้ายเมธอด map ส่งค่ากลับเป็นอาเรย์ใหม่ที่ทุกสมาชิกในอาเรย์ถูกเปลี่ยนโดยฟังก์ชัน Callback

สำหรับตัวอย่างสุดท้ายในบทนี้่ มาดูตัวอย่างการใช้งานเมธอดจัดเรียงข้อมูลในอาเรย์ มาเขียนโปรแกรมเพื่อเรียงข้อมูลของตัวเลขในอาเรย์จากน้อยไปมากด้วยเมธอด sort นี่เป็นตัวอย่าง

let numbers: number[] = [3, 13, 10, 2, 16, 15, 13, 8];
console.log("Original", numbers);

numbers.sort((a: number, b: number): number => {
    return a - b;
});
console.log("Sorted", numbers);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Original [
   3, 13, 10, 2,
  16, 15, 13, 8
]
Sorted [
   2,  3,  8, 10,
  13, 13, 15, 16
]

ในตัวอย่างนี้ เรามีอาเรย์ของตัวเลข numbers ที่ยังไม่ได้จัดเรียง เพื่อที่จะจัดเรียงข้อมูลในอาเรย์ เราสามารถใช้เมธอด sort ได้ เมธอดรับพารามิเตอร์เป็นฟังก์ชัน Callback ที่ใช้สำหรับควบคุมวิธีการจัดเรียง ฟังก์ชันรับสองพารามิเตอร์เป็น a และ b ที่ใช้สำหรับควบคุมวิธีการจัดเรียง จากการส่งค่ากลับเป็น a-b หมายถึงการเรียงข้อมูลจากน้อยไปมาก

นี่เป็นเพียงการแนะนำการใช้งานเมธอดของอาเรย์ในเบื้องต้นเท่านั้น สำหรับเมธอดทั้งหมดที่สามารถใช้ได้ในอาเรย์ คุณสามารถศึกษาได้เพิ่มเติมจากคลาส Array ในภาษา JavaScript

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับอาเรย์ในภาษา TypeScript อาเรย์นั้นใช้สำหรับเก็บข้อมูลประเภทเดียวกันไว้ในตัวแปรเดียวกันได้ ค่าในอาเรย์สามารถเข้าถึงได้ผ่านทาง Index และง่ายต่อการใช้งานกับคำสั่ง for loop สำหรับวนเข้าถึงค่าในอาเรย์ และในตอนท้ายเราได้แนะนำการใช้งานเมธอดที่สำคัญของอาเรย์