Dữ liệu kiểu mảng trong JavaScript

Mảng là một biến đặc biệt, có thể chứa nhiều giá trị cùng một lúc. Mảng JavaScript được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.

Nếu bạn có một danh sách các mục (ví dụ: một danh sách các tên ô tô), thì việc lưu trữ các ô tô trong các biến đơn có thể giống như sau:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Tuy nhiên, nếu bạn muốn duyệt qua những chiếc xe và tìm một chiếc cụ thể thì sao? Và điều gì sẽ xảy ra nếu bạn có đến 300 chiếc?

Giải pháp là một mảng!

Một mảng có thể chứa nhiều giá trị dưới một tên duy nhất và bạn có thể truy cập các giá trị bằng cách tham chiếu đến một phần tử trong mảng bằng chỉ mục (index).

Cú pháp

1. Dùng ký tự định nghĩa kiểu mảng

Có thể khai báo mảng với từ khóa const, let, var.

const array_name = [item1, item2, ...];

Hoặc

var array_name = [item1, item2, ...];

Hoặc

let array_name = [item1, item2, ...];

Ví dụ:

const cars = ["Saab", "Volvo", "BMW"];
var x = ["Chuối", "Cam", "Nho", "Táo", "Bơ"];

Dấu cách và ngắt dòng không quan trọng. Một khai báo có thể kéo dài nhiều dòng:

const cars = [
	"Saab",
	"Volvo",
	"BMW"
];

Bạn cũng có thể tạo một biến mảng, sau đó gán thêm các phần tử:

const cars = [];
	cars[0]= "Saab";
	cars[1]= "Volvo";
	cars[2]= "BMW";

2. Sử dụng từ khóa new

const array_name =  new Array(item1, item2, ...);

Ví dụ sau cũng tạo một mảng và gán các giá trị cho nó:

const cars = new Array("Saab", "Volvo", "BMW");

Hai cách khai báo mảng này hoàn toàn giống nhau.

Tuy nhiên, phương thức đầu tiên (ký tự định nghĩa kiểu mảng) là cách tốt nhất để khai báo kiểu mảng vì lý do đơn giản, dễ đọc và tốc độ thực thi cao hơn.

Do đó, phương thức new Array() là không cần thiết.

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

Bạn truy cập một phần tử trong mảng bằng số chỉ mục (index):

const cars = ["Saab", "Volvo", "BMW"];
let x = cars[0];	// x = "Saab";

Chỉ mục mảng bắt đầu bằng 0.

[0] là phần tử đầu tiên. [1] là phần tử thứ hai.

Gán giá trị cho một phần tử mảng

Câu lệnh này thay đổi giá trị của phần tử đầu tiên trong ô tô:

let cars = ["Saab", "Volvo", "BMW"];
cars[0]= "Opel";

Mảng đối tượng

Mảng là một kiểu object đặc biệt. Toán tử typeof trong JavaScript trả về “object” cho các mảng.

Mảng thông thường sử dụng chỉ mục dạng số để truy cập các “phần tử” của nó. Trong ví dụ này, thanhvien[0] trả về An:

const thanhvien = ["An", "Nguyễn Văn", 46];
//thanhvien[0] là An

Các object sử dụng tên để truy cập các “thành viên” của nó. Trong ví dụ này, thanhvien.firstName trả về An:

const thanhvien = {firstName:"An", lastName:"Nguyễn Văn", age:46};

Các phần tử mảng có thể là đối tượng

Biến JavaScript có thể là các đối tượng. Mảng là các loại đối tượng đặc biệt.

Do đó:

• Bạn có thể lưu các giá trị thuộc “các kiểu khác nhau” trong cùng một Mảng.
• Bạn có thể lưu các đối tượng trong một Mảng.
• Bạn có thể lưu các hàm trong Mảng.
• Bạn có thể lưu các Mảng trong một Mảng (mảng đa chiều).

x[0] = Date.now;
x[1] = myFunction;
x[2] = myCars;

Thuộc tính và phương thức mảng

Điểm mạnh thực sự của mảng JavaScript là các thuộc tính và phương thức mảng được định nghĩa sẵn:

cars.length	// Returns the number of elements
cars.sort()	// Sorts the array

Các phương thức và thuộc tính của mảng được đề cập trong các bài sau nhé.

Sự khác biệt giữa Mảng và Đối tượng trong JavaScript

• Mảng sử dụng các chỉ mục được đánh số.
• Đối tượng sử dụng các chỉ mục được đặt tên.

Mảng là một loại đối tượng đặc biệt, với các chỉ mục được đánh số

Một số ví dụ mẫu

Thuộc tính length của một mảng trả về độ dài của một mảng (số phần tử của mảng).

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;	// Returns 4
fruits[fruits.length - 1];	// Returns Mango

Cách an toàn nhất để duyệt qua một mảng là sử dụng vòng lặp for:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text;
text = "<ul>";
for (let i = 0; i < fLen; i++)
{
	text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Bạn cũng có thể sử dụng hàm Array.forEach() để truy cập các phần tử của mảng. Ví dụ bên trên có thể viết cách khác như sau:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text;
text = "<ul>";
fruits.forEach(xulydulieu);
text += "</ul>";
function xulydulieu(value)
{
	text += "<li>" + value + "</li>";
}

Xem thêm bài viết:

• JavaScript: vòng lặp forEach trong mảng.
• jQuery: Phương thức toArray.
• Tất cả các bài viết về Javascript.