Toán tử trải rộng ES6 là một công cụ mạnh mẽ dành cho các nhà phát triển JavaScript. Đó là một tập hợp gồm ba điểm ( ... ) có thể được sử dụng để “mở rộng” các phần tử của đối tượng có thể lặp lại, chẳng hạn như mảng, bản đồ, tập hợp hoặc đối tượng.
Ví dụ: giả sử một dãy số được gọi là arr trông như thế này: [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 mảng: console.log(...arr) // 1 2 3 4 5
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ể tự làm được nhiều việc! Dưới đây là một số thủ thuật khác mà bạn có thể sử dụng:
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> |
Ví dụ này mở rộng các phần tử của mảng ['JavaScript', 'NodeJs'] bằng toán tử trải rộng và sử dụng các phần tử trải rộng làm đối số cho phương thức push để có thể thêm nhiều phần tử vào mảng trong một dòng.
2. Sao chép trình tự mới (bản sao nông)
Sao chép một mảng là một trong những tính năng hữu ích nhất của toán tử trải rộng, nhưng 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ử. Do đó, 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 vì chúng tham chiếu đến cùng một đối tượng.
1 2 3 4 5 6 7 8 | <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> 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 muốn tạo một bản sao thực bao gồm nội dung của mảng, bạn có thể sử dụng các hàm sao chép sâu chẳng hạn như JSON.parse(JSON.stringify(originalArray)) .
1 2 3 4 5 6 7 | <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> 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> |
Tuy nhiên, phương pháp này chỉ hoạt động với dữ liệu tương thích với JSON và có thể gặp vấn đề về hiệu suất khi xử lý các mảng lớn. Ngoài ra, phương thức JSON.parse(JSON.stringify(originalArray)) không hoạt động nếu originalArray chứa hàm, ký hiệu hoặc giá trị không xác định.
Bạn cũng có thể sử dụng các thư viện như Lodash và Ramda để bảo vệ các kiểu dữ liệu không phải JSON trong khi tạo các bản sao sâu của mảng và đối tượng.
3. Loại bỏ các giá trị trùng lặp khỏi mảng
Mảng các giá trị trùng lặp có thể được loại bỏ bằng cách sử dụng cấu trúc dữ liệu set 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 hợp nhiều mảng
Bạn có thể xâu chuỗi nhiều mảng để lấy dữ liệu mới bằng cách sử dụng toán tử trải phổ.
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 7 | <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 xem nào!
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> |
Các đối tượng cấu trúc:
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 bạn có thể chuyển đổi một chuỗi 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 để giữ cho mã của bạn đơn giản và hiệu quả. Bạn có thể mở rộng các phần tử của đối tượng lặp, mảng, bộ, bản đồ và đố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 mảng và đối tượng cũng như chuyển đổi NodeList và chuỗi thành mảng.
Nhưng toán tử trải rộng tạo ra một bản sao nông, vì vậy 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 mảng ban đầu. Vì vậy, bạn nên sử dụng JSON.parse(JSON.stringify(originalArray)) hoặc thư viện như lodash hoặc Ramda để tạo một bản sao sâu nếu cần.