HomeLập trìnhJavaScriptGiới thiệu về...

Giới thiệu về cú pháp Spread trong JavaScript


bởi Ashay Mandwarya ?️??

Nó là gì và tại sao chúng ta cần nó?

kpPvb3XGdd7Dt04-ad26LV1wNB-YWlD5Uljn
Ảnh của Anton Darius | @theSollers trên Bapt

Cú pháp lây lan đã được giới thiệu trong đặc tả ES6 của JavaScript. Kể từ đó, nó đã được chứng minh là một đoạn mã có giá trị làm cho mã rõ ràng và dễ hiểu.

MDN định nghĩa như:

cú pháp lây lan cho phép một lần lặp, chẳng hạn như một biểu thức mảng hoặc chuỗi được mở rộng ở những nơi không có hoặc nhiều đối số (đối với các lệnh gọi hàm) hoặc các phần tử (đối với các ký tự mảng) hoặc một biểu thức đối tượng được mở rộng ở những nơi không có hoặc nhiều key- các cặp giá trị (đối với nghĩa đen của đối tượng) được mong đợi.

Tất cả chúng ta hãy đồng ý rằng định nghĩa trên là một số ít và không ai trong chúng ta hiểu được một từ mà nó đang cố nói. Vì vậy, hãy bắt đầu với những điều cơ bản nhất về cú pháp lây lan.

  • Toán tử trải rộng chỉ là 3 dấu chấm ...
  • Nó có thể được sử dụng trên các lần lặp như một mảng hoặc một chuỗi.
  • Nó mở rộng một iterable cho các phần tử riêng lẻ của nó
  • Nó có thể cung cấp một lệnh gọi hàm với một mảng (hoặc bất kỳ khả năng lặp nào khác) trong đó có 0 hoặc nhiều đối số được mong đợi.
Đọc thêm  Cách tìm số nguyên âm trong chuỗi bằng JavaScript

Ví dụ

Đoạn mã dưới đây chứa một hàm có tên là tổng có 3 đối số x, y và z. Chúng tôi có một mảng có 3 phần tử và chúng tôi muốn chuyển các phần tử trong mảng làm đối số cho hàm.

3hR85inZDEf6pPSrvHNxh6nBWCtiyzMLDTCu

Trước khi toán tử trải phổ được giới thiệu, điều này được thực hiện thông qua hàm áp dụng.

Sau khi giới thiệu toán tử trải rộng, nó có thể được thực hiện rất đơn giản:

GOyLsS18ND0S5WdIYUueFVTr5w5n7chDfOg4

Như có thể thấy từ đoạn mã trên với toán tử trải rộng, chúng ta không phải sử dụng hàm áp dụng. Điều này giúp chúng ta không phải viết thêm mã.

Ví dụ trên đưa ra một ý tưởng rất sơ bộ và ngắn gọn về toán tử trải rộng. Trước tiên, hãy tìm hiểu thêm chi tiết về điều tương tự, sau đó chúng ta sẽ xem thêm các ví dụ.

cú pháp

Toán tử trải phổ có thể được sử dụng theo nhiều cách và tình huống chẳng hạn như

GBky3Srjrr4UtzdstTzJLa1jYs95mZhfZMCT

Khi được sử dụng trong kịch bản trên, được gọi là tham số còn lại. Chúng ta sẽ xem các ví dụ liên quan đến điều này trong phần ví dụ.

  • Tạo/Mở rộng một mảng/có thể lặp lại:
plbemKpJR4jYL1RxOpQykp6DLOwKRgU0zAIK

ví dụ

… được sử dụng làm đối số cho hàm biến thiên. Hàm biến thiên là một hàm có thể có một số tham số thay đổi.

E65KbaqcTyzOKHExPf06s1PxCeNN5ecEg9qQ

Ở đây, khi chúng tôi trả về các đối số, chúng tôi thấy rằng chúng tôi lấy lại mảng mà chúng tôi đã chuyển dưới dạng các giá trị riêng biệt trong lệnh gọi. Điều này cho thấy rằng toán tử còn lại thực sự hoạt động hoàn toàn ngược lại với cú pháp trải rộng. Một mở rộng và một cô đọng giá trị.

Đọc thêm  Dưới mui xe của động cơ V8

Một điều nữa cần chỉ ra là không có số lượng tham số cụ thể nào được đề cập trong định nghĩa hàm. Điều này có nghĩa là sử dụng… hàm có thể có n số đối số. Chúng ta không cần chỉ định trước các tham số.

Đây đặc biệt là một cách rất linh hoạt để nhận các đối số cho một hàm mà số lượng đối số cụ thể không được xác định như hàm Math.max và Math.min. Chúng là các hàm biến thiên vì số lượng đầu vào có thể là vô hạn đối với chúng.

Quay lại ví dụ, để lấy tổng của tất cả các đối số

GGxZLLfTPqmxmoz4UWDs9QC0gcPwfTY79mRb

Chúng ta phải lặp lại mảng và thêm tất cả các phần tử riêng lẻ để tạo ra kết quả.

  • Đẩy các phần tử trong một mảng

Hàm push() được sử dụng để đẩy các phần tử vào một mảng. Hạn chế với push là chúng ta phải đẩy từng phần tử một (push(1,2,3)). Nếu có một mảng có các phần tử sẽ được chèn vào mảng bằng cách sử dụng lệnh đẩy, chúng ta sẽ nhận được một mảng nhiều chiều mà chúng ta không yêu cầu.

jDIOeXcE5FWI28Pd3ZvA2glor-bky4ULBLRn

Một lần nữa áp dụng để giải cứu

A8ehvgpbQXdo5QjrEV01luli6oiXLS2RGv12

Như chúng ta có thể thấy rằng việc sử dụng apply trông không được thanh lịch cho lắm và chúng ta cần một cú pháp nhỏ và đơn giản để thực hiện điều đó. Hãy để chúng tôi sử dụng lây lan…

Đọc thêm  JavaScript Tạo đối tượng – Cách xác định đối tượng trong JS
7mVMylAGnatsCSTGdBWyn5Fo2oZ70UWUNwLW

Thanh lịch!

PjvE5dPbLmi1dK0UDrBH95ads1-wlP-ADGMN

Giản dị!

Kết quả tương tự có thể được tạo ra bằng cách sử dụng một đối tượng

YYlEmAxXhv2fZ0C0ROiBC74mbRP1mWesgHI5

Việc nối được thực hiện bằng hàm concat

WlYNJfs0jB6Hw4Y3VttUHTn8lI6S5FDiiidQ

Điều tương tự cũng có thể đạt được bằng cách sử dụng toán tử …

eSN8Hm-y7BbaBtEXHU9k5SfMHbeK8IyPO3hQ
  • Chuyển đổi một chuỗi thành một mảng

Điều này có thể được thực hiện bằng cách sử dụng cả hàm tách và toán tử …

vHzSvkmtOb1eLW8XuoLhVOtsEYP4-ZuVFa1-
0hJH3tYjZ96gDMlAVioIG9hoK4p1Zo-RVCev
  • Sử dụng trong hàm max và min

Đoạn mã dưới đây có xu hướng tìm phần tử lớn nhất trong mảng, vì vậy chúng tôi chuyển toàn bộ mảng vào hàm nhưng chúng tôi nhận được kết quả là NaN

rGe20ar6559QFEyd1NzdUF8S-2Z2VqR6S13p

Chúng tôi có thể sử dụng áp dụng, nhưng như đã thấy từ các ví dụ trước, tôi ghét sử dụng nó

4318SrchWxeR0K2k9GTS45C0DH1i0I5ZqUBy

Tương tự cho phút

SnMeVaTIwhsxcJYIzHn34touLSHHJaODLhJO

Phần kết luận

Chúng tôi đã thấy nhiều tình huống trong đó toán tử trải rộng có ích và giảm bớt mã của chúng tôi, đồng thời làm cho nó trở nên cực kỳ dễ hiểu.

Nếu bạn thích nó Vỗ tay? và Theo dõi? để biết thêm.

QM0OaPVNzU78PsxECtJR-DrVQBUFaXN15dT7
Google



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status