TypeScript - Arrays：您的組織數據入口

你好，有抱負的程序员們！今天，我們將深入TypeScript中數組的奇妙世界。作為你們友善的鄰居計算機老師，我非常高興能夠帶領你們踏上這次旅程。數組就像是編程中的瑞士軍刀——非常通用且有用。那麼，讓我們挽起袖子開始吧！

TypeScript - Arrays

什麼是數組？

在我們深入細節之前，讓我們先了解數組是什麼。想象一下你有一堆色彩繽紛的玻璃珠。而不是把它們散落在房間各處，你決定把它們排成一行。這基本上就是數組在編程中做的事情——以結構化的方式組織相似的項目。

數組的特性

TypeScript中的數組帶有一些很酷的特性，讓它們非常方便：

有序集合：就像我們的玻璃珠行一樣，數組維持特定的順序。
基於索引：每個元素都有一個與之相關的數字（索引），從0開始。
同質性：通常，數組包含相同類型的元素。
動態大小：在TypeScript中，數組可以根據需要增長或縮小。

聲明和初始化數組

讓我們從創建我們的第一個數組開始。在TypeScript中，我們有幾種方法可以做到這點：

// 方法1：使用方括號
let fruits: string[] = ['apple', 'banana', 'orange'];

// 方法2：使用Array構造函數
let numbers: number[] = new Array(1, 2, 3, 4, 5);

// 方法3：使用泛型數組類型
let colors: Array<string> = ['red', 'green', 'blue'];

在第一個示例中，我們創建了一個水果數組。string[]告訴TypeScript這個數組只會包含字符串。這就像告訴你們的朋友，“這個盒子只放玻璃珠，不准放玩具車！”

第二個示例展示了如何使用Array構造函數創建數字數組。這就像使用一個特殊的機器來創建你的玻璃珠行。

第三種方法使用我們所謂的“泛型”類型。現在不必過於關心這個術語，只需知道這是另一種方式來說“這個數組是給字符串的”。

访問數組元素

現在我們有了數組，我們如何訪問其中的項目呢？這簡直就像派對一樣簡單！我們使用元素的索引：

let fruits: string[] = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 輸出：'apple'
console.log(fruits[1]); // 輸出：'banana'
console.log(fruits[2]); // 輸出：'orange'

記住，數組索引從0開始，而不是1。這就像一種奇怪的計數系統，我們從0而不是1開始。我知道，程序员們都是一群古怪的人！

數組對象

在TypeScript中，數組實際上是對象。這意味著它們帶有一些內置的屬性和方法。其中最有用的一個屬性是length：

let fruits: string[] = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 輸出：3

這告訴我們數組中有多少項目。當你需要知道你的集合大小時，這非常方便！

數組方法

數組帶有一套工具方法來操作它們。讓我們看看一些最常見的方法：

方法	描述	示例
push()	添加一個或多個元素到結尾	`fruits.push('grape')`
pop()	移除最後一個元素	`let lastFruit = fruits.pop()`
unshift()	添加一個或多個元素到開頭	`fruits.unshift('kiwi')`
shift()	移除第一個元素	`let firstFruit = fruits.shift()`
indexOf()	返回特定元素的索引	`let index = fruits.indexOf('banana')`
slice()	返回數組一部分的淺拷貝	`let someFruits = fruits.slice(1, 3)`
splice()	改變數組的內容	`fruits.splice(1, 1, 'mango')`

讓我們看看這些方法是如何工作的：

let fruits: string[] = ['apple', 'banana', 'orange'];

fruits.push('grape');
console.log(fruits); // 輸出：['apple', 'banana', 'orange', 'grape']

let lastFruit = fruits.pop();
console.log(lastFruit); // 輸出：'grape'
console.log(fruits); // 輸出：['apple', 'banana', 'orange']

fruits.unshift('kiwi');
console.log(fruits); // 輸出：['kiwi', 'apple', 'banana', 'orange']

let firstFruit = fruits.shift();
console.log(firstFruit); // 輸出：'kiwi'
console.log(fruits); // 輸出：['apple', 'banana', 'orange']

數組解構

TypeScript支持一個很酷的特性，叫做數組解構。這就像拆開一個行李箱，但對於數組來說：

let fruits: string[] = ['apple', 'banana', 'orange'];
let [first, second, third] = fruits;

console.log(first);  // 輸出：'apple'
console.log(second); // 輸出：'banana'
console.log(third);  // 輸出：'orange'

這是一種將數組元素一次性分配給變量的便捷方式！

使用for...of循環遍歷數組

當我們想要遍歷數組中的每個項目時，我們可以使用for...of循環。這就像一個接一個地從盒子中取出每個玻璃珠：

let fruits: string[] = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
console.log(fruit);
}
// 輸出：
// apple
// banana
// orange

這個循環遍歷我們數組中的每個水果並打印出來。非常簡單和乾淨！

TypeScript中的數組

TypeScript為數組添加了一些超能力。例如，你可以創建自定義類型的數組：

// 定義一個自定義類型
type Person = {
name: string;
age: number;
};

// 創建一個Person對象數組
let people: Person[] = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];

console.log(people[1].name); // 輸出： "Bob"

在這裡，我們創建了一個Person對象數組。TypeScript確保這個數組中的每個對象都有一個name和一個age。

至此，我們已經穿越了TypeScript數組的土地。從創建數組到操作數組，再到TypeScript特有的特性。記住，數組是編程中的朋友。它們幫助你組織數據，使你的代碼更清潔、更高效。

當我們結束時，我希望你們能夠將數組視為一個組織良好的工具箱。每個工具（或元素）都有其位置，當你需要它時，你會知道在哪裡找到它。持續練習使用數組，很快你就能像專家一樣處理數據！

祝編程愉快，願你的數組總是井然有序！

Credits: Image by storyset