Dấu (…) trong JavaScript có ý nghĩa gì?

3062
three dots (...) trong JavaScript có ý nghĩa gì

Bài viết sẽ giải thích three dots (…) trong JavaScript có ý nghĩa gì. Hy vọng, điều này sẽ loại bỏ sự mập mờ trong khái niệm này cho các bạn, và cho những lập trình viên sẽ tìm thấy bài viết này trong tương lai và có cùng câu hỏi. Đây là một trong những tính năng mới thú vị của ECMA6 của Javascript; (...) là một trong những chức năng Javascript mới này.

Thật ra tôi đã trở thành một fan hâm mộ lớn của (...) có thể thay đổi phong cách giải quyết vấn đề của bạn trong JavaScript. Chúng ta có thể sử dụng three dots (...) theo hai khái niệm khác nhau đó là spread operator and rest operator.

Nhưng trước tiên như các bài viết các chúng ta sẽ đi vào ví dụ để nắm vững và cách học này mang đến sự hiểu quả hơn.

  43 kho lưu trữ Github JS phổ biến nhất 2019 -  Bạn đã biết hết chưa?
  Hát karaoke bài hát bất kì chỉ bằng HTML và JavaScript

Example Spread Syntax

Ví dụ 1 

Without Spread syntax (...)

With Spread syntax (...)

Ví dụ 2 

Liên quan đến immutable (Tính bất biến trong javascript).

Without Spread syntax (...)

With Spread syntax (...)

Qua hai ví dụ đầu tiên các bạn hình dung ra được Spread syntax có nhiệm vụ như thế nào? Ở ví dụ 1 đơn giản thì nhiệm vụ của Spread là làm cho code rõ ràng hơn và ngắn gọn tường mình hơn. Giúp coder tiết kiệm được thời gian và kb code.

Nhưng đến ví dụ 2 ta thấy nhiệm vụ của Spread không hề đơn giản nữa rồi, liên quan đến Immutable trong javascript. Trong đoạn mã trên, chúng tôi đã tạo ra một mảng new_arr2 với một số giá trị và sao chép new_arr vào new_arr2. Điều đó có nghĩa là reference (address) new_arr đã được gán cho new_arr. điều đó có nghĩa là nếu chúng ta làm bất cứ điều gì với new_arr2, nó cũng sẽ ảnh hưởng đến new_arr và ngược lại vì chúng có chung reference (address).

Nhưng khi sử dụng spread thì developer không còn lo lắng! Ở đây chúng ta có thể sử dụng spread operator để loại bỏ sự mơ hồ này.

Nếu bạn nào có thể học nhanh qua các ví dụ cụ thể thì có thể dừng tại đây, và nếu coder nào vẫn chưa hiểu hay đang mơ hồ thì xin đọc phần tiếp theo.

Khái niệm Spread syntax (…)

Như chúng tôi nói ở đầu bài thì: Chúng ta có thể sử dụng (...) theo hai khái niệm khác nhau. Đó là spread operatorrest operator.

Spread operator 

Điều này rất hữu ích khi chúng ta muốn copy properties của một object sang một object khác nhưng với một chút sửa đổi về giá trị của một số properties. Ví dụ :

và chúng tôi muốn tạo các object khác nhau chỉ với thay đổi về Fullname. Chúng tôi có thể làm điều này rất dễ dàng với sự trợ giúp của spread operator:

Nó chỉ diễn ra một bước duy nhất.

Xem thêm cách Copy Objects trong JavaScript.

Rest operator

Điều này tôi thực sự thấy rất hữu ích, Đôi khi chúng tôi phải thiết kế một số Api có thể chấp nhận n số tham số, trong những tình huống này có thể thực sự hữu ích. Hãy để tôi thử giải thích cho bạn bằng một ví dụ đơn giản. Chúng tôi muốn thiết kế một phương thức để tổng n số:

Bây giờ thử run xem nào:

Cool… right!!!

Kết luận

Khi chúng ta thấy three dots (…) trong code, đó là rest parameters or the spread operator. Có một cách dễ dàng để phân biệt giữa chúng:

  1. Khi three dots (…) ở cuối các function parameters, đó là “Rest operator” và tập hợp phần còn lại của danh sách các đối số thành một mảng 
  2. Khi three dots (…) xảy ra trong một function call hoặc tương tự, nó được gọi là “Spread operator” và mở rộng một mảng thành một list.

Cảm ơn các bạn đã theo dõi bài viết. Hy vọng qua bài viết này, các bạn sẽ hiểu hơn về three dots (...) trong JavaScript có ý nghĩa gì.

Đừng bỏ lỡ những bài viết hay về JavaScript:

Xem thêm việc làm JavaScript Developer hot nhất trên TopDev

TopDev via Anonystick

  Hack hàng ngàn Website thông qua các Thư viện JavaScript của Bên thứ ba - Trong đó có Datatables
  8 cách tối ưu hoá JavaScript mọi lập trình viên đều phải biết