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.
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); // 480000Mẹ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
- Cho mảng điểm, tính trung bình và điểm cao nhất.
- Lọc sản phẩm có giá dưới 100k và sắp xếp tăng dần.
- 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.