ES6 Spread Operator là một công cụ mạnh mẽ mà bất kỳ nhà phát triển JavaScript nào cũng có trong bộ công cụ của họ. Đó là một tập hợp ba dấu chấm ( ... ) có thể được sử dụng để “trải rộng” các phần tử của một đối tượng có thể lặp lại, chẳng hạn như một mảng, bản đồ, tập hợp hoặc đối tượng.
Ví dụ: hãy tưởng tượng bạn có một dãy số gọi là arr trông giống như sau: [1, 2, 3, 4, 5] . Thay vì lặp qua mảng và console.log từng phần tử, bạn chỉ cần sử dụng toán tử trải rộng để in ra mảng: console.log(...arr) // 1 2 3 4 5 .
Thí dụ:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> arr <span class="token punctuation">)</span> <span class="token comment">// [ 1, 2, 3, 4, 5 ]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token operator">...</span> arr <span class="token punctuation">)</span> <span class="token comment">// 1 2 3 4 5</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">,</span> <span class="token operator">...</span> other <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'tuan'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">,</span> luckyNumber <span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token comment">// tuan</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> other <span class="token punctuation">)</span> <span class="token comment">// { age: 100, luckyNumber: 6 }</span> |
Nhưng toán tử trải rộng có thể làm được nhiều hơn thế! Dưới đây là một số thủ thuật khác mà bạn có thể sử dụng nó cho:
1. Cách tốt hơn để sử dụng phương thức push() của mảng
Chúng ta đều biết rằng phương thức push() hỗ trợ truyền nhiều tham số không xác định.
1 2 3 4 5 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'tuan'</span> <span class="token punctuation">,</span> <span class="token string">'medium'</span> <span class="token punctuation">]</span> arr <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token operator">...</span> <span class="token punctuation">[</span> <span class="token string">'JavaScript'</span> <span class="token punctuation">,</span> <span class="token string">'NodeJs'</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> arr <span class="token punctuation">)</span> <span class="token comment">// ['tuan', 'medium', 'JavaScript', 'NodeJs']</span> |
Trong ví dụ này, chúng tôi đang sử dụng toán tử trải rộng để trải rộng các phần tử của mảng [ 'JavaScript', 'NodeJs' ] và sử dụng các phần tử được trải rộng làm đối số cho phương thức đẩy, cho phép chúng tôi thêm nhiều phần tử vào arr trong một dòng thay vì phải sử dụng push nhiều lần.
2. Sao chép một mảng mới (clone nông và sâu)
Sao chép một mảng là một trong những chức năng thuận tiện nhất của toán tử trải rộng, nhưng điều đáng chú ý là toán tử trải rộng chỉ sao chép chính mảng đó chứ không sao chép các phần tử. Vì vậy, nếu mảng ban đầu chứa các đối tượng, bất kỳ thay đổi nào được thực hiện đối với bản sao cũng sẽ ảnh hưởng đến mảng ban đầu khi chúng tham chiếu đến cùng các đối tượng.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// This is shallow clone</span> <span class="token keyword">const</span> originalArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> b <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> copyArr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> originalArray <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> copyArr <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [1, 2, {a: 1, b: 2}]</span> <span class="token comment">//Modifying the object in the copyArray,</span> <span class="token comment">//it will also modify the original array</span> copyArr <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> a <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> originalArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [1, 2, {a: 3, b: 2}]</span> |
Nếu bạn cần tạo một bản sao thực sự của mảng, bao gồm các đối tượng bên trong nó, bạn có thể sử dụng hàm sao chép sâu chẳng hạn như JSON.parse(JSON.stringify(originalArray)) , hàm này có thể tạo một bản sao sâu của mảng ban đầu.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> originalArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> a <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> b <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> copyArr <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> originalArray <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> copyArr <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [1, 2, {a: 1, b: 2}]</span> <span class="token comment">//Modifying the object in the copyArray,</span> <span class="token comment">//it will not modify the original array</span> copyArr <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> a <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> originalArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [1, 2, {a: 1, b: 2}]</span> |
Điều quan trọng cần lưu ý là JSON.parse(JSON.stringify)) tạo một bản sao sâu, nhưng nó chỉ hoạt động đối với dữ liệu tuân thủ JSON và có thể không phải là tùy chọn tốt nhất về mặt hiệu suất nếu bạn đang làm việc với các mảng lớn. Điều đáng nói là phương thức JSON.parse(JSON.stringify(originalArray)) sẽ không hoạt động nếu originalArray có hàm, Ký hiệu và giá trị không xác định
Cũng có thể sử dụng một thư viện như Lodash hoặc Ramda có chức năng cloneDeep có thể tạo một bản sao sâu của một mảng hoặc một đối tượng đồng thời bảo toàn kiểu dữ liệu không phải JSON.
3. Loại bỏ các giá trị trùng lặp khỏi mảng
Có thể loại bỏ các mảng giá trị trùng lặp thông qua cấu trúc dữ liệu đã đặt và toán tử trải rộng.
1 2 3 4 5 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'tuan'</span> <span class="token punctuation">,</span> <span class="token string">'tuan'</span> <span class="token punctuation">,</span> <span class="token string">'medium'</span> <span class="token punctuation">,</span> <span class="token string">'medium'</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> uniqueArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token keyword">new</span> <span class="token class-name">Set</span> <span class="token punctuation">(</span> arr <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> uniqueArray <span class="token punctuation">)</span> <span class="token comment">// ['tuan', 'medium']</span> |
4. Kết nối nhiều mảng
Có, chúng ta có thể sử dụng toán tử trải rộng để xâu chuỗi nhiều mảng để nhận dữ liệu hoàn toàn mới.
1 2 3 4 5 6 | <span class="token keyword">const</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'tuan'</span> <span class="token punctuation">,</span> <span class="token string">'medium'</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'JavaScript'</span> <span class="token punctuation">,</span> <span class="token string">'NodeJs'</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> arr1 <span class="token punctuation">,</span> <span class="token operator">...</span> arr2 <span class="token punctuation">]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> arr <span class="token punctuation">)</span> <span class="token comment">// ['tuan', 'medium', 'JavaScript', 'NodeJs']</span> |
5. Chuyển NodeList thành mảng thực
Toán tử trải rộng có thể được sử dụng để chuyển đổi một NodeList, là danh sách các phần tử DOM, thành một mảng thực.
1 2 3 4 5 6 | <span class="token comment">// $divs is a NodeList</span> <span class="token keyword">const</span> $divs <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">'div'</span> <span class="token punctuation">)</span> <span class="token comment">// $arrayDivs is An Array</span> <span class="token keyword">const</span> $arrayDivs <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> $divs <span class="token punctuation">]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Array <span class="token punctuation">.</span> <span class="token function">isArray</span> <span class="token punctuation">(</span> $divs <span class="token punctuation">)</span> <span class="token punctuation">,</span> Array <span class="token punctuation">.</span> <span class="token function">isArray</span> <span class="token punctuation">(</span> $arrayDivs <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">// false true</span> |
6. Phá hủy
Toán tử trải rộng thường được sử dụng để hủy cấu trúc mảng và đối tượng, hãy kiểm tra!
Phá hủy mảng:
1 2 3 4 5 | <span class="token keyword">const</span> <span class="token punctuation">[</span> num0 <span class="token punctuation">,</span> <span class="token operator">...</span> others <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> num0 <span class="token punctuation">)</span> <span class="token comment">// 1</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> others <span class="token punctuation">)</span> <span class="token comment">// [2, 3, 4, 5, 6]</span> |
Phá hủy đối tượng:
1 2 3 4 5 6 | <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'tuan'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">,</span> luckyNumber <span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">,</span> <span class="token operator">...</span> other <span class="token punctuation">}</span> <span class="token operator">=</span> obj console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> name <span class="token punctuation">)</span> <span class="token comment">// tuan</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> other <span class="token punctuation">)</span> <span class="token comment">// { age: 100, luckyNumber: 6 }</span> |
7. Chuyển chuỗi thành mảng
Thật ngạc nhiên khi một chuỗi có thể biến thành một mảng như thế này phải không?
1 2 3 | <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'tuan'</span> <span class="token keyword">const</span> nameArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> name <span class="token punctuation">]</span> <span class="token comment">// ['t', 'u', 'a', 'n']</span> |
Phần kết luận
Toán tử trải rộng ( ... ) là một công cụ mạnh có thể đơn giản hóa mã của bạn và làm cho mã hiệu quả hơn. Nó cho phép bạn mở rộng các phần tử của một đối tượng có thể lặp lại, chẳng hạn như một mảng, tập hợp, bản đồ hoặc đối tượng. Nó có thể được sử dụng cho các tác vụ như hợp nhất mảng, sao chép mảng, loại bỏ các bản sao, phá hủy cấu trúc mảng và đối tượng cũng như chuyển đổi NodeList hoặc chuỗi thành mảng.
Tuy nhiên, điều quan trọng cần lưu ý là nó tạo ra một bản sao nông, nghĩa là bất kỳ thay đổi nào được thực hiện đối với mảng được sao chép sẽ ảnh hưởng đến bản gốc. Do đó, khi cần thiết, bạn nên sử dụng các phương pháp khác để tạo bản sao sâu như JSON.parse(JSON.stringify(originalArray)) hoặc thư viện như lodash hoặc Ramda .
Và cuối cùng
Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!
Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn bạn.