3 cách để Clone Objects trong JavaScript

const food = { corn: '🌽', bacon: '🥓' };

const cloneFood = { ...food };

console.log(cloneFood); 
// { corn: '🌽', bacon: '🥓' }

Sử dụng Spread sẽ giúp ta clone Obj. Lưu ý khi sử dụng nó bạn có thể cần phải compile cùng với Babel

const food = { corn: '🌽', bacon: '🥓' };

const cloneFood = Object.assign({}, food);

console.log(cloneFood);
// { corn: '🌽', bacon: '🥓' }

Ngoài IE huyền thoại thì Object.assign support hầu như đầy đủ, Object.assign nằm trong bản phát hành chính thức và ta có thể dùng nó để clone 1 Obj nhanh chóng. Xem thêm về Object.assign()

const food = { corn: '🌽', bacon: '🥓' };

const cloneFood = JSON.parse(JSON.stringify(food))

console.log(cloneFood); 
// { corn: '🌽', bacon: '🥓' }

Shallow Clone vs Deep Clone

Một sự so sánh nhẹ giữa clone "nông" và clone "sâu". Cùng quan sát ví dụ sau

const nestedObject = {
  country: '🇨🇦',
  detail: {
    city: 'vancouver'
  }
};

const shallowClone = { ...nestedObject };
// Changed our cloned object
shallowClone.country = '🇹🇼'
shallowClone.detail.city = 'taipei';

console.log(shallowClone);
// {country: '🇹🇼', detail: {city: 'taipei'}} <-- ✅

console.log(nestedObject);
// {country: '🇨🇦', detail: {city: 'taipei'}} <-- 😱

Clone "nông" có nghĩa ta chỉ clone được level đầu, các level sâu hơn sẽ được hiểu là tham chiếu. Và khi sử dụng cách 3

const deepClone = JSON.parse(JSON.stringify(nestedObject));

console.log(deepClone);
// {country: '🇹🇼', detail: {city: 'taipei'}} <-- ✅

console.log(nestedObject);
// {country: '🇨🇦', detail: {city: 'vancouver'}} <-- ✅

Object.assign vs Spread

Object.assign là một hàm sửa đổi và trả về đối tượng đích. Khi sử dụng

const cloneFood = Object.assign({}, food);

{} được hiểu là đối tượng được sửa đổi, đối tượng đích không được tham chiếu bởi bất kỳ biến nào tại thời điểm đó, nhưng vì Object.assign trả về đối tượng đích, chúng ta có thể lưu trữ đối tượng được gán kết quả vào biến cloneFood

const food = { corn: '🌽', bacon: '🥓' };

Object.assign(food, { corn: '🌽🌽' });

console.log(food);
// { corn: '🌽🌽', bacon: '🥓' }

Rõ ràng giá trị của corn trong đối tượng food là sai, vì vậy ta có thể gán giá trị chính xác cho corn bằng Object.assign. Chúng ta thực sự không sử dụng giá trị trả về của hàm, nhưng chúng ta đang sửa đổi đối tượng mục tiêu mà chúng ta đã tham chiếu với đối tượng food.

Spread là một cách sao chép các thuộc tính của một đối tượng thành một đối tượng mới

const food = { corn: '🌽', bacon: '🥓' };

food = {
  ...food,
  corn: '🌽🌽',
}
// TypeError: invalid assignment to const `food'

... gây ra lỗi, vì chúng ta sử dụng Spread tạo đối tượng mới và do đó đang gán một đối tượng hoàn toàn mới cho food được khai báo với hằng số const là sai. Giải pháp là tạo ra 1 biến mới để lưu đối tượng

const food = { corn: '🌽', bacon: '🥓' };

const newFood = {
  ...food,
  corn: '🌽🌽',
}

console.log(newFood);
// { corn: '🌽🌽', bacon: '🥓' }

hoặc có thể dùng let, var cho phép chúng ta gán một đối tượng hoàn toàn mới

let food = { corn: '🌽', bacon: '🥓' };

newFood = {
  ...food,
  corn: '🌽🌽',
}

console.log(newFood);
// { corn: '🌽🌽', bacon: '🥓' }

Kết luận

Trên đây mình đã giới thiệu tới các bạn '3 cách để Clone Objects trong JavaScript', hi vọng sẽ giúp ích cho các bạn khi làm việc với Object trong JavaScript

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !

Bài viết này được dịch, chỉnh sửa dựa trên 3 Ways to Clone Objects in JavaScript

Nguồn: Viblo