Xin chào các bạn, học JavaScript chắc chắn chúng ta phải biết đến Object. Trong một số bài toán cụ thể, đôi khi ta sẽ cần đến thao tác ‘Clone Objects’ để thực hiện các function khác nhau. Bài viết này sẽ giới thiệu tới các bạn ‘3 cách để Clone Objects trong JavaScript’
Objects là một loại tham chiếu
Lần đầu clone 1 obj mình cũng sử dụng phép gán =, log ra kết quả khá như ý
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> one<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> two<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> obj2 <span class="token operator">=</span> obj<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> obj<span class="token punctuation">,</span> <span class="token comment">// { one: 1, two: 2 };</span> obj2 <span class="token comment">// { one: 1, two: 2 };</span> <span class="token punctuation">)</span> |
Tuy nhiên khi thêm mới/sửa 1 item nào đó hãy xem điều gì sẽ xảy ra
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> obj2<span class="token punctuation">.</span>three <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {one: 1, two: 2, three: 3}; <-- ✅</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {one: 1, two: 2, three: 3}; <-- ?</span> |
Tại sao Object ban đầu vẫn bị ảnh hưởng ? Đó là vì Object là loại tham chiếu, vì vậy khi bạn sử dụng =, nó đã sao chép con trỏ vào không gian bộ nhớ mà nó chiếm, các kiểu tham chiếu không giữ các giá trị, chúng là một con trỏ tới giá trị trong bộ nhớ. Vì vậy ta cần tìm đến một phương án khác để Clone Object mà không ảnh hưởng tới Object ‘gốc’
1. Sử dụng Spread
1 2 3 4 5 6 7 | <span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> cloneFood <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>food <span class="token punctuation">}</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cloneFood<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { corn: '?', bacon: '?' }</span> |
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
2. Sử dụng Object.assign
1 2 3 4 5 6 7 | <span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> cloneFood <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> food<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cloneFood<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { corn: '?', bacon: '?' }</span> |
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()
3. Sử dụng JSON
1 2 3 4 5 6 7 | <span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> cloneFood <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>food<span class="token punctuation">)</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cloneFood<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { corn: '?', bacon: '?' }</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">const</span> nestedObject <span class="token operator">=</span> <span class="token punctuation">{</span> country<span class="token punctuation">:</span> <span class="token string">'??'</span><span class="token punctuation">,</span> detail<span class="token punctuation">:</span> <span class="token punctuation">{</span> city<span class="token punctuation">:</span> <span class="token string">'vancouver'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> shallowClone <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>nestedObject <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Changed our cloned object</span> shallowClone<span class="token punctuation">.</span>country <span class="token operator">=</span> <span class="token string">'??'</span> shallowClone<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>city <span class="token operator">=</span> <span class="token string">'taipei'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>shallowClone<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {country: '??', detail: {city: 'taipei'}} <-- ✅</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>nestedObject<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {country: '??', detail: {city: 'taipei'}} <-- ?</span> |
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
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> deepClone <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>nestedObject<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>deepClone<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {country: '??', detail: {city: 'taipei'}} <-- ✅</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>nestedObject<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {country: '??', detail: {city: 'vancouver'}} <-- ✅</span> |
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
1 2 | <span class="token keyword">const</span> cloneFood <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> food<span class="token punctuation">)</span><span class="token punctuation">;</span> |
{} đượ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
1 2 3 4 5 6 7 | <span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>food<span class="token punctuation">,</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'??'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>food<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { corn: '??', bacon: '?' }</span> |
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
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>food<span class="token punctuation">,</span> corn<span class="token punctuation">:</span> <span class="token string">'??'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token comment">// TypeError: invalid assignment to const `food'</span> |
... 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
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> newFood <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>food<span class="token punctuation">,</span> corn<span class="token punctuation">:</span> <span class="token string">'??'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newFood<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { corn: '??', bacon: '?' }</span> |
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
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">let</span> food <span class="token operator">=</span> <span class="token punctuation">{</span> corn<span class="token punctuation">:</span> <span class="token string">'?'</span><span class="token punctuation">,</span> bacon<span class="token punctuation">:</span> <span class="token string">'?'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> newFood <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>food<span class="token punctuation">,</span> corn<span class="token punctuation">:</span> <span class="token string">'??'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newFood<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { corn: '??', bacon: '?' }</span> |
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 !
Tham khảo 3 Ways to Clone Objects in JavaScript