Sao chép nông và sâu

Thuộc phần Logic và luồng chương trình trong hành trình JavaScript của Coddy. Bài học 25 trên 65.

Khi sao chép đối tượng, ta có hai kiểu sao chép:

Sao chép nông: chỉ sao chép cấp đầu tiên
Sao chép sâu: sao chép tất cả các cấp lồng nhau

Các phương thức sao chép nông:

Dùng toán tử spread:

const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };

Dùng Object.assign() để tạo đối tượng mới bằng cách sao chép các thuộc tính từ đối tượng nguồn sang đối tượng đích:

const assignCopy = Object.assign({}, original);

Vấn đề với bản sao nông:

original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (các đối tượng lồng nhau dùng chung tham chiếu)

console.log(assignCopy.b.x); // 3

Tìm hiểu về phương thức JSON và sao chép sâu

JSON.stringify() chuyển đổi một đối tượng JavaScript thành chuỗi JSON:

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"

JSON.parse() chuyển một chuỗi JSON trở lại thành một đối tượng JavaScript:

const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }

Sao chép sâu bằng JSON:

const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.b.x = 3;
console.log(deepCopy.b.x); // 2 (hoàn toàn độc lập)

Thử thách

Dễ

Tạo một hàm có tên processCart nhận một chuỗi JSON đại diện cho giỏ hàng. Giỏ hàng chứa một mảng sản phẩm có tên và giá. Nhiệm vụ của bạn là:

Phân tích chuỗi JSON thành một đối tượng JavaScript
Tạo HAI giỏ hàng riêng biệt từ chuỗi đó
Trong giỏ hàng thứ hai:
1. Thêm thuộc tính discounted vào mỗi mặt hàng và đặt giá trị là false
2. Giảm giá 10% cho tất cả mặt hàng có price lớn hơn 50
3. Đặt 'discounted' thành true cho những mặt hàng được giảm giá
Trả về một mảng chứa cả hai giỏ hàng

Tự làm thử

function processCart(jsonString) {
    // Viết code ở đây
}
// Đừng viết gì bên ngoài hàm

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Logic và luồng chương trình

1Chuỗi chuyên sâu

Nền tảng về chuỗi Duyệt qua chuỗi Chuỗi mẫu Phương thức chuỗi Ôn tập: Người dệt chuỗi

4JSON phần 2

Duyệt qua JSON JSON lồng nhau Optional chaining trong JSONSao chép nông và sâuÔn tập: Cửa hàng xe đạp Ôn tập: Hệ Mặt Trời

7Hệ thống quản lý thư viện

Tổng quan dự án Thêm sách

Tìm kiếm theo tiêu đề

Lọc theo thể loại

Đánh dấu đã đọc

10Quản lý hệ thống lễ hội

Tổng quan dự án Thêm phim và địa điểm

Tự luyện tập: Trình biên dịch JavaScript online