Mảng hai chiều trong JavaScript

• Trần Thị Vân
• 1102
• 24/08/2025

Chức năng của Mảng hai chiều trong JavaScript

Mảng hai chiều trong JavaScript dùng để chứa nhiều mảng, mỗi mảng là một hàng, mỗi hàng có các cột bằng nhau.

Khai báo mảng hai chiều trong JavaScript

// Khai báo mảng bằng Array
var manghct = new Array(
new Array(6,2,8,4,9),
new Array(5,3,7,2,6),
new Array(1,9,8,2,5)
);

// Khai báo mảng bằng dấu vuông
var manghcv = [
[6,2,8,4,9],
[5,3,7,2,6],
[1,9,8,2,5]
] ;

<script>
// Khai báo mảng bằng dấu vuông
var manghcv = [
[6,2,8,4,9],
[5,3,7,2,6],
[1,9,8,2,5]
] ;
// Lấy phần tử ở hàng thứ 0 và cột 4, vị trí bắt đầu của hàng và cột là 0
document.write(manghcv [0][4]+"<br>"); // Kết quả: 9

// Khai báo mảng bằng Array
var manghct = new Array(
new Array(6,2,8,4,9),
new Array(5,3,7,2,6),
new Array(1,9,8,2,5)
);
// Lấy phần tử ở hàng thứ 1 và cột 4, vị trí bắt đầu của hàng và cột là 0
document.write(manghct [1][4]+"<br>"); // Kết quả: 6
</script>

Kết quả:

9
6

Chạy Thử

Duyệt Mảng hai chiều trong JavaScript

<script>
// Khai báo mảng bằng dấu vuông
var manghcv = [
[6,2,8,4,9],
[5,3,7,2,6],
[1,9,8,2,5]
] ;

// Lặp theo hàng
for (var i = 0; i < manghcv.length; i++){ 
// manghcv.length đếm số hàng của mảng, số mảng con, đang có 3 hàng
    for (var j = 0; j < manghcv[i].length; j++){ 
        // đếm mỗi hàng có bao nhiêu phần tử
        document.write("Hàng "+[i]+" Cột "+[j]+": "+manghcv[i][j]+"<br>");
        // Lặp qua các cột của từng hàng, hàng đầu tiên là 0
    }
}
</script>

Kết quả:

Hàng 0 Cột 0: 6
Hàng 0 Cột 1: 2
Hàng 0 Cột 2: 8
Hàng 0 Cột 3: 4
Hàng 0 Cột 4: 9
Hàng 1 Cột 0: 5
Hàng 1 Cột 1: 3
Hàng 1 Cột 2: 7
Hàng 1 Cột 3: 2
Hàng 1 Cột 4: 6
Hàng 2 Cột 0: 1
Hàng 2 Cột 1: 9
Hàng 2 Cột 2: 8
Hàng 2 Cột 3: 2
Hàng 2 Cột 4: 5

Chạy Thử

Thêm phần tử vào Mảng hai chiều trong JavaScript

Thêm vào cuối Mảng hai chiều trong JavaScript

<script>
// Khai báo mảng bằng dấu vuông
var manghcv = [] ;

// Thêm vào cuối mảng bằng hàm push
manghcv .push([6,2,8,4,9]);
manghcv .push([5,3,7,2,6]);
manghcv .push([1,9,8,2,5]);

// Lặp theo hàng
for (var i = 0; i < manghcv.length; i++){ 
// manghcv.length đếm số hàng của mảng, số mảng con, đang có 3 hàng
    for (var j = 0; j < manghcv[i].length; j++){ 
    // đếm mỗi hàng có bao nhiêu phần tử
       if(manghcv[i].length-1==j){
       var bien = manghcv[i][j]+"<br>";
       }else{
        var bien = manghcv[i][j]+" - ";
       }
       document.write(bien);
       // Lặp qua các cột của từng hàng, hàng đầu tiên là 0
    }
}
</script>

Kết quả:

6 - 2 - 8 - 4 - 9
5 - 3 - 7 - 2 - 6
1 - 9 - 8 - 2 - 5

Chạy Thử

Thêm vào đầu Mảng hai chiều trong JavaScript

<script>
// Khai báo mảng bằng dấu vuông
var manghcv = [] ;

// thêm vào đầu mảng bằng hàm unshift
manghcv .unshift([6,2,8,4,9]);
manghcv .unshift([5,3,7,2,6]);
manghcv .unshift([1,9,8,2,5]);

// Lặp theo hàng
for (var i = 0; i < manghcv.length; i++){
// manghcv.length đếm số hàng của mảng, số mảng con, đang có 3 hàng
    for (var j = 0; j < manghcv[i].length; j++){
    // đếm mỗi hàng có bao nhiêu phần tử
       if(manghcv[i].length-1==j){
        var bien = manghcv[i][j]+"<br>";
       }else{
        var bien = manghcv[i][j]+" - ";
       }
       document.write(bien);  // Lặp qua các cột của từng hàng, hàng đầu tiên là 0
    }
}
</script>

Kết quả:

1 - 9 - 8 - 2 - 5
5 - 3 - 7 - 2 - 6
6 - 2 - 8 - 4 - 9

Chạy Thử

Xử lý Mảng hai chiều trong JavaScript

Sau khi tạo và duyệt mảng hai chiều, bước tiếp theo là xử lý dữ liệu bên trong từng hàng và cột. JavaScript cho phép truy cập trực tiếp từng phần tử, thay đổi giá trị, tìm kiếm hoặc thực hiện các phép tính trên toàn bộ dữ liệu. Đây là những thao tác thường gặp khi làm việc với bảng dữ liệu, danh sách sản phẩm hoặc thông tin được tổ chức theo hàng và cột.

Truy cập và thay đổi phần tử trong Mảng hai chiều

Để lấy một phần tử, sử dụng hai chỉ số liên tiếp: chỉ số thứ nhất xác định hàng và chỉ số thứ hai xác định vị trí của phần tử trong hàng đó. Cách này giúp truy cập chính xác dữ liệu mà không cần duyệt toàn bộ mảng.

let sinhVien = [
    ["An", 20],
    ["Bình", 21],
    ["Cường", 22]
];

console.log(sinhVien[1][0]);

Kết quả là Bình, vì [1] chọn hàng thứ hai và [0] chọn phần tử đầu tiên của hàng đó. Khi cần cập nhật dữ liệu, có thể gán giá trị mới trực tiếp vào vị trí tương ứng.

sinhVien[1][1] = 22;

console.log(sinhVien);

Cách thao tác này phù hợp khi biết rõ vị trí cần thay đổi. Nếu vị trí được xác định dựa trên một điều kiện, nên kết hợp với các phương thức tìm kiếm hoặc vòng lặp để tránh cập nhật nhầm dữ liệu.

Xóa phần tử trong Mảng hai chiều

JavaScript không có một phương thức riêng dành cho việc xóa phần tử của mảng hai chiều. Có thể sử dụng splice() trên từng mảng con để loại bỏ phần tử ở vị trí mong muốn.

let sanPham = [
    ["Laptop", 1500],
    ["Chuột", 30],
    ["Bàn phím", 50]
];

sanPham.splice(1, 1);

console.log(sanPham);

Trong ví dụ trên, splice(1, 1) xóa hàng thứ hai cùng toàn bộ dữ liệu thuộc hàng đó. Nếu chỉ muốn xóa một giá trị bên trong một hàng mà vẫn giữ nguyên hàng, cần gọi splice() trên mảng con tương ứng.

let duLieu = [
    ["A", 10, 20],
    ["B", 30, 40]
];

duLieu[0].splice(1, 1);

console.log(duLieu);

Khi xóa dữ liệu, cần xác định rõ đang muốn bỏ cả hàng hay chỉ bỏ một phần tử trong hàng, vì hai thao tác này tác động đến cấu trúc mảng theo cách khác nhau.

Tìm kiếm phần tử trong Mảng hai chiều

Với mảng hai chiều, việc tìm kiếm thường cần kiểm tra từng mảng con. Có thể sử dụng vòng lặp để kiểm soát cả chỉ số hàng và cột, đặc biệt khi cần biết chính xác vị trí của dữ liệu.

let danhSach = [
    ["An", "Hà Nội"],
    ["Bình", "Đà Nẵng"],
    ["Cường", "Hải Phòng"]
];

for (let i = 0; i < danhSach.length; i++) {
    for (let j = 0; j < danhSach[i].length; j++) {
        if (danhSach[i][j] === "Đà Nẵng") {
            console.log("Tìm thấy tại hàng:", i, "cột:", j);
        }
    }
}

Cách làm này hữu ích khi dữ liệu có nhiều cột và cần xác định chính xác vị trí của giá trị. Với những bài toán phức tạp hơn, có thể kết hợp find(), some() hoặc includes() tùy mục đích xử lý.

Tính tổng các phần tử trong Mảng hai chiều

Nếu các mảng con chứa dữ liệu số, có thể dùng hai vòng lặp để lần lượt lấy từng giá trị và cộng vào một biến tổng. Đây là cách đơn giản, dễ kiểm soát khi cấu trúc dữ liệu gồm nhiều hàng.

let diem = [
    [8, 7, 9],
    [6, 8, 7],
    [9, 9, 10]
];

let tong = 0;

for (let i = 0; i < diem.length; i++) {
    for (let j = 0; j < diem[i].length; j++) {
        tong += diem[i][j];
    }
}

console.log(tong);

Từ cách tính tổng này, có thể phát triển thành các bài toán như tính tổng theo từng hàng, từng cột hoặc tính điểm trung bình. Điều quan trọng là xác định phạm vi dữ liệu cần cộng trước khi triển khai vòng lặp.

Sắp xếp dữ liệu trong Mảng hai chiều

Để sắp xếp mảng hai chiều, trước tiên cần xác định cột nào được dùng làm tiêu chí. Chẳng hạn, với danh sách sản phẩm gồm tên và giá, có thể sắp xếp các hàng dựa trên giá thay vì sắp xếp từng mảng con độc lập.

let sanPham = [
    ["Laptop", 1500],
    ["Chuột", 30],
    ["Bàn phím", 50]
];

sanPham.sort((a, b) => a[1] - b[1]);

console.log(sanPham);

Ở đây, a[1] và b[1] là giá của hai sản phẩm được đem ra so sánh. Nếu muốn sắp xếp theo thứ tự giảm dần, chỉ cần đảo vị trí hai toán hạng trong phép trừ.

sanPham.sort((a, b) => b[1] - a[1]);

Cách sắp xếp theo cột đặc biệt hữu ích khi mảng hai chiều đại diện cho một bảng dữ liệu, bởi toàn bộ hàng sẽ được di chuyển cùng nhau thay vì làm mất mối liên hệ giữa các giá trị.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Mảng hai chiều trong JavaScript.