Lấy độ dài của mảng 2 chiều JavaScript

Trong lập trình JavaScript, chúng ta đã quen với việc tạo và làm việc với mảng một chiều. Là những mảng chứa các phần tử (các phần tử có kiểu dữ liệu giống nhau hoặc nhiều kiểu dữ liệu)

Nhưng thật tốt khi biết rằng mảng hai chiều (mảng 2D) tồn tại trong JS

Trong bài viết này, bạn sẽ tìm hiểu mảng hai chiều là gì và cách chúng hoạt động trong JavaScript. Nó khá khác biệt so với các ngôn ngữ lập trình khác bởi vì, về mặt kỹ thuật, không có mảng hai chiều trong JavaScript

Mảng hai chiều là gì?

Mảng hai chiều, còn được gọi là mảng 2D, là tập hợp các phần tử dữ liệu được sắp xếp theo cấu trúc giống như lưới với các hàng và cột. Mỗi phần tử trong mảng được gọi là một ô và có thể được truy cập bằng các chỉ số/chỉ số hàng và cột của nó

[ a1, a2, a3, ..., an,
  b1, b2, b3, ..., bn,
  c1, c2, c3, ..., cn,
  .
  .
  .
  z1, z2, z3, ..., zn ]

Trong JavaScript, không có cú pháp trực tiếp để tạo mảng 2D như với các ngôn ngữ lập trình thường được sử dụng khác như C, C++ và Java

Bạn có thể tạo mảng hai chiều trong JavaScript thông qua mảng răng cưa — mảng của mảng. Ví dụ, bên dưới là hình dạng của một mảng lởm chởm

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Nhưng có một hạn chế. Điều quan trọng cần lưu ý là mảng hai chiều có kích thước cố định. Điều này có nghĩa là khi chúng được tạo, số lượng hàng và cột sẽ được cố định. Ngoài ra, mỗi hàng phải có số phần tử (cột) tương tự nhau

Ví dụ, mảng dưới đây có ba hàng và bốn phần tử

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Hạn chế là với mảng răng cưa, bạn không thể chỉ định hàng và cột cố định. Điều này có nghĩa là một mảng răng cưa có thể có m hàng, mỗi hàng có số lượng phần tử khác nhau

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Tại sao nên sử dụng Mảng 2D trong JavaScript?

Tại thời điểm này, bạn có thể tự hỏi về tầm quan trọng của mảng 2D, đặc biệt nếu đây là lần đầu tiên bạn đọc về mảng 2D

Trong JavaScript, chúng tôi sử dụng mảng hai chiều, còn được gọi là ma trận, để lưu trữ và thao tác dữ liệu theo cách có cấu trúc và tổ chức

• Chúng cho phép lưu trữ và thao tác hiệu quả với lượng lớn dữ liệu, chẳng hạn như trong xử lý hình ảnh hoặc video, mô phỏng khoa học và ứng dụng bảng tính
• Mảng hai chiều cũng cho phép sử dụng các phép toán ma trận, chẳng hạn như phép nhân và chuyển vị ma trận, có thể đơn giản hóa các phép tính phức tạp và làm cho mã dễ đọc hơn
• Mảng hai chiều có thể biểu diễn ma trận toán học trong đại số tuyến tính và nhiều loại dữ liệu, chẳng hạn như đồ thị, bản đồ và bảng
• Mảng hai chiều thường được sử dụng trong các ứng dụng liên quan đến bảng dữ liệu, xử lý hình ảnh và phát triển trò chơi

Cách truy cập các phần tử trong mảng JavaScript 2D

Trước khi bạn tìm hiểu cách tạo mảng 2D trong JavaScript, trước tiên hãy tìm hiểu cách truy cập các phần tử trong mảng 2D

Bạn có thể truy cập các phần tử của mảng hai chiều bằng hai chỉ số, một cho hàng và một cho cột. Giả sử bạn có mảng hai chiều sau

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

Trên đây là một mảng răng cưa, trong đó mỗi phần tử chứa tên, điểm kiểm tra, điểm thi và lớp của học sinh. Bạn có thể truy cập các phần tử cụ thể bằng cách sử dụng chỉ mục hàng và cột như trong cú pháp bên dưới

arrayName[rowIndex][columnIndex]

Để hiểu rõ hơn về điều này, hãy chuyển đổi mảng hai chiều ở trên thành một bảng bằng cách sử dụng

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Ghi chú. đảm bảo rằng bạn thay thế

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

5 bằng tên của mảng 2D của bạn. Trong trường hợp của tôi, đó là

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

6

Bạn sẽ nhận được kết quả như thế này, hiển thị chỉ số hàng và cột. Hãy nhớ rằng các mảng không được lập chỉ mục, nghĩa là các mục được tham chiếu từ 0, không phải 1

Xin lưu ý rằng cột và hàng

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Bạn sử dụng hai dấu ngoặc vuông để truy cập một phần tử của mảng hai chiều hoặc nhiều chiều. Cái đầu tiên truy cập các hàng, trong khi cái thứ hai truy cập phần tử trong hàng đã chỉ định

console.log(MathScore[4][0]); // returns 'Ben Liard'
console.log(MathScore[2][1]); // returns 5
console.log(MathScore[1][3]); // returns 'B'
console.log(MathScore[2][2]); // returns 24

Cách truy cập các phần tử đầu tiên và cuối cùng của mảng 2D

Đôi khi bạn có thể cần tìm phần tử đầu tiên và phần tử cuối cùng của mảng hai chiều. Bạn có thể thực hiện việc này bằng cách sử dụng chỉ mục đầu tiên và chỉ mục cuối cùng của cả hàng và cột

Phần tử đầu tiên sẽ luôn có chỉ số hàng và cột bằng 0, nghĩa là bạn sẽ sử dụng

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Tuy nhiên, chỉ mục của phần tử cuối cùng có thể phức tạp. Ví dụ: trong ví dụ trên, phần tử đầu tiên là 'John Doe' trong khi phần tử cuối cùng là 'B'

console.log(MathScore[0][0]); // returns 'John Doe'
console.log(MathScore[MathScore.length-1][(MathScore[MathScore.length -1]).length - 1]); // returns 'B'

Cách thêm tất cả các phần tử của mảng 2D

Trong một số trường hợp, tất cả các phần tử của mảng 2D của bạn có thể là số, vì vậy bạn có thể cần phải cộng chúng lại với nhau và chỉ có một chữ số. Bạn có thể làm điều này bằng cách sử dụng một vòng lặp lồng nhau. Trước tiên, bạn sẽ lặp qua các hàng, sau đó, đối với mỗi hàng, bạn lặp qua các phần tử của nó

let numberArr = [
  [10, 20, 60],
  [8, 10, 52],
  [15, 5, 24],
  [26, 28, 43],
  [12, 16, 51]
];

var sum = 0;
numberArr.forEach((row) => {
  row.forEach((element) => {
    sum += element;
  });
});
console.log("The sum of all elements in the array is:" + sum); // returns "The sum of all elements in the array is: 380"

Cách thao tác mảng 2D trong JavaScript

Bạn có thể thao tác với mảng 2D giống như mảng một chiều bằng cách sử dụng các phương thức mảng chung như pop, push, splice, v.v.

Hãy bắt đầu bằng cách tìm hiểu cách thêm/chèn một hàng và phần tử mới vào mảng 2D

Cách chèn một phần tử vào mảng 2D

Bạn có thể thêm một phần tử hoặc nhiều phần tử vào mảng 2D bằng các phương thức push() và unshift()

Phương thức push() thêm (các) phần tử vào cuối mảng 2D, trong khi phương thức unshift() thêm (các) phần tử vào đầu mảng 2D

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.push(["Tom Right", 30, 32, "B"]);

MathScore.unshift(["Alice George", 28, 62, "A"]);

Khi bạn

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Bạn cũng có thể thêm các phần tử vào mảng bên trong, nhưng thật sai lầm khi chỉ đẩy vào một mảng bên trong mà không ảnh hưởng đến tất cả các phần tử của mảng. Điều này là do mảng hai chiều có nghĩa là có cùng số phần tử trong mỗi mảng phần tử

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Thay vì ảnh hưởng đến một phần tử mảng, bạn có thể thêm các phần tử vào tất cả các mảng phần tử cùng một lúc

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Điều này sẽ trở lại

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Bạn cũng có thể sử dụng phương thức

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Ở trên,

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

Đây là đầu ra

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Cách xóa phần tử khỏi mảng 2D

Bạn cũng có thể xóa (các) phần tử khỏi đầu và cuối của mảng 2D bằng các phương thức

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Khi bạn

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Bạn cũng có thể xóa các phần tử khỏi từng phần tử mảng

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Điều này sẽ trở lại

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

Bạn cũng có thể sử dụng phương thức

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Trong đoạn mã trên, bạn xóa một mục khỏi chỉ mục vị trí

arrayName[rowIndex][columnIndex]

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Ghi chú. Tất cả các phương thức mảng JavaScript sẽ hoạt động trên một mảng 2D vì nó là một mảng của các mảng. Bạn chỉ cần lưu ý khi điều chỉnh các phần tử riêng lẻ trong mảng phần tử. Bạn thực hiện thay đổi tương tự trên tất cả các phần tử bằng cách lặp qua, mặc dù mảng 2D trong JavaScript không nghiêm ngặt

Cách tạo mảng 2D trong JavaScript

Có hai tùy chọn để tạo một mảng nhiều chiều. Bạn có thể tạo mảng theo cách thủ công với ký hiệu ký tự mảng, ký hiệu này sử dụng dấu ngoặc vuông

arrayName[rowIndex][columnIndex]

Cách tạo một mảng 2D bằng cách sử dụng một mảng chữ

Điều này giống như các ví dụ mà chúng tôi đã xem xét bằng cách sử dụng cú pháp sau

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Ví dụ, bên dưới là một mảng 2D chứa thông tin về điểm và điểm môn toán của từng học sinh

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Cách tạo mảng 2D bằng vòng lặp for lồng nhau

Có nhiều cách tiếp cận để làm điều này. Nhưng nhìn chung, bạn tạo một vòng lặp lồng nhau trong đó vòng lặp đầu tiên sẽ lặp qua các hàng trong khi vòng lặp thứ hai sẽ lặp qua các phần tử trong mảng (cột) bên trong

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Trong đoạn mã trên, trước tiên bạn sẽ lặp qua các hàng. Đối với mỗi hàng, nó sẽ tạo một mảng trống bên trong mảng ban đầu được khai báo và lưu trữ trong biến

arrayName[rowIndex][columnIndex]

Trong ví dụ này, chỉ mục cho

arrayName[rowIndex][columnIndex]

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Bạn có thể quyết định tạo một số, khởi tạo bằng 0, sau đó tăng lên khi bạn lặp lại để bạn không có cùng một số cho tất cả các phần tử

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Điều này sẽ trở lại

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Bạn cũng có thể quyết định tạo một hàm chấp nhận các giá trị này làm đối số

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Cách cập nhật các phần tử trong mảng 2D trong JavaScript

Điều này rất giống với cách bạn thực hiện với mảng một chiều, nơi bạn có thể cập nhật giá trị của mảng bằng cách sử dụng chỉ mục để gán giá trị khác

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

Bạn có thể sử dụng phương pháp tương tự để thay đổi toàn bộ hàng hoặc thậm chí các phần tử riêng lẻ

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Điều này sẽ thay thế giá trị của chỉ mục

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Bạn có thể cập nhật các phần tử riêng lẻ bằng cách theo dõi các chỉ số hàng và cột và cập nhật giá trị của chúng

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

Thao tác này sẽ thay đổi tên trên hàng có chỉ số

arrayName[rowIndex][columnIndex]

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

kết thúc

Trong bài viết này, bạn đã biết mảng hai chiều là gì và cách chúng hoạt động trong JavaScript

Điều quan trọng cần biết là mảng 2D trong JavaScript vẫn hoạt động rất giống mảng một chiều, vì vậy hãy thoải mái tinh chỉnh và thao tác với chúng bằng các phương thức JavaScript

Chúc các bạn code vui vẻ

Bạn có thể truy cập hơn 150 bài báo của tôi bằng cách truy cập trang web của tôi. Bạn cũng có thể sử dụng trường tìm kiếm để xem tôi đã viết một bài báo cụ thể chưa

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Joel Olawanle

Nhà phát triển Frontend & Người viết kỹ thuật

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Độ dài của mảng 2 chiều trong JavaScript là bao nhiêu?

Làm cách nào để tìm mảng có độ dài mảng trong JavaScript?

Công thức tính kích thước của mảng 2D là gì?

Làm cách nào để truy cập mảng 2D trong JavaScript?