Bài 5. Mảng và đối tượng

Mảng lưu danh sách, đối tượng lưu dữ liệu có cấu trúc. Hai kiểu này xuất hiện ở mọi ứng dụng JavaScript.

40 phútCơ bản
Bạn sẽ học được
  • Thao tác mảng: thêm, xóa, tìm
  • Dùng map, filter, reduce
  • Tạo và truy cập đối tượng
  • Dùng destructuring và JSON
Thuật ngữ cần biết
Mảng (array)
Danh sách có thứ tự, chỉ số từ 0.
Đối tượng (object)
Tập các cặp thuộc tính: giá trị.
Destructuring
Tách giá trị ra biến nhanh: const {ten} = sv.
JSON
Định dạng văn bản mô tả dữ liệu, dùng trao đổi giữa web và máy chủ.

Mảng

const ds = ["táo", "cam"];
ds.push("xoài");       // thêm cuối
ds.unshift("nho");     // thêm đầu
ds.pop();              // bỏ cuối
console.log(ds.length, ds.includes("cam"), ds.indexOf("cam"));

map, filter, reduce

const gia = [120, 340, 90, 560];
const giamGia = gia.map(g => g * 0.9);
const reRe = gia.filter(g => g < 200);
const tong = gia.reduce((s, g) => s + g, 0);
const dauTien = gia.find(g => g > 300);
console.log(giamGia, reRe, tong, dauTien);

map biến đổi từng phần tử, filter giữ phần tử thỏa điều kiện, reduce gộp thành một giá trị.

Đối tượng

const sv = { ten: "Lan", tuoi: 20, diem: [8, 9] };
console.log(sv.ten, sv["tuoi"]);
sv.lop = "K66";
delete sv.tuoi;
const { ten, diem } = sv;
for (const k in sv) console.log(k, sv[k]);

JSON

const chuoi = JSON.stringify({ a: 1, b: [2, 3] });
const obj = JSON.parse(chuoi);
console.log(chuoi, obj.b[1]);
Tình huống: Giỏ hàng

Giỏ hàng là mảng đối tượng; tính tổng tiền bằng reduce:

const gio = [
  { ten: "Áo", gia: 200000, sl: 2 },
  { ten: "Mũ", gia: 80000, sl: 1 }
];
const tong = gio.reduce((s, m) => s + m.gia * m.sl, 0);
console.log(tong); // 480000
Mẹo hay

Sao chép đối tượng: {...goc}. Sao chép sâu: structuredClone(goc).

Lưu ý

Gán b = a cho mảng/đối tượng chỉ chia sẻ cùng một vùng dữ liệu; sửa b là sửa luôn a.

Thực hành
  1. Cho mảng điểm, tính trung bình và điểm cao nhất.
  2. Lọc sản phẩm có giá dưới 100k và sắp xếp tăng dần.
  3. Chuyển mảng đối tượng sinh viên thành chuỗi JSON.
Tóm tắt bài học
  • Mảng: push, pop, includes, map, filter, reduce.
  • Đối tượng: truy cập bằng dấu chấm hoặc ngoặc vuông.
  • JSON.stringify và JSON.parse chuyển đổi qua lại.