Sử Dụng Spread Operator Trong ES6 - Le Vu Nguyen
Có thể bạn quan tâm
- Giới thiệu nội dung bài viết
- 1. Giới thiệu về toán tử spread
- 2. Sự khác nhau toán tử spread và tham số rest
- 3. Demo Video
Giới thiệu nội dung bài viết
Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về cách khai báo và sử dụng toán tử spread của ES6. Lần lượt giới thiệu và giải thích khái niệm và ví dụ về toán tử spread của ES6 là gì?
1. Giới thiệu về toán tử spread
ES6 cung cấp cho chúng ta một loại toán tử mới gọi là spread. Cơ chế của nó hoạt động như sau. Ví dụ anh có một mảng tên là odd là lưu các giá trị số lẻ 1,3,5. Tiếp đến anh có mảng tên là compile chứa các số chẵn như sau
1 2 3 | const odd = [1,3,5]; const combined = [2,4,6, ...odd]; console.log(combined); |
Các em thấy trong mảng combined chúng ta truyền mảng odd vào và trước nó là 3 dấu chấm (…odd). Khi chương trình chạy thì nó sẽ in ra là 2,4,6,1,3,5.
Như vậy …odd được gọi là toán tử spread. Tham số odd sẽ uppack (giải nén các giá trị trong nó) các giá trị trong mảng odd (1,3,5) và gán vào mảng mới. Chính vì vậy mà ta nhận được kết quả là 2,4,6,1,3,5
2. Sự khác nhau toán tử spread và tham số rest
Sự khác nhau giữa toán tử spread và tham số rest là :
-
Toán tử spread là cách ta uppack các giá trị trong mảng ra thành các phần tử. Ví dụ như mảng odd có 3 phần tử. Khi gọi combined = [2,4,6, …odd]; lúc này chúng ta có các giá trị 2,4,6,1,3,5
-
Ngược lại với toán tử spread thì tham số rest nhóm các giá trị đơn lẻ thành 1 biến. Ví dụ dưới đây chúng ta nhóm các giá trị đơn lẻ thành 1 biến trong tham số của phương thức f
1 2 3 4 5 | function f(a, b, ...args) { console.log(args); } f(1,2,3,4,5); |
Như các em thấy giá trị 3,4,5 được gán lại cho 1 biến trong mảng là args.
- Tham số rest bắt buộc phải ở cuối cùng của phương thức tuy nhiên toán tử spread có thể ở bất kỳ đâu
1 2 3 | const odd = [1,3,5]; const combined = [...odd, 2,4,6]; console.log(combined); |
3. Demo Video
PlayMọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Từ khóa » Toán Tử Spread
-
ES6 Spread Operator - Viblo
-
Toán Tử (...) đã Thay đổi Javascript (P2) - Viblo
-
Toán Tử Spread được Sử Dụng để Làm Gì Trong JavaScript?
-
Toán Tử Spread JavaScript - Tech Wiki
-
Toán Tử Spread Trong JavaScript - TEK4
-
Toán Tử Spread JavaScript - Codefly.Vn
-
Toán Tử Spread Và Các Trường Hợp Sử Dụng Của Nó Trong JavaScript
-
Bài 8: ES6 - Toán Tử Spread Và Rest - YouTube
-
Toán Tử Spread JavaScript: Hướng Dẫn Hoàn Chỉnh
-
Sử Dụng Toán Tử Spread Trong Javascript - 2KVN
-
Sử Dụng Toán Tử Spread Trong Javascript - Trang Chủ - .vn
-
Spread Operator Và Rest Parameters Trong Javascript
-
Spread Syntax (...) - JavaScript - MDN Web Docs - Mozilla
-
Bài 8: ES6 - Toán Tử Spread Và Rest - TEDU
-
Bài 8: ES6 - Toán Tử Spread Và Rest 2023 - Mcongnghe.Com
-
JavaScript: Tìm Hiểu Về Hàm Hủy (destructuring), Tham Số Rest Và Cú ...
-
Nó Là “cú Pháp” Spread Hay “toán Tử” Spread? - HelpEx
-
Các Hàm Xử Lý Array - Mảng Trong Javascript - Code Từ Tâm
-
Một Số Kỹ Thuật Rút Gọn Code Javascript - Kaopiz Kipalog