Hướng dẫn deep copy javascript - javascript sao chép sâu
Nội dung bài viết 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() Hãy xem ví dụ dưới đây: Ví dụ 1 - deep copy json object javascript
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ả. 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 lodashconst 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 RecursionViệ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 function getType(obj) { const str = Object.prototype.toString.call(obj); const map = { '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Function]': 'function', '[object Array]': 'array', '[object Date]': 'date', '[object RegExp]': 'regExp', '[object Undefined]': 'undefined', '[object Null]': 'null', '[object Object]': 'object' }; if (obj instanceof Element) { return 'element'; } return map[str]; } 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 //for array function copyArray(ori, type, copy = []) { for (const [index, value] of ori.entries()) { copy[index] = deepCopy(value); } return copy; } //for object function copyObject(ori, type, copy = {}) { for (const [key, value] of Object.entries(ori)) { copy[key] = deepCopy(value); } return copy; } //for function function copyFunction(ori, type, copy = () => {}) { const fun = eval(ori.toString()); fun.prototype = ori.prototype return fun } Cách sử dụng : Ví dụ : cho trước một object const originObject = { a: 1, b: 2, c: { d: 3 }, e: NaN } Sử dụng function deepCopy function deepCopy(ori) { const type = getType(ori); let copy; switch (type) { case 'array': return copyArray(ori, type, copy); case 'object': return copyObject(ori, type, copy); case 'function': return copyFunction(ori, type, copy); default: return ori; } } Deep clone object javascriptconst arr1 = [1, null, undefined, () => 2, { test: () => 3, }, Symbol('4')] const cloneArr1 = JSON.parse(JSON.stringify(arr1)) console.log('>>Deep clone>>>', cloneArr1)0 Deep clone array javascriptconst arr1 = [1, null, undefined, () => 2, { test: () => 3, }, Symbol('4')] const cloneArr1 = JSON.parse(JSON.stringify(arr1)) console.log('>>Deep clone>>>', cloneArr1)1 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 |