4 CÁCH CLONE OBJECT TRONG JAVASCRIPT

Trong quá trình phát triển, sẽ có lúc chúng ta cần clone object JavaScript bằng cách gắn nó vào một biến khác. Ví dụ như dưới đây:

const obj_1 = {
username: "chamdev.com"
};

const obj_2 = obj_1;

obj_1.age = 10;

console.log("obj_2", obj_2); // {username: "chamdev.com", age: 10}

Tuy nhiên, chúng ta không thể thực hiện lệnh clone object như vậy được, bởi Object là một loại reference types. Khi thực hiện như trên nghĩa là ta đang lấy giá trị và cả địa chỉ ô nhớ của nó trên memory.

Vậy thì làm thế nào để có thể thực hiện clone các giá trị object một cách chính xác? Hãy cùng tìm hiểu 4 cách clone object trong JavaScript trong bài viết này.

4 cách clone object trong JavaScript

Chúng ta sẽ có 4 cách chính để clone một Object đó là:

• Sử dụng Spread,
• Sử dụng Object.assign(),
• Phương thức JSON,
• Sử dụng thư viện bên thứ 3 – Lodash

4 cách clone này được chia làm 2 nhóm chính: Shallow Copy và Deep Clone. Trên thực tế, chúng ta sẽ chủ yếu sử dụng nhóm Shallow Copy.

Bây giờ, hãy cùng đi vào chi tiết 4 cách clone object trong JavaScript nhé.

1. Sử dụng Spread (nhóm Shallow Copy)

Spread là một tính năng rất mạnh mẽ trong ES6 (Một phiên bản của JavaScript được ra mắt vào năm 2015). Đây là một cách clone Object rất tiện lợi và được đông đảo lập trình viên sử dụng.

const obj_1 = {
username: "chamdev.com",
getUsername() {
return this.username;
}
};

const obj_2 = {...obj_1};

obj_1.age = 10;

console.log("obj_2", obj_2); // {username: "chamdev.com", getUsername: ƒ}

Dù được yêu thích và sử dụng rộng rãi, phương thức này vẫn tồn tại những hạn chế của nó. Hãy cùng theo dõi ví dụ tiếp theo:

const obj_1 = {
username: "chamdev.com",
info: {
address: "https://chamdev.com"
}
};

const obj_2 = {...obj_1 };

obj_1.age = 10;
obj_1.info.address = "Not found";

console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "Not found"}}

Như chúng ta có thể thấy, phương thức này sẽ không thể thực hiện được deep clone. Hy vọng chúng ta sẽ có những bản cập nhật mới, khắc phục được khuyết điểm này trong tương lai.

2. Sử dụng Object.assign() (nhóm Shallow Copy)

Đây được cho là cách xử lý clone object thông dụng của các thư viện và framework. Chúng ta hãy cùng xem một ví dụ dưới đây:

const obj_1 = {
username: "chamdev.com",
info: {
address: "https://chamdev.com"
},
getUsername() {
return this.username;
}
};

const obj_2 = Object.assign({}, obj_1);

obj_1.age = 10;

console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}, getUsername: ƒ}

Phương thức này cũng cho kết quả clone object nhanh chóng tương tự như cách sử dụng Spread. Tiếp theo, hãy cùng sử dụng cách clone object này để thực hiện deep clone:

const obj_1 = {
username: "chamdev.com",
info: {
address: "https://chamdev.com"
},
getUsername() {
return this.username;
}
};

const obj_2 = Object.assign({}, obj_1);

obj_1.age = 10;
obj_1.info.address = "Not found";

console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "Not found"}, getUsername: ƒ}

Vẫn như phương thức sử dụng Spread, sử dụng Object.assign() cũng không thể thực hiện deep clone được.

Trơng trường hợp này, chúng ta hãy tham khảo hai phương thức tiếp theo.

3. Sử dụng phương thức JSON (nhóm Deep Clone)

Khi sử dụng phương thức JSON để clone object JavaScript, chúng ta sẽ dùng 2 phương thức là parse() và stringify().

parse() được sử dụng khi ta muốn biến một String có format là json thành Object.

stringify() được sử dụng khi ta muốn chuyển một Object sang dạng JSON string.

Hiểu đơn giản, khi sử dụng phương thức này, đầu tiên nó sẽ biến Object thành JSON, sau đó parse sẽ biến đổi lại thành Object. Hãy cùng quan sát ví dụ bên dưới:

const obj_1 = {
username: "chamdev.com",
info: {
address: "https://chamdev.com"
},
getUsername() {
return this.username;
}
};

const obj_2 = JSON.parse(JSON.stringify(obj_1));

obj_1.age = 10;

console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}}

Phương thức này vẫn cho kết quả clone rất tốt. Tuy nhiên nó lại không clone method được. Tiếp theo, hãy cùng xem nó có thực hiện deep clone được hay không.

const obj_1 = {
username: "chamdev.com",
info: {
address: "https://chamdev.com"
}
};

const obj_2 = JSON.parse(JSON.stringify(obj_1));

obj_1.age = 10;
obj_1.info.address = "Not found";

console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}}

Vậy là với phương thức clone object JavaScript sử dụng phương thức JSON, chúng ta có thể thực hiện deep clone, tuy nhiên lại không thể clone method.

Trong trường hợp này, chúng ta có thể sử dụng các thư viện như Lodash, nó có những phương thức clone tích hợp sẵn để chúng ta có thể dễ dàng sử dụng.

4. Sử dụng thư viện bên thứ 3 – Lodash (nhóm Deep Clone)

Deep Clone và Shallow Copy lần lượt là ví dụ bên dưới.

const _ = require("lodash");

const obj_1 = {
username: "chamdev.com",
info: {
address: "https://chamdev.com"
},
getUsername() {
return this.username;
}
};

const obj_2 = _.cloneDeep(obj_1);
const obj_3 = _.clone(obj_1);

obj_1.age = 10;
obj_1.info.address = "Not found";

console.log("obj_2", obj_2); // {username: "chamdev.com", info: {address: "https://chamdev.com"}, getUsername: ƒ}
console.log("obj_3", obj_3); // {username: "chamdev.com", info: {address: "Not found"}, getUsername: ƒ}

Việc sử dụng thư viện sẽ giúp tiết kiệm thời gian và số lượng code phải viết, tuy nhiên có một số trường hợp cũng gặp khó khăn khi bị lệ thuộc quá vào thư viện. Hãy cân nhắc để lựa chọn cách xử lý phù hợp với sản phẩm của mình nhé

Kết luận

Như vậy, chúng ta đã đi qua 4 cách clone object trong JavaScript. Chỉ là một thao tác tưởng chừng đơn giản thôi nhưng cũng có rất nhiều cách xử lý khác nhau. Trên thực tế, có không ít trường hợp clone object nhưng code chạy không như ý muốn, khiến các dev rất vất vả để xử lý và debug.

Hy vọng các bạn đã có những góc nhìn mới về các cách clone object trong JavaScript. Trên đây là 4 cách clone object nhanh và thông dụng nhất mà CO-WELL đã tổng hợp lại. Còn bạn thì sao? Bạn có biết những cách clone object trong JavaScript nào nữa không?

Tham khảo
Bài viết có tham khảo thông tin từ
# 3 Ways to Clone Objects in JavaScript
# How to deep clone a JavaScript object

Nguyễn Xuân Sơn – CO-WELL Asia

Xem thêm các bài viết khác của CO-WELL Asia tại đây