Mảng 2 chiều trong JavaScript

Giới thiệu

Ở bài trước, mình đã cùng các bạn tìm hiểu về Mảng 1 chiều. Trong bài viết này, mình sẽ giới thiệu về Mảng 2 chiều trong JavaScript. Nhưng trên thực tế, JavaScript lại không hỗ trợ Mảng 2 chiều.

Và cách thường sử dụng để xử lý dữ liệu trong mảng 2 chiều là tạo thêm 1 đối tượng Array trong phần tử của mảng đó. Và mảng đa chiều cũng vậy vì nó là một mảng của các mảng, hay nói cách khác là một mảng mà các phần tử của nó bao gồm các mảng.

Mảng một chiều khi mô phỏng nó bằng hình ảnh, chúng ta chỉ thấy được 1 hàng ngang có nhiều cột phân chia thành các ô (tượng trưng cho các ô nhớ trong máy tính).

Còn khi chúng ta nhìn vào mảng hai chiều, chúng ta thấy có nhiều hàng, mỗi hàng lại có nhiều cột, đặc biệt hơn là số lượng cột ở mỗi hàng đều bằng nhau.

Cú pháp khai báo mảng 2 chiều trong JavaScript

Mình sẽ dùng dấu ngoặc vuông “[ ]“ để khai báo mảng, những cách còn lại các bạn có thể xem ở bài viết trước:

var arr = [
    ["Apple", "Orange", "Pear"],
    ["Carrots", "Beans", "Peas"],
    ["Cookies", "Cake", "Muffins", "Pie"]
];Code language: JavaScript (javascript)

Truy xuất một phần tử của mảng

Để truy xuất các phần tử của mảng 2 chiều, ta sử dụng dấu ngoặc vuông như đoạn code minh họa sau:

console.log(arr[2][1]);  // CakeCode language: JavaScript (javascript)

Dấu ngoặc vuông đầu tiên tham chiếu đến phần tử mong muốn trong mảng bên ngoài. Dấu ngoặc vuông thứ hai tham chiếu đến phần tử mong muốn trong mảng bên trong. Vì vậy, arr[2][1] tham chiếu đến phần tử thứ hai trong mảng con thứ ba. (Chỉ mục trong mảng JavaScript bắt đầu từ 0).

Thêm và xoá phần tử trong mảng

Bạn có thể sử dụng ký hiệu dấu ngoặc vuông để thêm các phần tử vào các mảng bên trong. Dưới đây mình sẽ minh họa việc thêm một phần tử mới vào cuối mảng con đầu tiên, với console.log được sử dụng để hiển thị kết quả:

arr[0][3] = "Banana";
console.log(arr[0]); // ["Apple", "Orange", "Pear", "Banana"]Code language: JavaScript (javascript)

Ngoài ra, có thể áp dụng các phương thức của mảng cho các mảng lồng nhau. Mình sử dụng hàm push() để thêm hai phần tử mới vào mảng con thứ hai:

arr[1].push("Kale", "Broccoli");
console.log(arr[1]); // ["Carrots", "Beans", "Peas", "Kale", "Broccoli"]Code language: JavaScript (javascript)

Hàm push() còn được dùng để thêm một phần tử mới vào mảng bên ngoài:

arr.push(["Fried Chicken", "Pot Roast", "Rib-eye Steak"]);Code language: CSS (css)

Tương tự như hàm push(), hàm pop() được sử dụng để xoá các phần tử khỏi mảng, cụ thể ở đây là xoá phần tử ở mảng con:

arr[2].pop();  // xoá phần tử cuối cùng ở mảng con thứ 3
console.log(arr[2]);  // ["Cookies", "Cake", "Muffins"]Code language: JavaScript (javascript)

Duyệt phần tử trong mảng

Khi muốn duyệt các phần tử của một mảng 2 chiều, ta sử dụng các vòng lặp for lồng nhau:

// Vòng lặp đầu áp dụng cho mảng bên ngoài
for (var i = 0; i < arr.length; i++) {
    // Vòng lặp thứ hai áp dụng cho mảng bên trong
    for (var j = 0; j < arr[i].length; j++) {
        // Truy xuất các phần tử của từng mảng con
        console.log(arr[i][j]); 
    }
}Code language: JavaScript (javascript)

Kết quả:

Apple 
Orange 
Pear 
Carrots 
Beans 
Peas 
Cookies 
Cake 
Muffins 
Pie

Trên đây mình đã giới thiệu cho các bạn về mảng 2 chiều, các thao tác để khai báo và truy xuất cũng như một số hàm có sẵn trong JavaScript để thêm, sửa, xoá phần tử trong mảng 2 chiều.

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.