Mảng trong JavaScript: tạo, truy cập, sửa đổi và duyệt mảng

Mảng là một danh sách có thứ tự

Mảng (array) trong JavaScript chứa một dãy giá trị có thứ tự. Các giá trị có thể thuộc bất kỳ kiểu nào, như số, chuỗi, đối tượng, thậm chí là mảng khác, và không nhất thiết phải cùng kiểu. Bạn tạo mảng bằng dấu ngoặc vuông:

const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "two", true, null, { id: 3 }];
const empty = [];

console.log(fruits);
console.log(mixed);
console.log(empty);

Cú pháp literal đó là cách bạn sẽ tạo mảng trong 99% trường hợp. Ngoài ra còn có new Array(...), nhưng nó có một điểm dễ vấp: new Array(3) tạo ra một mảng có độ dài 3 không chứa phần tử thật nào, chứ không phải [3]. Cứ dùng [] là được.

Chỉ số bắt đầu từ 0

Bạn truy cập phần tử theo vị trí, bắt đầu từ 0:

const colors = ["red", "green", "blue"];

console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
console.log(colors[99]);

Có hai điều cần lưu ý. Thứ nhất, truy cập vượt quá cuối mảng không gây lỗi mà trả về undefined. Đây là nguồn gốc quen thuộc của những bug kiểu "sao cái này lại undefined?". Thứ hai, bạn có thể gán giá trị vào bất kỳ chỉ số nào, kể cả chỉ số vượt quá cuối mảng, và JavaScript sẽ vui vẻ nới rộng mảng:

const colors = ["red", "green", "blue"];
colors[5] = "purple";

console.log(colors);
console.log(colors.length);

Vị trí 3 và 4 trở thành "ô trống" (lỗ hổng trong mảng thưa). Độ dài nhảy lên 6. Hiếm khi bạn muốn điều này: đó là tác dụng phụ của việc mảng quá linh hoạt, không phải tính năng để dựa vào.

length luôn được cập nhật

array.length luôn lớn hơn chỉ số cao nhất đúng một đơn vị. Nó tự động cập nhật khi bạn thêm hoặc xóa phần tử:

const nums = [10, 20, 30];
console.log(nums.length);

nums.push(40);
console.log(nums.length);

nums.length = 2;
console.log(nums);

Mẹo cuối cùng đáng ghi nhớ: gán giá trị cho length sẽ cắt ngắn mảng. Đặt nums.length = 0 là cách nhanh để làm rỗng mảng ngay tại chỗ.

push, pop, shift, unshift

Bốn phương thức để thêm và xóa ở hai đầu mảng:

const stack = [];

stack.push("a");
stack.push("b");
stack.push("c");
console.log(stack);

const last = stack.pop();
console.log(last, stack);

stack.unshift("start");
console.log(stack);

const first = stack.shift();
console.log(first, stack);

• push(x) thêm vào cuối, trả về độ dài mới.
• pop() xóa ở cuối, trả về phần tử vừa xóa.
• unshift(x) thêm vào đầu.
• shift() xóa ở đầu.

push/pop chạy nhanh. shift/unshift phải đánh lại chỉ số cho mọi phần tử còn lại, nên chậm hơn với mảng lớn: không sao với kích thước thường ngày, nhưng đáng biết nếu bạn làm việc với hàng triệu phần tử.

slice và splice

Hai phương thức này có tên na ná nhau nhưng hoạt động hoàn toàn khác nhau. Phân biệt rõ chúng, bạn sẽ đỡ được rất nhiều lần vò đầu bứt tai.

slice(start, end) trả về một bản sao của một phần mảng. Mảng gốc không bị đụng đến. end không được tính vào:

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
console.log(middle);
console.log(letters);

splice(start, deleteCount, ...items) sửa đổi mảng. Nó có thể xóa, chèn, hoặc cả hai, và trả về những gì nó đã xóa:

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2);
console.log(removed);
console.log(letters);

letters.splice(1, 0, "x", "y");
console.log(letters);

Mẹo nhớ: nếu từ đó khiến bạn nghĩ đến việc cắt một lát bánh mì ra (lấy bản sao), đó là slice. Nếu nó khiến bạn nghĩ đến việc nối phim (cắt rồi chèn), đó là splice.

Tìm kiếm: indexOf, includes, find

Ba cách để tra cứu, cho các tình huống khác nhau:

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.indexOf("banana"));
console.log(fruits.indexOf("grape"));

console.log(fruits.includes("cherry"));
console.log(fruits.includes("grape"));

const users = [{ id: 1, name: "Ada" }, { id: 2, name: "Boris" }];
const boris = users.find(u => u.id === 2);
console.log(boris);

• indexOf(x) cho bạn vị trí, hoặc -1 nếu không tìm thấy. Hữu ích khi bạn cần chỉ số.
• includes(x) cho bạn một giá trị boolean. Gọn hơn khi bạn chỉ muốn biết "giá trị này có trong mảng không?". Nó còn xử lý đúng NaN, điều mà indexOf không làm được.
• find(predicate) chạy một hàm cho từng phần tử và trả về phần tử đầu tiên khớp. Đây là lựa chọn cho mảng chứa đối tượng, nơi indexOf và includes chỉ so sánh bằng nghiêm ngặt.

Duyệt qua mảng

Có vài cách tốt, mỗi cách hợp với một tình huống:

const scores = [82, 91, 73, 88];

for (const score of scores) {
    console.log(score);
}

scores.forEach((score, i) => {
    console.log(i, score);
});

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

for...of là lựa chọn mặc định: dễ đọc, dùng được với mọi iterable, cho bạn giá trị trực tiếp. forEach ổn khi bạn cần cả chỉ số và không thoát vòng lặp sớm (bạn không thể dùng break để thoát khỏi forEach). Vòng lặp for cổ điển với chỉ số thì dài dòng nhưng cho bạn toàn quyền kiểm soát: dùng nó khi bạn cần bỏ qua phần tử, duyệt ngược, hoặc cả hai.

Một kiểu vòng lặp nên tránh: for...in. Nó duyệt qua các khóa và tính cả thuộc tính được kế thừa. Nó dành cho đối tượng, không phải mảng.

Sao chép và kết hợp mảng

Mảng là giá trị tham chiếu. Gán một mảng cho biến khác không tạo bản sao, mà chỉ tạo thêm một cái tên cho cùng một mảng:

const a = [1, 2, 3];
const b = a;
b.push(4);

console.log(a);
console.log(b);

Để thật sự sao chép, hãy dùng toán tử spread hoặc slice():

const a = [1, 2, 3];
const b = [...a];
const c = a.slice();

b.push(4);
c.push(5);

console.log(a);
console.log(b);
console.log(c);

Cả hai đều cho bạn một bản sao nông: mảng ngoài cùng là mới, nhưng nếu các phần tử là đối tượng thì những đối tượng đó vẫn được dùng chung. Spread cũng là cách gọn nhất để ghép các mảng:

const front = [1, 2];
const back = [3, 4];
const all = [...front, 99, ...back];

console.log(all);

Mảng chứa đối tượng

Trong code thực tế, phần lớn mảng chứa đối tượng. Các phương thức vẫn như cũ, nhưng việc so khớp trở nên thú vị hơn:

const users = [
    { id: 1, name: "Ada", active: true },
    { id: 2, name: "Boris", active: false },
    { id: 3, name: "Chen", active: true },
];

const activeNames = users
    .filter(u => u.active)
    .map(u => u.name);

console.log(activeNames);

filter trả về một mảng mới gồm các phần tử khớp với vị từ. map trả về một mảng mới trong đó mỗi phần tử đã được biến đổi. Nối chuỗi hai phương thức này là việc cơm bữa khi làm việc với mảng đối tượng, và trang tài liệu tiếp theo sẽ đi sâu hơn vào nhóm phương thức đó.

Mảng và đối tượng

Một mô hình tư duy nhanh: dùng mảng khi thứ tự quan trọng và bạn đang làm việc với một danh sách các thứ cùng loại. Dùng đối tượng (hoặc Map) khi bạn đặt khóa cho các thứ theo tên. "Thứ nhất, thứ hai, thứ ba" là địa bàn của mảng. "Tìm người dùng có id 42" là địa bàn của đối tượng hoặc Map.

Bạn có thể kết hợp chúng, mảng chứa đối tượng có mặt ở khắp nơi, nhưng đừng dùng mảng như một từ điển có khóa, và đừng dùng đối tượng như một danh sách có thứ tự. Mỗi thứ làm tốt một việc.

Tiếp theo: destructuring

Việc lấy giá trị ra khỏi mảng theo chỉ số (và lấy thuộc tính ra khỏi đối tượng theo tên) phổ biến đến mức JavaScript có hẳn một cú pháp riêng cho nó. Đó là destructuring, nội dung của trang tiếp theo.