Hướng dẫn deep copy object javascript - đối tượng sao chép sâu javascript

Nội dung bài viết

Video học lập trình mỗi ngày

Update object.assign() khi sử dụng copy object chính là shallow copy.

Object là thứ làm cho JavaScript trở thành một ngôn ngữ lập trình mạnh mẽ. Các đối tượng cho phép bạn nhóm các kiểu dữ liệu khác nhau. Nếu bạn muốn tìm hiểu bất kỳ khung JavaScript mới nào như React, Vue hoặc Angular, bạn phải biết cách sử dụng các đối tượng và các phương thức của nó.

Các phiên bản JavaScript mới mang lại các phương thức mới cho các đối tượng khiến chúng trở nên thú vị hơn. JS hiện tại cung cấp rất nhiều phương thức mới. Và trong bài này mình chỉ tìm hiểu và giới thiệu cho những bạn chưa biết về object.assign().JavaScript mới mang lại các phương thức mới cho các đối tượng khiến chúng trở nên thú vị hơn. JS hiện tại cung cấp rất nhiều phương thức mới. Và trong bài này mình chỉ tìm hiểu và giới thiệu cho những bạn chưa biết về object.assign().

object.assign() là một trong những method hiệu quả với những người code sâu về JS. Cho nên các bạn đang tìm hiểu về JS cũng nên tìm hiểu và áp dụng chúng trong những trường hợp sau... là một trong những method hiệu quả với những người code sâu về JS. Cho nên các bạn đang tìm hiểu về JS cũng nên tìm hiểu và áp dụng chúng trong những trường hợp sau...

Đọc thêm: Sự khác biệt giữa shallow copy và deep copying trong javascript khi sử dụng object.assign()Sự khác biệt giữa shallow copy và deep copying trong javascript khi sử dụng object.assign()

object.assign() là một method nhưng (multiple jobs) nó có nhiều nhiệm vụ trong đó bao gồm những nhiệm vụ copy an object, clone từ một object khác, và nối hai hay nhiều object lại với nhau. Giờ ta đi những ví dụ cụ thể hơn nhằm để hiểu rõ hơn

copy the values from another object:

const obj1 = {
name: 'Anony Stick'
}
const obj2 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
Object.assign(obj1, obj2);
console.log(obj1);
//{name: "Anony Stick", age: 25, car: "Vinfast", school: "VinSchool"}

Clone từ object khác

Tips: Deep copy object array function in javascript : Deep copy object array function in javascript 

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Dùng để merge duplicate properties trong object

Tips: Javascript object array - when to Use Array and use object in javascriptJavascript object array - when to Use Array and use object in javascript

 //merge duplicate properties with Object.assign()
const obj5 = {
name: 'Pham Nhat Vuong',
age: 55,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj6 = {
name: 'Pham Nhat Phong',
age: 25,
  moto: 'VinBike',
  spot: 'Bong da'  
}
const obj7 = Object.assign({}, obj5, obj6);
console.log(obj7);
//{name: "Pham Nhat Phong", age: 25, car: "Vinfast", school: "VinSchool", moto: "VinBike", …}

JavaScript Snippet

'use strict';

// Merge an object
let first = {name: 'Tony'};
let last = {lastName: 'Stark'};
let person = Object.assign(first, last);
ChromeSamples.log(person);
// {name: 'Tony', lastName: 'Stark'}
ChromeSamples.log(first);
// first = {name: 'Tony', lastName: 'Stark'} as the target also changed

// Merge multiple sources
let a = Object.assign({foo: 0}, {bar: 1}, {baz: 2});
ChromeSamples.log(a);
// {foo: 0, bar: 1, baz: 2}

// Merge and overwrite equal keys
let b = Object.assign({foo: 0}, {foo: 1}, {foo: 2});
ChromeSamples.log(b);
// {foo: 2}

// Clone an object
let obj = {person: 'Thor Odinson'};
let clone = Object.assign({}, obj);
ChromeSamples.log(clone);
// {person: 'Thor Odinson'}

Kết luận

Đọc thêm: Sự khác biệt giữa shallow copy và deep copying trong javascript khi sử dụng object.assign()Sự khác biệt giữa shallow copy và deep copying trong javascript khi sử dụng object.assign()

object.assign() là một method nhưng (multiple jobs) nó có nhiều nhiệm vụ trong đó bao gồm những nhiệm vụ copy an object, clone từ một object khác, và nối hai hay nhiều object lại với nhau. Giờ ta đi những ví dụ cụ thể hơn nhằm để hiểu rõ hơn

Nội dung bài viết

Video học lập trình mỗi ngày

Sau bài viết về "Sự khác nhau giữa Shallow copy và Deep copy javascript" thì có nhiều bạn đã hiểu hơn và có những bàn luận sâu sắc về chủ đề này. Và có nhiều bạn đã hỏi nếu dùng JSON.parse() thì sẽ bị miss những params như là NaN, function hay Symbol... Vậy có cách nào deep copy object, Array, Function Javascript một cách nhanh chóng và hiệu quả hay không? "Sự khác nhau giữa Shallow copy và Deep copy javascript" thì có nhiều bạn đã hiểu hơn và có những bàn luận sâu sắc về chủ đề này. Và có nhiều bạn đã hỏi nếu dùng JSON.parse() thì sẽ bị miss những params như là NaN, function hay Symbol... Vậy có cách nào deep copy object, Array, Function Javascript một cách nhanh chóng và hiệu quả hay không? 

Câu trả lời là có, chúng ta có nhiều phương pháp để có thể deep clone javascript một cách toàn vẹn, và bài viết này chúng ta sẽ đi tìm hiểu những giải pháp về vấn đề trên. Đầu tiên chúng ta nói lại một chút về bài đầu tiên (), đó là việc sử dụng JSON.parse()JSON.parse()

Deep copy object javascript using JSON.parse()

Hãy xem ví dụ dưới đây: 

Ví dụ 1 - deep copy json object javascript

const arr1 = [1, null, undefined, () => 2, {
    test: () => 3,
}, Symbol('4')]

Trên đó là một array mà ta khai báo, nhưng khi sử dụng JSON.parse() để deep clone thì sẽ miss or sẽ convert sang kiểu khác, hãy xem kết quả.JSON.parse() để deep clone thì sẽ miss or sẽ convert sang kiểu khác, hãy xem kết quả.

const arr1 = [1, null, undefined, () => 2, {
    test: () => 3,
}, Symbol('4')]

const cloneArr1 = JSON.parse(JSON.stringify(arr1))

console.log('>>Deep clone>>>', cloneArr1)

Hình kết qủa:

Kết qủa thật bất ngờ phải không? nhưng đối với những bạn đã đọc bài "Shallow copy object JSON.parse()" rồi thì sẽ không ngạc nhiên. Như vậy có cách nào deep clone một cách tốt nhất không? Yes, bắt đầu đọc tiếp để xem ... và hoàn toàn viết được mà không cần thư viên nào hết, nhưng."Shallow copy object JSON.parse()" rồi thì sẽ không ngạc nhiên. Như vậy có cách nào deep clone một cách tốt nhất không? Yes, bắt đầu đọc tiếp để xem ... và hoàn toàn viết được mà không cần thư viên nào hết, nhưng.

Trước hết chúng ta xem có thư viện nào giúp chúng ta được không? Ồ có, đó là lodash, một thư viện tuyệt vời và gần gũi.lodash, một thư viện tuyệt vời và gần gũi.

Deep clone array javascript using lodash

const lodashClonedeep = require("lodash.clonedeep");

const arrOfFunction = [() => 2, {
    test: () => 3,
}, Symbol('4')];

console.log(lodashClonedeep(arrOfFunction));

Và hãy xem kết quả:

console.log(lodashClonedeep(arrOfFunction)[0] === lodashClonedeep(arrOfFunction)[0]);
console.log(lodashClonedeep(arrOfFunction)[2] === lodashClonedeep(arrOfFunction)[2]);

how to use lodash in javascript, các bạn nào chưa biết thì trước hết tự tìm hiểu nha.

Thật tuyệt vời, nhưng có vẻ như một dev js chuyên nghiệp họ không làm vậy (performance hơn nhau là ở lập trình viên), vì một vấn đề này mà install một thư viện lớn như lodash hay một phần như trên cũng không nên. performance hơn nhau là ở lập trình viên), vì một vấn đề này mà install một thư viện lớn như lodash hay một phần như trên cũng không nên. 

Tips: 8 skills cần biết để cải thiện tốc độ web của lập trình viên8 skills cần biết để cải thiện tốc độ web của lập trình viên

Do vậy chúng ta sẽ đi cách tự làm vậy.

Deep copy array javascript Using Recursion

Việc dùng đệ quy trong lập trình thì không thể không nhắc tới vấn đề này, function Recursion có thể giúp chúng ta quá tốt trong việc deep clone trong javascript.

Tips: So sánh hiệu suất làm việc deep copy object javascript của JSON.parse và Recursion

Ví dụ 2 Cú pháp:

const clone = (items) => items.map(item => Array.isArray(item) ? clone(item) : item);

Sử dụng:

const clone = (items) => items.map(item => Array.isArray(item) ? clone(item) : item);

var nestedArray = [1, null, undefined, () => 2, {
    test: () => 3,
}, Symbol('4')]

var arrayCopy = clone(arr1)
//thay đổi giá trị ban đầu
arrayCopy[0] = '?'; // change shallow element
console.log(arrayCopy); 
console.log(nestedArray);

Kết quả: bạn hãy xem kết quả dưới đây, điều đó cho ta thấy sử dụng phướng pháp đệ quy cũng có thể giúp chúng ta deep clone object array javascript

Còn bây giờ, phần này là tôi sẽ hướng dẫn cho các bạn tự code và co thể còn ngon hơn các phương pháp trên kia

Tips:9 mẹo hữu ích - giúp cải thiện code của developer javascript9 mẹo hữu ích - giúp cải thiện code của developer javascript

Đầu tiên chúng ta tạo ra một function check type args truyền vào để return ra object hay array hay một function

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Tiếp theo những function sau đây sẽ giúp chúng ta deep clone javascript theo từng loại mà function đầu tiên đã làm

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Cách sử dụng :

Ví dụ : cho trước một object

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Sử dụng function deepCopy

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Deep clone object javascript

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Deep clone array javascript

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign({}, obj3);
console.log(obj4);
//{age: 25, car: "Vinfast", school: "VinSchool"}

Như vậy kết thúc bài viết này, chúng ta đã đi qua nhiều phương pháp để deep clone object, array trong javascript một cách toàn vẹn hơn khi sử dụng JSON.parse(). Mỗi dev js chúng ta cũng nên tự trang bị một bí kíp cho mình để phòng thân lỡ khi gặp những trường hợp này. Tôi biết sẽ có nhiều phương pháp hay hơn nữa, mong các bạn đóng góp thêm cho cộng động javascript chúng ta một cách hoàn hảo hơn.

Check code tại: jsfiddle.net tại: jsfiddle.net

Cảm ơn các bạn đọc, nhớ share nếu các bạn cảm thấy nó có ích cho việc lập trình.

Tham khảo thêm:How to Deep Clone an Array in JavaScript - dev.to
How to Deep Clone an Array in JavaScript - dev.to