Chào các bác! đến hẹn lại lên, hôm nay cũng lại tìm thấy một cái cú pháp khá là lạ lẫm của Javascript mà mình thấy khá ít người dùng, đó là Spread syntax. (bác nào biết rồi thì góp ý chém gió với mình nhé :3 )

cú pháp:

...

Cho function call:

myFunction(...myArray)

Cho array:

[...myArray, 1, 'a', 2, 'b', 3, 'c']

Cái cú pháp này hơi khó định nghĩa một chút :3 cú thể thì các bác có thể xem một vài example ở dưới đây để hiểu rõ hơn về nó nhé:

  • Dùng Spread Syntax với function:

carbon

như trong ảnh các bác thấy function myFunction yêu cầu 3 biến đầu vào để trả về sum của 3 biến đó, nhưng khi gọi function myFunction thì mình chỉ truyền một biến đầu vào là một array kèm three dots myFunction(...numbers) và kết quả đầu ra là 6.

như vậy có thể hình dung ra là khi thêm three dots ở trước array và truyền nó vào function thì nó sẽ extract cái array đó ra thành 3 biến tương đương với 3 biến đầu vào của function. ?? 😀 ?? có khó hiểu không các bác??

ngoài cách sử dụng với function trên ra thì các bác có thể sử dụng nhiều lần three dots ở  lần gọi function như ảnh dưới: carbon (3).png

  • Dùng Spread Syntax với array thì như nào?

carbon.png

Như các bác thấy ảnh trên, mình không dùng Spread syntax và khi chèn array arr1 vào array arr2, thì output của nó sẽ là một mảng hai chiều, đấy là một output chính xác nhưng nó không như mình mong muốn… mình muốn cái arr2 phải là mảng 1 chiều từ 1 đến 6 cơ… lúc đấy mình có thể áp dụng Spread syntax vào. cụ thể như này:

carbon (5).png

Đấy, như các bác thấy, khi sử dụng Spread syntax thì nó cho phép 2 array1array2 expands ra và chèn từng phần tử vào array3 , khi console.log ra thì mình sẽ được kết quả là mảng một chiều từ 1 đến 6. 😀

Một chút ví dụ về Spread syntax nữa nhé các bác:

để chuyển một chuỗi thành array, thì đơn giản mình chỉ việc làm như này:

carbon (1).png

Tuyệt chưa, với Spread syntax thì nó đã giãn cái biến string ra thành từng chữ và mỗi chữ là một phần tử trong cái array kia.

Kết bài

Mình chỉ nói đôi dòng về cái cú pháp mới mẻ mà mình cũng vừa mới biết và tìm hiểu này, vì nó còn khá mới (đối với mình) nên cũng chưa áp dụng được gì nhiều lắm. :))

các bác nào biết rõ và áp dụng nhiều có thể chia sẻ cho mọi người một ít ở dưới phần comment để mọi người được hiểu rõ hơn nữa về cái cú pháp này nhé. 😀

Mình có tham khảo một tý ở:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

Trong lúc viết bài có gì sai sót các bác nhắc mình với nhé, cám ơn các bác rất nhiều. 😀

Advertisements