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

Tạo mảng trong JavaScript

27 tháng 7 ,2021

Hướng dẫn cách tạo mảng trong JavaScript. Bạn sẽ học được tất cả các cách tạo và khai báo mảng javascript sau bài học này.

Chúng ta có 4 phương pháp cơ bản để tạo và khai báo mảng trong JavaScript như sau:

Sử dụng cặp dấu []: chỉ định trực tiếp giá trị phần tử trong mảng
Sử dụng biến: chỉ định gián tiếp giá trị phần tử trong mảng
Sử dụng biểu thức: chỉ định biểu thức làm giá trị phần tử trong mảng
Sử dụng hàm tạo Array() constructor trong Array Object

Tạo mảng trong JavaScript bằng cách định trực tiếp giá trị phần tử | cặp dấu []

Để tạo mảng trong JavaScript, chúng ta chỉ định trực tiếp giá trị các phần tử bên trong cặp dấu [ ] và cách nhau bởi dấu , với cú pháp như sau:

[Phần tử 1, Phần tử 2, ...]

Các phần tử có thể là bất kỳ dạng dữ liệu nào mà JavaScript có thể xử lý, chẳng hạn như số và chuỗi.
Ví dụ:

let array1 = [10, 20, 30, 40, 50];
let array2 = ['Hanoi' , 'Saigon',  'Cantho'];

Bạn cũng có thể sử dụng nhiều kiểu dữ liệu khác nhau cho từng phần tử trong cùng một mảng.

let array3 = ['Kiyoshi', 30 , True];

Ngoài ra bạn cũng có thể sử dụng một mảng như là một phần tử trong một mảng khác, và chúng ta gọi đây là mảng trong mảng hay còn gọi là mảng đa chiều trong JavaScript. Ví dụ:

let array4 = ['Cam' , 'Táo' , ['Dâu xanh' , 'Dâu đỏ']];

Sau khi tạo mảng trong JavaScript, chúng ta có thể thêm cũng như là xóa phần tử từ trong mảng đã tạo. Bạn cũng có thể tạo mảng rỗng trong JavaScript với cách viết sau:

let empty_array = [];
console.log(empty_array);
//> []

Giống như ở trên thì sau khi tạo mảng, bạn có thể gán mảng đó vào một biến để sử dụng nhiều lần trong chương trình. Ví dụ:

let fruits = ['Cam' , 'Táo' , ['Dâu xanh' , 'Dâu đỏ']];
for (let i=0; i< fruits.length;i++){
  console.log(fruits[i]);
}

Kết quả

Cam
Táo
['Dâu xanh', 'Dâu đỏ']

Lưu ý là khác với các ngôn ngữ lập trình khác thì trong mảng JavaScript không yêu cầu bắt buộc các phần tử trong mảng phải liên tiếp nhau. Ví dụ trong một mảng tồn tại phần tử ở vị trí index thứ 1 và thứ 3, nhưng không nhất thiết phải tồn tại phần tử tại vị trí index thứ 2. Khi truy cập và lấy một phần tử không tồn tại trong mảng thì giá trị undefined sẽ được trả về mà không xảy ra lỗi.

Ví dụ:

let num_array = [11, , 13];

console.log(num_array);
//> [ 11, <1 empty item>, 13 ]

console.log(num_array[1]);
//> undefined

console.log(num_array.length);

Bạn hãy chú ý ở đây không phải là phần tử trong mảng không chứa giá trị, mà là vốn phần tử đó không hề tồn tại tại vị trí chỉ định trong mảng. Nếu chúng ta sử dụng thuộc tính length để kiểm tra độ dài của mảng này thì giá trị trả về sẽ là số index trong mảng, nhưng điều đó không có nghĩa là số index này sẽ bằng số phần tử trong mảng.

let num_array = [11, , 13];
console.log(num_array.length);
//> 3

Khai báo mảng trong JavaScript bằng cách định gián tiếp giá trị phần tử | biến trong JavaScript

Thay vì chỉ định trực tiếp giá trị của phần tử, chúng ta sẽ chỉ định gián tiếp giá trị phần tử thông qua biến, bằng cách gán giá trị vào biến và sử dụng biến đó để khởi tạo mảng.

Ví dụ, chúng ta gán các giá trị phần tử vào biến x, y và sử dụng các biến này để tạo mảng JavaScript như sau:

let x = 10;
let y = 15;
let num_array = [x, y];
console.log(num_array);
//> [ 10, 15 ]

let num_array_2 = [20, y]
console.log(num_array_2);
//> [ 20, 15 ]

Ở đây cần lưu ý là chúng ta chỉ sử dụng giá trị của biến để khởi tạo giá trị phần tử khi tạo mảng, chứ không tạo ra một mối quan hệ tham chiếu giữa biến và các phần tử trong mảng.

Do đó, sau khi tạo xong mảng, nếu chúng ta thay đổi giá trị của biến, thì giá trị của phần tử trong mảng cũng sẽ không bị thay đổi theo biến.

Ví dụ, giá trị các phần tử trong mảng không bị thay đổi dù giá trị các biến x, y sử dụng để tạo nó đã bị thay đổi.

let x = 10;
let y = 15;
let num_array = [x, y];
console.log(num_array);//> [ 10, 15 ]

//Thay đổi giá trị của x, y
x = 20;
y = 25;
console.log(num_array);//> [ 10, 15 ]

Khai báo JavaScript bằng cách chỉ định biểu thức làm giá trị phần tử của mảng

Khi tạo ra mảng trong JavaScript chúng ta có thể sử dụng trực tiếp các biểu thức tính toán làm giá trị trong mảng. Trong trường hợp này thì không phải biểu thức tính toán mà chính kết quả của biểu thức sẽ được sử dụng làm phần tử trong mảng.

Ví dụ cụ thể, chúng ta sử dụng biểu thức tính toán với các số làm giá trị trong mảng như sau:

let num_array = [1 + 2, 10 * 3];
console.log(num_array);//> [ 3, 30 ]

Tương tự thì chúng ta cũng có thể sử dụng biểu thức tính toán với các biến để tạo mảng trong JavaScript như sau:

let x = 10;
let num_array = [x + 2, x - 3];
console.log(num_array);//> [ 12, 7 ]

Tuy nhiên chúng ta cần lưu ý khi sử dụng giá trị thuộc kiểu chuỗi trong các biểu thức tính toán này. Tùy thuộc vào toán tử sử dụng mà biểu thức tính toán có thể trả về đúng kết quả mong muốn hay không. Ví dụ chúng ta có thể sử dụng toán tử cộng nhưng không thể dùng toán tử trừ giữa chuỗi và số như sau:

let x = "a";
let num_array = [];
//OK
num_array = [x + 2, x +3];
console.log(num_array);//> [ 'a2', 'a3' ]

num_array = [x + "b", x +3];
console.log(num_array);//> [ 'ab', 'a3' ]

//NG
num_array = [x + 2, x -3];
console.log(num_array2);//> [ 'a2', NaN ]

Giống như ví dụ NG ở trên thì kết quả giữa phép trừ một chuỗi với một số sẽ trả về NaN, và đây là điều chúng ta không mong muốn khi tạo mảng trong JavaScript.

Tạo mảng trong JavaScript bằng Array() constructor trong Array Object

Array Object là đối tượng được chuẩn bị sẵn trong JavaScript để làm việc với mảng. Chúng ta có thể sử dụng hàm tạo (Array() constructor) trong Array Object để tạo mảng trong JavaScript với cú pháp sau đây:

new Array( phần tử 1, phần tử 2, phần tử 3, ...)

Ví dụ, chúng ta có thể tạo cùng một mảng trong JavaScript với 2 cách sau đây:

let colors1 = ['red', 'orange'];
let colors2 = new Array ('red', 'orange');

Ngoài ra, chúng ta có thể chỉ độ dài của mảng khi tạo mảng trong JavaScript bằng Array() constructor với cú pháp như sau:

new Array(arrayLength)

Kết quả trả về sẽ là một mảng mới có độ dài bằng length đã chỉ định, nhưng không chứa phần tử trong đó. Ví dụ, chúng ta có thể kiểm tra chiều dài của mảng được tạo, cũng như xem có phần tử tại vị trí index bất kỳ trong mảng hay không như sau:

let empty_array = new Array(10);

//Kiểm tra chiều dài
console.log(empty_array.length);//> 10

//Kiểm tra phần tử tại index bất kỳ.
console.log(empty_array[3]); //> undefined

Có thể thấy giá trị undefined được trả về, chứng tỏ ở vị trí index đó không tồn tại phần tử.

Tổng kết

Trên đây Kiyoshi đã trình bày các cách khai báo và tạo mảng trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành với các ví dụ 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.