HOME › học javascript - lập trình javascript cơ bản>>04. mảng trong javascript

Mảng 2 chiều trong JavaScript

17 tháng 12 ,2021

Cùng tìm hiểu về mảng 2 chiều trong JavaScript. Bạn sẽ biết mảng 2 chiều trong JavaScript là gì, cách khai báo mảng 2 chiều trong javascript cũng như cách duyệt mảng 2 chiều trong javascript sau bài học này.

Mảng 2 chiều trong JavaScript là gì ?

Trong bài Mảng trong JavaScript là gì chúng ta đã biết mảng trong JavaScript, hay còn gọi là kiểu mảng trong JavaScript là tập hợp các dữ liệu có cùng kiểu, và các dữ liệu chứa trong mảng được gọi là phần tử của mảng đó. Chúng ta không thể kết hợp các kiểu dữ liệu khác nhau trong cùng một mảng.

Mảng trong JavaScript được chia ra làm 2 loại, đó là mảng 1 chiều và mảng đa chiều. Trong đó chúng ta hay sử dụng loại mảng đa chiều nhiều nhất đó chính là mảng 2 chiều trong JavaScript.

Trong ngôn ngữ JavaScript, mảng 2 chiều là kiểu mảng chứa các mảng khác bên trong nó. Phần tử của mảng 2 chiều không được lưu giữ trực tiếp trong mảng 2 chiều, mà được lưu giữ thông qua các mảng 1 chiều bên trong mảng 2 chiều đó. Do cấu tạo mảng như vậy nên chúng ta mới gọi các mảng trong mảng như thế này là mảng 2 chiều.

Mỗi phần tử trong mảng 2 chiều cần được xác định bởi một cặp index (chỉ số) là [index dọc][index ngang], trong đó [index dọc] để xác vị trí của mảng 1 chiều chứa nó trong mảng 2 chiều, và [index ngang] để xác định vị trí của nó trong mảng 1 chiều chứa nó.

Ví dụ điển hình của mảng 2 chiều là bảng điểm dưới đây. Bảng điểm có 2 hàng tương ứng với số điểm của từng người, và trong mỗi hàng lại có 3 cột tương ứng với số điểm của từng môn. Khi biểu diễn bảng điểm thành mảng, mỗi một hàng trong bảng sẽ trở thành một mảng 1 chiều, và mỗi mảng 1 một chiều sẽ chứa tối đa 3 phần tử tương ứng với điểm số của từng môn như sau:

Để truy cập tới từng ô điểm trong bảng điểm, chúng ta cần biết ô đó thuộc hàng thứ mấy, và cột thứ mấy. Và khi chuyển bảng điểm thành mảng thì một cách tương tự, để truy cập tới các phần tử trong mảng 2 chiều, chúng ta cần biết phần tử đó thuộc mảng 1 chiều thứ bao nhiêu (tính từ trên xuống dưới), và vị trí của nó trong mảng 1 chiều đó (tính từ trái qua phải). Các vị trí này cũng được đánh số thứ tự tương tự như mảng 1 chiều, luôn bắt đầu bằng 0 và tăng dần 1 đơn vị.

Ví dụ, phần tử [9] thuộc mảng 1 chiều đầu tiên (index dọc bằng 0) và đứng thứ 2 trong mảng 1 chiều chứa nó (index ngang bằng 1). Do vậy, nó được xác định bởi cặp index là [0][1].

Mảng 2 chiều thường được sử dụng để biểu diễn và tính toán ma trận trong JavaScript. Ngoài ra, các dữ liệu như “hình ảnh” và “cơ sở dữ liệu” sử dụng trong chương trình JavaScript đều là các dữ liệu được sắp xếp theo định dạng hai chiều, và chúng ta cũng cần phải sử dụng mảng 2 chiều để biểu diễn chúng.

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

Để khai báo mảng 2 chiều trong JavaScript, chúng ta sử dụng cú pháp sau đây:

let name = [arr1, arr2, arr3 …];

Trong đó name là tên mảng 2 chiều, và các arr là các mảng 1 chiều được sử dụng như là phần tử bên trong mảng 2 chiều cần khai báo.

Ví dụ cụ thể về cách khai báo mảng 2 chiều trong JavaScript:

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

let bangdiem = [    
    [7, 9, 8] ,    
    [8, 6, 7] ,     
    [5, 7, 6] ,    
    [4, 9, 5] ,    
    [5, 8, 7] ,    
    [6, 9, 3]
] ;

Ngoài ra, bạn cũng có thể khai báo từng mảng 1 chiều trước, sau đó sử dụng chúng để khai báo mảng 2 chiều như ví dụ sau:

let yamada =  ['Yamada', 28, 'Tokyo'];
let kiyoshi = ['Kiyoshi', 35, 'Hanoi'];
let honda =  ['Honda', 24, 'Sendai'];

let userData = [ yamada, kiyoshi, honda];

Cách khai báo mảng 2 chiều này sẽ giúp chúng ta nhìn rõ hơn cấu trúc dữ liệu của mảng 2 chiều đang dùng.

Truy cập phần tử trong mảng 2 chiều

Sau khi đã khởi tạo một mảng 2 chiều, chúng ta có thể truy cập vào từng phần tử của mảng để lấy hoặc thay đổi giá trị, thông qua index của phần tử đó.

Mỗi phần tử trong mảng 2 chiều được xác định thông qua một cặp index là [index dọc][index ngang], trong đó [index dọc] để xác vị trí của mảng 1 chiều chứa nó trong mảng 2 chiều, và [index ngang] để xác định vị trí của nó trong mảng 1 chiều chứa nó.

Bằng cách viết tên mảng đằng trước, rồi sau đó chỉ định theo thứ tự [index dọc] và [index ngang] của phần tử vào trong cặp dấu ngoặc vuông [], chúng ta có thể truy cập phần tử trong mảng 2 chiều với cú pháp sau đây:

name[y][x]

Trong đó y là [index dọc] và x là [index ngang] của phần tử cần truy cập.

Sau khi truy cập phần tử trong mảng 2 chiều, chúng ta có thể lấy giá trị của nó, hoặc là gán giá trị mới và thay đổi giá trị ban đầu của nó.

Ví dụ, chúng ta lấy phần tử trong mảng 2 chiều, và thay đổi giá trị phần tử của mảng 2 chiều như sau:

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Kiyoshi', 35, 'Hanoi'],
  ['Honda', 24, 'Sendai']
];
//Lấy giá trị phần tử
console.log( "Phan tu [0][2]: ", userData[0][2] );
console.log( "Phan tu [2][1]: ", userData[2][1] );

//Thay đổi giá trị phần tử
userData[2][1] = 10;
console.log( "Phan tu  [2][1]: ", userData[2][1]);

Kết quả:

Phan tu [0][2]:  Tokyo
Phan tu [2][1]:  24
Phan tu  [2][1]:  10

Duyệt mảng 2 chiều trong JavaScript

Có 3 phương pháp căn bản để duyệt mảng 2 chiều trong JavaScript mà Kiyoshi đã hướng dẫn riêng trong bài Duyệt mảng 2 chiều trong JavaScript.

Ví dụ, chúng ta dùng forEach để duyệt mảng 2 chiều trong JavaScript như sau:

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

Và kết quả:

Yamada
28
Tokyo
Kiyoshi
30
Hanoi
Honda
24
Osaka

Nếu bạn không muốn duyệt từng phần tử của mảng như trên thì có thể in toàn bộ mảng 2 chiều ra bằng console.log() như sau:

let userData = [
  ['Yamada', 28, 'Tokyo'],
  ['Kiyoshi', 30, 'Hanoi'],
  ['Honda', 24, 'Osaka']
];
console.log(userData);

Kết quả:

[
  [ 'Yamada', 28, 'Tokyo' ],
  [ 'Kiyoshi', 30, 'Hanoi' ],
  [ 'Honda', 24, 'Osaka' ]
]

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về 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.