7 Thủ Thuật Toán Tử Spread ES6 Nên Biết

Tram Ho

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ụ:

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.

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.

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.

Đ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.

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.

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.

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:

Phá hủy đối tượng:

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?

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.

Giới thiệu

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo