TypeScript - Mảng: Cánh cửa dẫn đến dữ liệu tổ chức

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của mảng trong TypeScript. Như một người giáo viên máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Mảng giống như cây dao瑞士军刀 của lập trình - rất linh hoạt và hữu ích. Hãy cuộn lên tay áo và bắt đầu nhé!

Mảng là gì?

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu mảng là gì. Hãy tưởng tượng bạn có một đống những viên bi màu sắc. Thay vì để chúng rải rác khắp phòng, bạn quyết định đặt chúng thành một hàng đẹp. Đó chính là điều mà mảng làm trong lập trình - nó tổ chức các mục tương tự theo một cách có cấu trúc.

Đặc điểm của mảng

Mảng trong TypeScript có một số tính năng rất hay giúp chúng rất hữu ích:

1. Tập hợp có thứ tự: Giống như hàng bi của chúng ta, mảng duy trì một thứ tự cụ thể.
2. Dựa trên chỉ số: Mỗi phần tử có một số (chỉ số) liên kết với nó, bắt đầu từ 0.
3. Đồng loại: Nói chung, mảng chứa các phần tử cùng loại.
4. Kích thước linh hoạt: Trong TypeScript, mảng có thể tăng hoặc giảm kích thước theo nhu cầu.

Khai báo và khởi tạo mảng

Hãy bắt đầu bằng cách tạo mảng đầu tiên của chúng ta. Trong TypeScript, chúng ta có một vài cách để làm điều này:

// Phương pháp 1: Sử dụng brackets vuông
let fruits: string[] = ['apple', 'banana', 'orange'];

// Phương pháp 2: Sử dụng constructor Array
let numbers: number[] = new Array(1, 2, 3, 4, 5);

// Phương pháp 3: Sử dụng kiểu mảng generic
let colors: Array<string> = ['red', 'green', 'blue'];

Trong ví dụ đầu tiên, chúng ta đã tạo một mảng các quả trái cây. string[] cho TypeScript biết rằng mảng này sẽ chỉ chứa các chuỗi. Điều này giống như nói với bạn bè của bạn, "Hộp này chỉ dành cho bi, không được để xe玩具 xe!"

Ví dụ thứ hai cho thấy cách tạo một mảng số bằng cách sử dụng constructor Array. Đó như sử dụng một máy đặc biệt để tạo hàng bi của bạn.

Phương pháp thứ ba sử dụng kiểu "generic". Đừng lo lắng quá nhiều về thuật ngữ này bây giờ, chỉ cần biết rằng nó là một cách khác để nói "mảng này là cho chuỗi".

Truy cập phần tử mảng

Bây giờ chúng ta đã có mảng của mình, làm thế nào để chúng ta lấy các mục bên trong? Đó là dễ như bánh! Chúng ta sử dụng chỉ số của phần tử:

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

console.log(fruits[0]); // Output: 'apple'
console.log(fruits[1]); // Output: 'banana'
console.log(fruits[2]); // Output: 'orange'

Lưu ý rằng các chỉ số của mảng bắt đầu từ 0, không phải 1. Đó như một hệ thống đếm kỳ lạ mà chúng ta bắt đầu từ 0 thay vì 1. Tôi biết, các lập trình viên là một nhóm kỳ lạ!

Đối tượng mảng

Trong TypeScript, mảng thực sự là các đối tượng. Điều này có nghĩa là chúng có một số thuộc tính và phương thức内置. Một trong những thuộc tính hữu ích nhất là length:

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

Điều này cho chúng ta biết có bao nhiêu mục trong mảng của chúng ta. Rất hữu ích khi bạn cần biết kích thước của bộ sưu tập của mình!

Phương thức mảng

Mảng có một bộ công cụ các phương thức để manipulates chúng. Hãy cùng xem một số phương thức phổ biến nhất:

Phương thức	Mô tả	Ví dụ
push()	Thêm một hoặc nhiều phần tử vào cuối	fruits.push('grape')
pop()	Loại bỏ phần tử cuối	let lastFruit = fruits.pop()
unshift()	Thêm một hoặc nhiều phần tử vào đầu	fruits.unshift('kiwi')
shift()	Loại bỏ phần tử đầu	let firstFruit = fruits.shift()
indexOf()	Trả về chỉ số của phần tử cụ thể	let index = fruits.indexOf('banana')
slice()	Trả về một bản sao nông của một phần mảng	let someFruits = fruits.slice(1, 3)
splice()	Thay đổi nội dung của một mảng	fruits.splice(1, 1, 'mango')

Hãy xem chúng trong hành động:

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

fruits.push('grape');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']

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

fruits.unshift('kiwi');
console.log(fruits); // Output: ['kiwi', 'apple', 'banana', 'orange']

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

Giải cấu trúc mảng

TypeScript hỗ trợ một tính năng rất hay gọi là giải cấu trúc mảng. Đó như unpacking một vali, nhưng cho mảng:

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

console.log(first);  // Output: 'apple'
console.log(second); // Output: 'banana'
console.log(third);  // Output: 'orange'

Đây là một cách nhanh chóng để gán các phần tử mảng vào các biến!

Duyệt mảng bằng vòng lặp for...of

Khi chúng ta muốn đi qua mỗi mục trong một mảng, chúng ta có thể sử dụng vòng lặp for...of. Đó như lấy từng viên bi ra khỏi hộp một cách:

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

for (let fruit of fruits) {
console.log(fruit);
}
// Output:
// apple
// banana
// orange

Vòng lặp này đi qua từng quả trái cây trong mảng của chúng ta và in nó ra. Rất đơn giản và sạch sẽ!

Mảng trong TypeScript

TypeScript thêm một số siêu năng lực vào mảng. Ví dụ, bạn có thể tạo mảng của các loại tùy chỉnh:

// Định nghĩa một loại tùy chỉnh
type Person = {
name: string;
age: number;
};

// Tạo một mảng các đối tượng Person
let people: Person[] = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];

console.log(people[1].name); // Output: "Bob"

Ở đây, chúng ta đã tạo một mảng các đối tượng Person. TypeScript đảm bảo rằng mỗi đối tượng trong mảng này có một name và một age.

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của mảng TypeScript. Từ việc tạo chúng đến manipulates chúng, và thậm chí một số tính năng đặc biệt của TypeScript. Nhớ rằng, mảng là bạn của bạn trong lập trình. Chúng giúp bạn tổ chức dữ liệu và làm cho mã của bạn sạch sẽ và hiệu quả hơn.

Khi kết thúc, tôi muốn các bạn nghĩ về mảng như một bộ công cụ được tổ chức tốt. Mỗi công cụ (hoặc phần tử) đều có vị trí của mình, và khi bạn cần nó, bạn biết chính xác nơi để tìm. Tiếp tục thực hành với mảng, và sớm bạn sẽ manipulates dữ liệu như một chuyên gia!

Chúc các bạn lập trình vui vẻ, và mong rằng các mảng của bạn luôn được sắp xếp hoàn hảo!

Credits: Image by storyset