Cách Sử Dụng Mảng (Array) Trong JavaScript - Web Cơ Bản

Cách sử dụng mảng (Array) trong JavaScript

1) Mảng là gì !?

- Mảng là một loại biến đặc biệt, nó có thể lưu trữ nhiều giá trị đồng thời.

- Ví dụ, câu lệnh bên dưới dùng để tạo một mảng có tên là mobile và mảng đó chứa năm giá trị:

• HTC
• Nokia
• SamSung
• LG
• Apple

var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];

- Lưu ý: Mỗi giá trị của mảng được gọi là một "phần tử mảng" và mỗi phần tử mảng thì được xác định bởi một chỉ số. Phần tử mảng đầu tiên sẽ có chỉ số là 0, chỉ số của các phần tử mảng sẽ tăng dần theo thứ tự được khai báo.

- Dưới đây là ví dụ minh họa về chỉ số của các phần tử trong mảng mobile.

Phần tử mảng	HTC	Nokia	SamSung	LG	Apple
Chỉ số của phần tử mảng	0	1	2	3	4

2) Trường hợp sử dụng mảng

- Trường hợp sử dụng mảng thì rất đa dạng.

- Tuy nhiên, trong đó chỉ có hai trường hợp là chủ yếu:

• (1) Sử dụng mảng để lưu trữ các giá trị thuộc cùng một thể loại.
=> Ví dụ var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"];
• (2) Sử dụng mảng để lưu trữ các giá trị liên quan đến một đối tượng.
=> Ví dụ var SinhVien = ["Nguyễn Thành Nhân", "Nam", 1993, "Cần Thơ"];

3) Cách khai báo (khởi tạo) một mảng

- Để khai báo một mảng, ta sử dụng cú pháp như sau:

var tên mảng = [phần tử thứ nhất, phần tử thứ hai, phần tử thứ ba, ...., phần tử thứ N];

- Hoặc bạn cũng có thể viết các phần tử xuống dòng giống cú pháp bên dưới:

var tên mảng = [ phần tử thứ nhất, phần tử thứ hai, phần tử thứ ba, ...., phần tử thứ N ];

- Lưu ý: Giá trị của các phần tử mảng có thể là: chuỗi, số, biến, ....

Ví dụ:

Đoạn mã bên dưới dùng để tạo một mảng có tên là SinhVien, mảng SinhVien có bốn phần tử:

• Phần tử thứ nhất có giá trị là chuỗi Nguyễn Thành Nhân
• Phần tử thứ hai có giá trị là chuỗi Nam
• Phần tử thứ ba có giá trị là số 1993
• Phần tử thứ tư có giá trị bằng với giá trị của biến city

<script> var SinhVien = [ "Nguyễn Thành Nhân", 'Nam', 1993, city ]; </script> Xem ví dụ

4) Cách truy cập vào phần tử mảng

- Thông thường, chúng ta truy cập vào phần tử mảng để:

• (1) Lấy giá trị của phần tử mảng.
• (2) Hoặc cập nhật giá trị cho phần tử mảng.

- Để truy cập vào phần tử mảng thì ta sử dụng cú pháp như sau:

tên mảng[chỉ số của phần tử mảng]

- Lưu ý:Cách xác định chỉ số của phần tử mảng đã được đề cập trong phần 1) Mảng là gì !?

Ví dụ:

Hiển thị giá trị phần tử thứ ba của mảng mobile

<script> var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"]; document.write("Giá trị của phần tử thứ ba là: " + mobile[2]); </script> Xem ví dụ Ví dụ:

Cập nhật giá trị phần tử thứ tư của mảng mobile thành Lenovo

<script> var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"]; mobile[3] = "Lenovo"; </script> Xem ví dụ

- Lưu ý: Để hiển thị toàn bộ giá trị của các phần tử trong mảng thì ta chỉ cần gọi tên mảng.

Ví dụ: <script> var mobile = ["HTC", "Nokia", "SamSung", "LG", "Apple"]; document.write("Mảng mobile là: " + mobile); </script> Xem ví dụ

5) "Mảng kết hợp" là gì !?

- Mảng kết hợp là loại mảng mà các phần tử của nó không được xác định bởi chỉ số, mà được xác định bằng một cái tên (tên này do chúng ta tự đặt).

- Để khai báo một mảng kết hợp thì trước tiên ta phải khai báo một mảng rỗng, sau đó thêm từng phần tử vào mảng.

Ví dụ:

Đoạn mã bên dưới dùng để tạo một mảng có tên là SinhVien, mảng SinhVien có ba phần tử:

• Phần tử có tên name với giá trị là chuỗi Nguyễn Thành Nhân
• Phần tử có tên year với giá trị là số 1993
• Phần tử có tên city với giá trị là chuỗi Cần Thơ

<script> var SinhVien = []; SinhVien["name"] = "Nguyễn Thành Nhân"; SinhVien["year"] = 1993; SinhVien["city"] = "Cần Thơ"; </script> Xem ví dụ

- Để truy cập vào phần tử của mảng kết hợp thì ta dùng cú pháp tên mảng["tên phần tử"]

Ví dụ:

Hiển thị giá trị phần tử có tên là city của mảng SinhVien

<script> var SinhVien = []; SinhVien["name"] = "Nguyễn Thành Nhân"; SinhVien["year"] = 1993; SinhVien["city"] = "Cần Thơ"; document.write("Giá trị phần tử có tên city là: " + SinhVien["city"]); </script> Xem ví dụ

- Mảng kết hợp hầu như không được hỗ trợ trong JavaScript.

- Do đó, ta không thể hiển thị một loạt các phần tử mảng bằng cách gọi tên mảng.

6) Mảng hai chiều & mảng đa chiều

- Như chúng ta đã biết, giá trị của các phần tử mảng có thể là: chuỗi, số, biến, ....

- Tuy nhiên, nó còn có thể là một mảng khác.

- Ví dụ 1: Đoạn mã bên dưới dùng để tạo một mảng có tên là motorbike và mảng motorbike có năm phần tử. Trong đó, phần tử thứ hai của mảng motorbike là một mảng gồm bốn phần tử.

var motorbike = [ "Honda", ["Jupiter", "Exciter", "Sirius", "Nouvo"], "Suzuki", "SYM", "Piaggio" ];

- Ví dụ 2: Đoạn mã bên dưới dùng để tạo một mảng có tên là motorbike và mảng motorbike có năm phần tử. Trong đó, phần tử thứ hai của mảng motorbike là một mảng gồm bốn phần tử, và phần tử thứ ba của phần tử thứ hai của mảng motorbike lại tiếp tục là một mảng gồm hai phần tử.

var motorbike = [ "Honda", [ "Jupiter", "Exciter", ["Sirius phanh cơ", "Sirius phanh đĩa"], "Nouvo" ], "Suzuki", "SYM", "Piaggio" ];

- Mảng mà không chứa phần tử nào là mảng thì được gọi là mảng một chiều (một cấp).

(Số chiều sẽ tăng lên dựa vào độ sâu của mảng)

- Mảng motorbike trong ví dụ 1 có độ sâu là hai nên được gọi là mảng hai chiều.

- Mảng motorbike trong ví dụ 2 có độ sâu là ba nên được gọi là mảng ba chiều.

- Để truy cập vào phần tử của mảng hai chiều, ta sử dụng cú pháp như sau:

tên mảng[chỉ số của phần tử mảng cấp một][chỉ số của phần tử mảng cấp hai]; Ví dụ:

Hiển thị giá trị của phần tử thứ tư của phần tử thứ hai của mảng motorbike

<script> var motorbike = [ "Honda", ["Jupiter", "Exciter", "Sirius", "Nouvo"], "Suzuki", "SYM", "Piaggio" ]; document.write(motorbike[1][3]); </script> Xem ví dụ

- Để truy cập vào phần tử của mảng n chiều, ta sử dụng cú pháp như sau:

(Lưu ý: Cụm từ "chỉ số của phần tử mảng cấp" tôi sẽ viết tắt là cscptmc)

tên mảng[cscptmc 1][cscptmc 2][cscptmc 3]...[cscptmc n - 2][cscptmc n - 1][cscptmc n]; Ví dụ:

Hiển thị giá trị của phần tử thứ nhất của phần tử thứ ba của phần tử thứ hai của mảng motorbike

<script> var motorbike = [ "Honda", [ "Jupiter", "Exciter", ["Sirius phanh cơ", "Sirius phanh đĩa"], "Nouvo" ], "Suzuki", "SYM", "Piaggio" ]; document.write(motorbike[1][2][0]); </script> Xem ví dụ

7) Cách lặp qua một lần các phần tử mảng

- Chúng ta có thể sử dụng vòng lặp for để lặp qua một lần các phần tử mảng.

Ví dụ:

Sử dụng một vòng lặp for để lặp qua một lần mảng một chiều

<script> var motorbike = [ "Honda", "Yamaha", "Suzuki", "SYM", "Piaggio" ]; for(var i = 0; i < motorbike.length; i++){ document.write("- " + motorbike[i] + "<br>"); } </script> Xem ví dụ Ví dụ:

Sử dụng hai vòng lặp for để lặp qua một lần mảng hai chiều

<script> var data = [ ["HTC", "Nokia", "SamSung", "LG", "Apple"], ["Honda", "Suzuki", "Yamaha"], ["Nguyễn Thành Nhân", "Nam", 1993, "Cần Thơ"] ]; for(var i = 0; i < data.length; i++){ for(var j = 0; j < data[i].length; j++){ document.write("- " + data[i][j] + "<br>"); } document.write("<hr>"); } </script> Xem ví dụ

- Lưu ý: Cú pháp tên mảng.length dùng để trả về số lượng phần tử của mảng.