Loạt bài JavaScript cơ bản · Bài 10/18 — Mục lục học tập

Mảng lưu một danh sách có thứ tự, chẳng hạn tên bài học hoặc điểm kiểm tra. Thay vì khai báo lesson1, lesson2, lesson3, bạn gom chúng thành một mảng và xử lý bằng vòng lặp.

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

const lessons = ["Biến", "Điều kiện", "Hàm"];
console.log(lessons[0]); // Biến
console.log(lessons[2]); // Hàm
console.log(lessons.length); // 3
console.log(lessons[3]); // undefined

length là số phần tử; chỉ số cuối của mảng không rỗng là length – 1. Truy cập ngoài phạm vi thường trả undefined, không báo lỗi ngay. Vì thế lỗi ranh giới có thể xuất hiện ở bước sau khi bạn gọi phương thức trên giá trị undefined.

Thay đổi nội dung mảng

const lessons = ["HTML", "CSS"];
lessons.push("JavaScript"); // thêm cuối
lessons[0] = "HTML cơ bản";
const removed = lessons.pop(); // lấy và xóa cuối
console.log(lessons); // ["HTML cơ bản", "CSS"]
console.log(removed); // JavaScript

push và pop thay đổi mảng hiện tại. shift xóa phần tử đầu, unshift thêm phần tử đầu. Với splice, bạn có thể xóa theo vị trí; slice tạo một mảng cắt ra mà không xóa phần tử gốc. Đừng nhầm hai tên phương thức này.

const numbers = [10, 20, 30, 40];
const middle = numbers.slice(1, 3);
console.log(middle); // [20, 30]
console.log(numbers); // [10, 20, 30, 40]
numbers.splice(1, 1);
console.log(numbers); // [10, 30, 40]

Duyệt theo vị trí hoặc theo giá trị

const scores = [8, 6, 9];
let total = 0;
for (const score of scores) {
  total += score;
}
console.log(total); // 23
for (let i = 0; i < scores.length; i++) {
  console.log("Bài", i + 1, "được", scores[i]);
}

for…of phù hợp khi chỉ cần giá trị. for thông thường hữu ích nếu cần chỉ số. Không dùng for…in để duyệt giá trị của mảng: cú pháp đó duyệt tên thuộc tính và có thể không phù hợp với ý định của bạn.

Sao chép và dùng chung mảng

const original = [1, 2];
const sameArray = original;
sameArray.push(3);
console.log(original); // [1, 2, 3]
const copy = [...original];
copy.push(4);
console.log(original); // vẫn [1, 2, 3]

Gán mảng cho biến khác không tự sao chép nội dung. Spread tạo bản sao nông; nếu phần tử là đối tượng lồng nhau, các đối tượng con vẫn có thể được dùng chung. Với mảng số hoặc chuỗi của bài này, bản sao nông là đủ.

Bài tập và gợi ý

Cho mảng [5, 8, 4, 9]. Đếm số điểm đạt từ 5 trở lên; thử thêm mảng rỗng.

const scores = [5, 8, 4, 9];
let passedCount = 0;
for (const score of scores) {
  if (score >= 5) passedCount++;
}
console.log(passedCount); // 3

Ghi nhớ: kiểm tra ranh giới, phân biệt phương thức sửa mảng gốc với phương thức tạo dữ liệu mới và cân nhắc trường hợp danh sách rỗng.