Mảng Trong JavaScript - JS Array - Lập Trình Từ Đầu

1. Mảng trong JavaScript là gì?

Mảng – Array là một loại dữ liệu dạng tập hợp nhiều phần tử, trong đó mỗi phần tử sẽ được đánh dấu vị trí bằng chỉ mục. Ta có thể coi mảng là một loại biến đặc biệt có thể lưu trữ nhiều giá trị đồng thời(biến thì chỉ có 1). Nếu mảng có 10 phần tử thì số thứ tự các phần tử sẽ là từ [0 -> 9].

Mỗi giá trị của mảng sẽ được gọi là 1 phần tử của mảng. Mỗi phần tử mảng sẽ được xác định bởi một chỉ số. Phần tử mảng đầu tiên sẽ là chỉ số 0, phần tử mảng thứ 2 là chỉ số 1,… Chỉ số của phần tử mảng sẽ tăng dần theo thứ tự được khai báo. Ví dụ nếu mảng có 10 phần tử thì số thứ tự các phần tử sẽ là từ [0 -> 9].

2. Cách khai báo một mảng trong JavaScript

Chúng ta có hai cách khai báo mảng, thứ nhất là sử dụng từ khóa newArray() và thứ hai là sử dụng cặp dấu ngoặc vuông []

2.1. Khai báo với từ khóa newArray()

Cú pháp: var arr = new Array(value1, value2, ..., valuen);

Trong đó:

• arr là tên biến mảng.
• value1,…valuen là các giá trị của mảng mà các bạn muốn tạo.

Ví dụ: khai báo một mảng gồm các số từ 1 đến 10

var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

Chú ý

• Khi sử dụng từ khóa let nên không cho phép khai báo trùng tên
• Bạn nên tránh sử dụng từ khóa new để khai báo mảng. Hay nói cách khác là không sử dụng hàm tạo Array() để khai báo mảng trong JavaScript

2.2. Khai báo với dấu ngoặc vuông

Cú pháp: var arr = [value1, value2, ..., valuen];

Trong đó:

• arr là tên biến mảng.
• value1,…valuen là các giá trị của mảng mà các bạn muốn tạo.

Ví dụ: tương tự ta khai báo một mảng từ 1 đến 10 nhưng bằng dấu ngoặc vuông

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Lưu ý

Trong cách khai báo mảng dù bằng cách nào thì dấu cách và việc xuống dòng đều không quan trọng

Ví dụ: ta khai báo một mảng tên như sau

const lttd = [ "Thành", "Nam", "Sơn" ]; document.write(lttd);

Ngoài ra ta cũng có thể tạo một mảng rồi cung cấp các phần tử cho nó.

const lttd = []; cars[0]= "Sơn"; cars[1]= "Nam"; cars[2]= "Thành"; document.write(lttd); 3. Truy xuất các phần tử mảng trong JavaScript’

Sau khi đã tạo được mảng rồi thì chúng ta cần phải truy xuất thông tin của mảng. Để có thể lấy ra giá trị của một thành phần trong mảng thì chúng ta sử dụng cú pháp sau: arr[index];

Trong đó: arr là tên biến mảng, index là vị trí của mảng(bắt đầu từ 0).

Ví dụ mảng có 10 phần tử, và bạn muốn lấy phần tử thứ 5 thì chỉ mục của nó sẽ là (5-1 = 4), tại vì mảng bắt đầu từ 0. Hay một công thức dễ hiểu nhất là phần tử đầu tiên sẽ có số chỉ mục là 0, phần tử thứ hai là 1, … phần tử thứ n là n-1.

Ví dụ:

const lttd = ["Sơn", "Nam", "Thành"]; document.write(lttd);

Để thay đổi một phần tử trong mảng thì cách đơn giản nhất chính là việc ta gán số chỉ mục của phần tử ta cần đổi với giá trị mới là xong.

const lttd = ["Sơn", "Nam", "Thành"]; lttd[1] = "son"; document.write(lttd); 4. Mảng hai chiều và mảng đa chiều trong JavaScript

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ũng có thể là biến của mảng khác.

Ví dụ: Đ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" ]; document.write(motorbike);

Đ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" ]; document.write(motorbike);

Số chiều của mảng sẽ được tăng dựa theo độ sâu của mảng. Ví dụ như mảng không chứa phần tử nào thì gọi là mảng một chiều. Mảng mà có độ sâu là 2 như ví dụ đầu là mảng 2 chiều. Còn mảng như ví dụ trên là mảng 3 chiều vì có độ sâu là 3. Hay người ta còn hay gọi là mảng đa chiều.

Để truy cập vào phần tử mảng đa chiều ta dùng cú pháp 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ụ: var motorbike = [ "Honda", ["Jupiter", "Exciter", "Sirius", "Nouvo"], "Suzuki", "SYM", "Piaggio" ]; document.write(motorbike[1][3]); 5. In mảng ra trình duyệt và cosole

Để debug xem các giá trị trong mảng thì ta sử dụng hàm join() và console.log(). Hai hàm sẽ in toàn bộ giá trị của các phần tử ra màn hình.

Để hiển thị các phần tử ra ngoài trình duyệt chúng ta sẽ sử dụng hàm array.join().

Ví dụ:

var t = new Array(1,2,3); document.write(t.join()); // kết quả 1,2,3 document.write(t.join('-')); // kết quả 1-2-3

Như vậy, hàm join được tích hợp sẵn vào đối tượng Array trong javascript, và nó có một tham số truyền vào. Nếu ta không truyền gì vào thì mặc định nó lấy dấu phẩy để ngăn giữa các giá trị khi in lên trình duyệt.

Ngoài ra, chúng ta có thêm một hàm rất hay dùng để debug đó là console.log(). Các bạn hãy cài đặt Firebug trên firefox hoặc dùng chế độ “kiểm tra phần tử” có sẵn trên trình duyệt (chrome cũng tương tự), sau đó chuyển vào mục console như hình dưới đây:

Nêu bạn code bị lỗi cú pháp hoặc một lỗi bất kì liên quan đến javascript thì nó sẽ hiển thị ở ô này, nên bạn phải dùng nó để kiểm tra nếu thấy mã javascript không hoạt động nhé. Như trong hình trên thì dòng chữ đỏ là lỗi, chữ vàng là cảnh báo.

Ví dụ: in ra một mảng t trong console

var t = new Array(1,2,3); document.write(t);

Giao diện sẽ hiểu thị như sau: