Hãy tạo cho mình danh sách trái cây. Chúng ta gọi danh sách "fruit", thêm các giá trị: Chuối, dưa hấu, nho. Ôi, tôi yêu trái cây! Mặc dù nghe giống hướng dẫn danh sách mua sắm, chúng ta thực sự vừa tạo một mảng.
Trong hướng dẫn này, chúng ta sẽ đi qua mảng là gì, cách hoạt động, và tại sao nên dùng trong mã. Chúng ta sẽ thảo luận vài ví dụ mảng hoạt động để bạn thành ninja mảng JavaScript!
Mảng Là Gì?
Mảng là đối tượng lưu trữ dữ liệu. Mảng chứa tập hợp các mục có thứ tự, và có thể lưu không hoặc nhiều mục. Mảng hữu ích trong lập trình vì cho phép lưu các giá trị tương tự trong một biến.
Bạn không phải viết mười biến đơn lẻ liệt kê trái cây yêu thích. Với mảng, bạn có thể thêm tất cả trái cây yêu thích vào một biến.
Xem ví dụ:
let fruits = [ "Banana", "Grapes", "Melon" ];
Ở đây tạo mảng gọi "fruits". Nó lưu ba giá trị khác nhau, mỗi giá trị phản ánh trái cây muốn mua ở cửa hàng. Để khai báo mảng, bao quanh danh sách mục trong ngoặc vuông.
Khai Báo Mảng
Có hai cách khai báo mảng. Cách hầu hết mọi người dùng là bao quanh danh sách mục với ngoặc vuông, như trước:
let berries = [ "Strawberry", "Blueberry", "Gooseberry" ];
Khai báo mảng ba giá trị. Cũng có thể dùng hàm tạo mảng (array constructor), dùng từ khóa new khai báo mảng:
let berries = new Array( "Strawberry", "Blueberry", "Gooseberry" );
Các đoạn mã tạo cùng mảng, nhưng cách khác nhau. Lưu ý ví dụ thứ hai dùng ngoặc tròn khai báo mảng. Cũng phải dùng hàm tạo new Array khai báo mảng. Đó là lý do hầu hết mọi người thích cách đầu; ngoặc vuông dễ nhớ và gõ nhanh hơn.
Mảng không nhất thiết chứa cùng kiểu dữ liệu. Mảng có thể lưu bất kỳ số lượng kiểu dữ liệu khác nhau:
let berries = [ "Strawberry", 1.50, true ];
Mảng này lưu ba kiểu dữ liệu khác nhau: chuỗi, số, và boolean. Bây giờ bạn quen với cách khai báo mảng, đã sẵn sàng truy xuất nội dung.
Đọc Mảng
Mảng không hữu ích nếu không đọc giá trị. Đó là lý do chỉ mục (indexing) tồn tại. Chỉ mục là cách truy xuất mục riêng lẻ trong đối tượng lặp lại, như danh sách.
Mỗi phần tử mảng được gán số chỉ mục riêng. Các số bắt đầu từ 0, dùng để truy xuất mục riêng lẻ. Nhớ mảng "fruits"?
let fruits = [ "Banana", "Grapes", "Melon" ];
Giá trị chỉ mục gán cho mảng này:
- 0: Banana
- 1: Grapes
- 2: Melon
Dùng các số này, truy xuất mục riêng lẻ. Giả sử muốn xác định trái cây ở vị trí chỉ mục 1. Có thể làm bằng cách chỉ định giá trị chỉ mục trong ngoặc vuông sau tên mảng:
fruits[1];
Mã trả về: Grapes. Chúng ta tham chiếu vị trí chỉ mục 1, lưu giá trị "Grapes". Nếu truyền giá trị 0, "Banana" trả về. Nếu truy cập mục không tồn tại, "undefined" trả về:
fruits[10];
Đầu ra: undefined. Chỉ mục đặc biệt hữu ích khi muốn lặp qua các mục trong mảng. Giả sử muốn in mọi trái cây trong mảng ra bảng điều khiển. Có thể dùng vòng lặp for:
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Mã trả về:
Banana Grapes Melon
Mã lặp qua mọi mục trong danh sách, in mỗi mục ra bảng điều khiển. Bạn cũng nhận thấy dùng thuộc tính length. Thuộc tính này trả về độ dài danh sách.
Thêm Mục Vào Mảng
Đa số thời gian, bạn muốn thêm giá trị mới vào mảng sau khi khai báo ban đầu. Có thể làm bằng phương thức push() của mảng.
Chúng ta quên thêm "Strawberry" vào danh sách trái cây. Ôi không! Đừng lo, luôn có thể thêm bằng phương thức push():
let fruits = [ "Banana", "Grapes", "Melon" ];
fruits.push("Strawberry");
console.log(fruits);
Bây giờ mảng trông như sau:
| Banana | Grapes | Melon | Strawberry |
| 0 | 1 | 2 | 3 |
Bạn có thể thêm dữ liệu vào đầu mảng dùng unshift(). Dâu tây quan trọng nên muốn xuất hiện đầu tiên:
let fruits = [ "Banana", "Grapes", "Melon" ];
fruits.unshift("Strawberry");
console.log(fruits);
Điều này làm danh sách "fruits" gốc xuất hiện như sau:
| Strawberry | Banana | Grapes | Melon |
| 0 | 1 | 2 | 3 |
Xóa Mục Khỏi Mảng
Rốt cục chúng ta đã có dưa hấu ở nhà, nên không cần mua. Vì dưa hấu ở cuối danh sách, có hai tùy chọn xóa:
splice(): Xóa phần tử theo số chỉ mục.pop(): Xóa phần tử từ cuối mảng.
Hãy dùng splice() làm ví dụ:
let fruits = [ "Banana", "Grapes", "Melon" ]; fruits.splice(3, 1); console.log(fruits);
Mã trả về:
Strawberry Banana Grapes
splice() chấp nhận hai tham số. Thứ nhất là số chỉ mục bị xóa từ mảng, thứ hai là số lượng mục xóa. Trong trường hợp này, muốn xóa mục chỉ mục 3, nên chỉ định "3, 1" làm tham số.
pop() không chấp nhận tham số. Chỉ xóa mục cuối danh sách:
let fruits = [ "Banana", "Grapes", "Melon" ]; fruits.pop(); console.log(fruits);
Mã trả về:
Banana Grapes
Bạn cũng dùng shift() xóa mục từ đầu danh sách:
let fruits = [ "Banana", "Grapes", "Melon" ]; fruits.shift(); console.log(fruits);
Mã trả về:
Grapes Melon
push() và unshift() thêm mục vào danh sách. pop() và shift() xóa mục khỏi danh sách. Phương thức splice cũng dùng để xóa mục từ danh sách dựa trên giá trị chỉ mục.
Thay Đổi Mục Trong Mảng
Mặc dù chuối là trái cây ngon, thường to lớn nên không ăn một quả làm đồ ăn vặt khi hơi đói. Chuối con dễ ăn hơn.
Bây giờ, giả sử muốn thay danh sách "fruits" để mua chuối con thay vì chuối thường. Có thể làm bằng toán tử gán như với bất kỳ biến nào:
fruits[0] = "Baby bananas"; console.log(fruits);
Mã trả về:
Baby bananas Grapes Melon
Chúng ta sửa mục vị trí chỉ mục 0 lưu giá trị "Baby bananas". Không cần phương thức đặc biệt; toán tử gán dùng để thay đổi giá trị trong mảng.
Kết Luận
Đó là cơ bản những gì cần biết về mảng JavaScript. Còn nhiều hơn để học, nhưng đó là điều làm lập trình thú vị: luôn có thử thách mới. Nếu không gì, bạn đã học về trái cây yêu thích của tôi. Mặc dù tôi nói là tôi yêu quả mận đen (blackcurrants), mà không nhắc trong hướng dẫn.
Bây giờ bạn đã sẵn sàng bắt đầu làm việc với mảng JavaScript như chuyên gia!