Hướng dẫn cách duyệt mảng 2 chiều trong JavaScript. Bạn sẽ học được 3 cách căn bản để duyệt mảng 2 chiều trong JavaScript sau bài học này.

Chúng ta có 3 phương pháp duyệt mảng 2 chiều trong JavaScript như sau:

• Sử dụng vòng lặp for trong JavaScript
• Sử dụng vòng lặp while trong JavaScript
• Sử dụng vòng lặp forEach trong JavaScript

Duyệt mảng 2 chiều trong JavaScript với vòng lặp for

Duyệt mảng 2 chiều trong JavaScript là quá trình truy cập tới từng phần tử của một mảng 2 chiều theo một quy tắc nào đó.

Trong bài Index trong JavaScript và cách truy cập phần tử trong mảng JavaScript chúng ta đã biết cách truy cập tới từng phần tử trong mảng JavaScript thông qua index của phần tử đó.

Kết hợp index với vòng lặp for, thuộc tính length để chỉ định số vòng lặp trong từng hàng và từng cột của mảng 2 chiều, chúng ta có thể truy cập lần lượt tới các phần tử trong mảng 2 chiều và qua đó thực hiện việc duyệt mảng 2 chiều trong JavaScript, giống như ví dụ sau đây.

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Kiyoshi', 35, 'Hanoi'],
  ['Honda', 24, 'Osaka']
];

for ( let i = 0; i < userData.length; i++){
    for (let j = 0; j < userData[i].length; j++){
        console.log("["+i+"]"+"["+j+"] =",userData[i][j]);
    }
}

Kết quả:

[0][0] = Yamada
[0][1] = 28
[0][2] = Tokyo
[1][0] = Kiyoshi
[1][1] = 35
[1][2] = Hanoi
[2][0] = Honda
[2][1] = 24
[2][2] = Osaka

Duyệt mảng 2 chiều trong JavaScript với vòng lặp while

Không giới hạn trong vòng lặp for, chúng ta cũng có thể sử dụng các loại vòng lặp khác trong JavaScript, ví dụ như vòng lặp while chẳng hạn để truy cập lần lượt tới các phần tử trong mảng 2 chiều và thực hiện việc duyệt mảng 2 chiều trong JavaScript.

Ví dụ trên có thể được viết lại bằng cách dùng vòng lặp while để duyệt mảng 2 chiều trong JavaScript như sau:

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Kiyoshi', 35, 'Hanoi'],
  ['Honda', 24, 'Osaka']
];

let i = 0;
while (i < userData.length){
    let j = 0;
    while (j < userData[i].length){
        console.log("["+i+"]"+"["+j+"] =",userData[i][j]);
        j++;
    }
    i++;
}

Và kết quả thu về cũng tương tự với phương pháp duyệt mảng 2 chiều bằng vòng lặp for:

[0][0] = Yamada
[0][1] = 28
[0][2] = Tokyo
[1][0] = Kiyoshi
[1][1] = 35
[1][2] = Hanoi
[2][0] = Honda
[2][1] = 24
[2][2] = Osaka

Duyệt mảng 2 chiều trong JavaScript với vòng lặp forEach

Ngoài việc sử dụng các vòng lặp cơ bản như for hay while, đối với các loại dữ liệu thuộc kiểu colection như mảng 2 chiều thì chúng ta cũng có thể sử dụng tới vòng lặp forEach để duyệt mảng 2 chiều trong JavaScript.

Về cách sử dụng forEach trong JavaScript, bạn có thể tham khảo bài viết chi tiết sau đây:

• Xem thêm: forEach trong JavaScript

Còn sau đây là cách dùng forEach để duyệt mảng 2 chiều JavaScript:

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Kiyoshi', 35, 'Hanoi'],
  ['Honda', 24, 'Osaka']
];
userData.forEach(function(element){
  for ( let i = 0; i < element.length; i++){
    console.log(element[i]);
  } 
});

Và kết quả thu về cũng tương tự với phương pháp duyệt mảng 2 chiều bằng vòng lặp for hay while:

Yamada
28
Tokyo
Kiyoshi
35
Hanoi
Honda
24
Osaka

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách duyệt mảng 2 chiều trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/duyet-mang-2-chieu-trong-javascript/