Sự Khác Nhau Giữa Regular Và Arrow Function Là Gì, Es6 Arrow Functions

Trong bài này tất cả chúng ta khám phá một cách khái niệm function mới bằng cách dùng dấu mui tên =>, phương pháp này được thêm vào bộ ES6 với cú pháp hoàn toàn mới mẻ.

Bạn đang xem: Arrow function là gì

Trong Javascript để tạo một function thì thông thường tất cả chúng ta sử dụng hai cách sau:

Với ES6 thì bạn có thêm một cách này là sử dụng dấu mũi tên => rất cầu kỳ, cụ thể thế nào thì tất cả chúng ta cùng khám phá nhé.

1. Sử dụng Arrow function trong ES6

Nói là ES6 nhưng thực chất đa phần các trình duyệt hiện tại đều đã phụ trợ ES6 nên bạn có thẻ coi như đây là một chức năng mới của Javascript.

Chẳng hạn: Viết arrow functionin ra câu chào & so sánh với cách tạo function thông thường.

Arrow function:

var hello = (name, message) => { console.log(“Chào ” + name + “, bạn là ” + message);};hello(“Cường”, “admin timhome.vn”);

function hello(name, message){ console.log(“Chào ” + name + “, bạn là ” + message);}hello(“Cường”, “admin timhome.vn”);

So sánh hai các trên thì rõ ràng và cụ thể cách thông thường sẽ dễ dàng hơn rất là nhiều, & cả hai đoạn code đều cho kết quả như sau:

Bài viết là mộtcâu lệnh đơn:

Trường hợp trong thân của hàm chỉ có một lệnh duy nhất thì bạn có thể sử dụng theo chẳng hạn dưới đây.

Nghĩa là bạn có thể bỏ đi cặp dấu {}, điều này tuân thủ theo phép tắc “nếu bên thân cặp {} chỉ là một câu lệnh thì bạn có thể bỏ cặp {}”.

Trường hợp một tham số:

Trường hợp truyền vào chỉ một tham số thì bạn có thể bỏ cặp ().

Trường hợp không có tham số:

Trường hợp không có tham số truyền vào thì bạn sử dụng cặp () rỗng, xemví dụ sau:

2. Một số chẳng hạn arrow function trong ES6

Hiện thời ta sẽ thực hành thông qua một số chẳng hạn để sau nàycác bạn không bị bỡ ngỡ khi gặp các đoạn code người ta viết trong thực tiễn.

Chẳng hạn với hàm map:

Chẳng hạn trước tiên ta sử dụng phối hợp hàm map của array trong Javascript, hàm này giống như vòng lặp vậy, nó có một tham số truyền vào & này là một callback function, hàm callback function này sẽ có hai tham số truyền vào đại diện cho value & key của mỗi phần tử trong mảng.

Chẳng hạn: Sử dụng hàm map để chuyển hóa các giá trị của các phần tử trong mảng sang chữ in hoa.

Sử dụng code thông thường:

Xem Thêm  Một lớp trừu tượng trong Java là gì và làm thế nào để triển khai nó? - lớp trừu tượng trong java

var tên miền = ;tên miền.map(function(val, key){ console.log(val.toUpperCase()); });console.log(tên miền);

Chạy lên kết quả sẽ như sau:

Nêu bạn khúc mắc vì sao mục lục tên miền sau khoảng thời gian giải quyết (tức là lệnhconsole.log(tên miền);)lại không chuyển sang chữ in hoa thì ban phải xem lại đoạn code ở trên mình đã không lưu giữ giá trị sau khoảng thời gian chuyển sang uppercase, vì thế để khắc phục thì bạn chỉ việc lưu giữ là được.

Tìm hiểu thêm: Ứng Dụng Họp Trực Tuyến Cisco Jabber Là Gì ? Jabber Là Gì

var tên miền = ;tên miền.map(function(val, key){ console.log(val.toUpperCase()); // Lưu giữ tên miền = val.toUpperCase();});console.log(tên miền);

Chạy lên kết quả như hình sau:

Ok hiện tại ta sử dụng Arrow Function để viết.

var tên miền = ;tên miền.map((val, key) => { console.log(val.toUpperCase());});

Quá dễ dàng phải không các bạn 🙂

Chẳng hạn với hàm setTimeout:

Hàm setTimeout cũng có một callback function nên ta sẽ truyền vào callback đó một ArrowFunction.

setTimeout(() => { console.log(“3 giây đã trôi qua”);}, 3000);

Do arrow function không có tham số truyền vào nên mình chỉđể là ().

3. Lỗi cú phápvới Arrow function

Có một số lôi cú pháp khi sử dụng arrow functionmà ta thường ít Note tới, nhin không quá khó nhưng đôi lúc lại gây khổ cực cho những bạn mới học.

Đóng arrow function

Trường hợp bạn sử dụng arrow function bên trong một hàm hoặc sử dụng dạng một biến thì ban phải dùng cặp đóng mở để bao quanh lại.

console.log(typeof () => {}); // Cú pháp saiconsole.log(typeof (() => {})); // Cú pháp đúng

Trong chẳng hạn trên thì chẳng hạn trước tiên sai vìarrow function được sử dụngnày như một tham số, vì thế bạn phải đặt nó bên trong cặp đóng mở như ở chẳng hạn 2. Trường hợp bạn không mong muốn đặt nó bên trong cặp đóng mở thì ban phải khai báo arrow function thành một biến như chẳng hạn dưới đây, bên cạnh đó nhìn rất rắc rối.

var x = () => {}console.log(typeof x);

Ràng buộc mũi tên

Đúng với tên gọi của nó là hàm mũi tên & mũi tên này rất khó chịu về cú pháp sử dụng, bạn phải đặt mũi tên cùng hàng với tên hàm.

const func1 = (x, y) // Sai=> { return x + y;};const func2 = (x, y) => // Đúng{ return x + y;};const func3 = (x, y) => { // OK return x + y;};const func4 = (x, y) // Sai=> x + y;const func5 = (x, y) => // Đúngx + y;

Nếu bạn mong muốn xuống hàng mà không bị lỗi thì phải sử dụng cú pháp sau:

const func6 = ( // Đúng x, y) => { return x + y;};

4. Giải quyết khuyết điểm với this trong closure function

Nếu bạn đã từng tham khảo nội dung hàm bind trong javascript thì từ version ES5 trở về trước sẽ có khuyết điểm với đối tượng this này là phạm vi hoạt động, & trong ES5 có sử dụng hàm bind để giải quyết. Vấn đề này được giải quyết hoàn toàn trong ES6 bằng cách dùng hàm arrow function.

Xem Thêm  JavaScript Change Style: Hướng dẫn cơ bản để làm việc với CSS - thay đổi phong cách với js

Xét chẳng hạn sử dụng trong ES5 trở về trước.

Với ES6 thì viết như sau:

5. Lời kết

ES6 quá thú vị phải không các bạn, mới chỉ nội dung thứ tưtrong serise thôi mà có quá nhiều thứ ngạc nhiên vàrấtđáng để học hỏi.

Tìm hiểu thêm: Khái Niệm Về Tecpen Là Gì ? Nghĩa Của Từ Tecpen Trong Tiếng Việt

Qua cách dùng Arrow Function thì cá nhân mình thấy vẫn chưa có thế mạnh gì hơn đối với các cách còn sót lại, vì thế tùy thuộc vào sở thích của mỗi người mà chọn cách viết function cho thích hợp.

Bài trước Bài tiếp

Cách gộp hai object javascript lại với nhau

Bài trước Bài tiếpCách gộp hai object javascript lại với nhau

Cách lấy bề dài của object trong Javascript

Cách lấy bề dài của object trong Javascript

Chỉ dẫn giải phương trình bậc 1 bằng Javascript

Chỉ dẫn giải phương trình bậc 1 bằng Javascript

Cách sử dụng nextSibling trong javascript

Cách sử dụng nextSibling trong javascript

Cách sử dụng insertAdjacentHTML trong javascript

Cách sử dụng insertAdjacentHTML trong javascript

Cách sử dụng innerHTML trong Javascript

Cách sử dụng innerHTML trong Javascript

Cách sử dụng insertBefore trong javascript

Cách sử dụng insertBefore trong javascript

Cách sử dụng insertAfter trong Javascript

Cách sử dụng insertAfter trong Javascript

Cách sử dụng parentNode trong Javascript

Cách sử dụng parentNode trong Javascript

Cách sử dụng parentElement trong Javascript

Cách sử dụng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ đặc biệt là…

Cách kiểm soát số nguyên âm trong javascript

Cách kiểm soát số nguyên âm trong javascript

Cách kiểm soát số nguyên dương trong javascript

Cách kiểm soát số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một định nghĩa không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này tất cả chúng ta sẽ khám phá đến chuỗi & cách dùng biểu thức…

Xem Thêm  Đọc tệp CSV dưới dạng DataFrame gấu trúc bằng Python (Ví dụ) - python đọc csv dưới dạng dataframe

Cách sử dụng Import / Export Module trong javascript

Cách sử dụng Import / Export Module trong javascript

Khi bạn xây dựng một áp dụng nhỏ thì việc đặt

Phương châm hoạt động của hoisting trong Javascript

Phương châm hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

VPS chi phí rẻ Host chi phí rẻ Tên miền chi phí rẻ
QUẢN TRỊ WEB
» Quản trị Linux
» Thủ thuật Host
» Học thức Tên miền
» Windows
» Bảo mật
WEB FRONTEND
» Javascript
» AngularJS
» jQuery
» jQuery Mobile
» HTML & CSS
» Bootstrap
» TypeScript
» SASS CSS
» VueJS
» NestJS
» Học ReactJS
WEB BACKEND
» PHP
» Codeigniter
» Laravel
» WordPress
» Phalcon
» OpenCart
» NodeJS
» Blogspot
DATABASE
» Học MySQL
» Học MongoDB
» DataBase cơ bản
» Học Oracle
» Học SQL Server
» Học SQLite
PROGRAMMING
» Python
» Java
» Pascal
» Học C#
» Học Ruby
» Học Swift
» C / C++
» Kotlin
» Golang
» Giải thuật
» Visual Basic
MOBILE DEV
» React Native
» Học iOS
» Android
CÔNG CỤ
» Học Git
» Testing
» Control Panel
» Dev Tool
» FFmpeg
TIN HỌC
» Excel
» Word
» PowerPoint
» Access
» Photoshop
MÔN HỌC
» Tiếng Anh
» Toán
» Tiếng Nhật
» Văn học
Giới thiệu
Giới thiệu Liên hệ Cơ chế Điều khoản Guest Bài viết
Link
Thủ thuật Download Game Áp dụng Tin học Môn học
Host
Tinohost Azdigi Vultr INET
Khóa học
PHP AZ Laravel Frontend FullStack Javascript jQuery Javascript NodeJS + ReactJS

VPS chi phí rẻ Host chi phí rẻ Tên miền giá rẻQUẢN TRỊ WEB» Quản trị Linux» Thủ thuật Host» Học thức Tên miền» Windows» Bảo mậtWEB FRONTEND» Javascript» AngularJS» jQuery» jQuery Mobile» HTML & CSS» Bootstrap» TypeScript» SASS CSS» VueJS» NestJS» Học ReactJSWEB BACKEND» PHP» Codeigniter» Laravel» WordPress» Phalcon» OpenCart» NodeJS» BlogspotDATABASE» Học MySQL» Học MongoDB» DataBase cơ bản» Học Oracle» Học SQL Server» Học SQLitePROGRAMMING» Python» Java» Pascal» Học C#» Học Ruby» Học Swift» C / C++» Kotlin» Golang» Giải thuật» Visual BasicMOBILE DEV» React Native» Học iOS» AndroidCÔNG CỤ» Học Git» Testing» Control Panel» Dev Tool» FFmpegTIN HỌC» Excel» Word» PowerPoint» Access» PhotoshopMÔN HỌC» Tiếng Anh» Toán» Tiếng Nhật» Văn họcGiới thiệuGiới thiệu Liên hệ Cơ chế Điều khoản Guest PostLiên kếtThủ thuật Download Game Áp dụng Tin học Môn họcHostingTinohost Azdigi Vultr INETKhóa họcPHP AZ Laravel Frontend FullStack Javascript jQuery Javascript NodeJS + ReactJS

Viết một bình luận