Hướng dẫn what is the meaning of => in javascript? - ý nghĩa của => trong javascript là gì?

Question

Các chức năng mũi tên đã được giới thiệu trong ES6.

Nội dung chính Show

Các hàm mũi tên trả về giá trị theo mặc định:
Lưu ý: Điều này chỉ hoạt động nếu hàm chỉ có một câu lệnh.
Cả hai ví dụ đều gọi một phương thức hai lần, đầu tiên khi trang tải và một lần nữa khi người dùng nhấp vào nút.
Cả hai ví dụ đều gọi một phương thức hai lần, đầu tiên khi trang tải và một lần nữa khi người dùng nhấp vào nút.
Các hàm mũi tên trả về giá trị theo mặc định:
So sánh các chức năng truyền thống với các chức năng mũi tên
Cú pháp cơ bản
Cú pháp nâng cao
Sự mô tả
Các hàm mũi tên được sử dụng làm phương thức
gọi, áp dụng và ràng buộc
Không ràng buộc các đối số
Sử dụng nhà điều hành mới
Sử dụng thuộc tính nguyên mẫu
Sử dụng từ khóa năng suất
Cơ thể chức năng
Trả lại đối tượng theo nghĩa đen
Dòng phá vỡ
Thứ tự phân tích cú pháp
Cách sử dụng cơ bản
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Làm thế nào các hàm mũi tên () => {} khác với các biểu thức hàm truyền thống?
Mũi tên có nghĩa là gì trong JavaScript?
Việc sử dụng chức năng mũi tên là gì?
Hàm mũi tên Lambda là gì?

Các hàm mũi tên cho phép chúng tôi viết cú pháp chức năng ngắn hơn:

Đặt myFunction = (a, b) => a * b;

Hãy tự mình thử »

Nó trở nên ngắn hơn! Nếu hàm chỉ có một câu lệnh và câu lệnh trả về một giá trị, bạn có thể xóa dấu ngoặc và từ khóa

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

2:

Các hàm mũi tên trả về giá trị theo mặc định:

xin chào = () => "Xin chào thế giới!";

Hãy tự mình thử »

Nó trở nên ngắn hơn! Nếu hàm chỉ có một câu lệnh và câu lệnh trả về một giá trị, bạn có thể xóa dấu ngoặc và từ khóa

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

2: This works only if the function has only one statement.

Các hàm mũi tên trả về giá trị theo mặc định:

xin chào = () => "Xin chào thế giới!";

Lưu ý: Điều này chỉ hoạt động nếu hàm chỉ có một câu lệnh.

Nếu bạn có tham số, bạn vượt qua chúng bên trong dấu ngoặc đơn:

Trên thực tế, nếu bạn chỉ có một tham số, bạn cũng có thể bỏ qua dấu ngoặc đơn:

Còn

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 thì sao?

Việc xử lý

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 cũng khác nhau trong các hàm mũi tên so với các chức năng thông thường.

Nói tóm lại, với các hàm mũi tên không có ràng buộc của

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3.

Trong các chức năng chính quy, từ khóa

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 đại diện cho đối tượng được gọi là hàm, có thể là cửa sổ, tài liệu, nút hoặc bất cứ điều gì.

Với các hàm mũi tên, từ khóa

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 luôn đại diện cho đối tượng xác định hàm mũi tên.

Chúng ta hãy xem hai ví dụ để hiểu sự khác biệt.

Cả hai ví dụ đều gọi một phương thức hai lần, đầu tiên khi trang tải và một lần nữa khi người dùng nhấp vào nút.

Ví dụ đầu tiên sử dụng hàm chính quy và ví dụ thứ hai sử dụng hàm mũi tên.

Kết quả cho thấy ví dụ đầu tiên trả về hai đối tượng khác nhau (cửa sổ và nút) và ví dụ thứ hai trả về đối tượng cửa sổ hai lần, vì đối tượng cửa sổ là "chủ sở hữu" của hàm.
hello = function() {
document.getElementById("demo").innerHTML += this;
}

Thí dụ
window.addEventListener("load", hello);

Với chức năng thông thường

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 đại diện cho đối tượng gọi hàm:
document.getElementById("btn").addEventListener("click", hello);

Hãy tự mình thử »

Cả hai ví dụ đều gọi một phương thức hai lần, đầu tiên khi trang tải và một lần nữa khi người dùng nhấp vào nút.

Ví dụ đầu tiên sử dụng hàm chính quy và ví dụ thứ hai sử dụng hàm mũi tên.

Kết quả cho thấy ví dụ đầu tiên trả về hai đối tượng khác nhau (cửa sổ và nút) và ví dụ thứ hai trả về đối tượng cửa sổ hai lần, vì đối tượng cửa sổ là "chủ sở hữu" của hàm.
hello = () => {
document.getElementById("demo").innerHTML += this;
}

Thí dụ
window.addEventListener("load", hello);

Với chức năng thông thường

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 đại diện cho đối tượng gọi hàm:
document.getElementById("btn").addEventListener("click", hello);

Hãy tự mình thử »

Nó trở nên ngắn hơn! Nếu hàm chỉ có một câu lệnh và câu lệnh trả về một giá trị, bạn có thể xóa dấu ngoặc và từ khóa

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

2:

Các hàm mũi tên trả về giá trị theo mặc định:

xin chào = () => "Xin chào thế giới!";


Lưu ý: Điều này chỉ hoạt động nếu hàm chỉ có một câu lệnh.	Nếu bạn có tham số, bạn vượt qua chúng bên trong dấu ngoặc đơn:	Trên thực tế, nếu bạn chỉ có một tham số, bạn cũng có thể bỏ qua dấu ngoặc đơn:	Còn `// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;` 3 thì sao?	Việc xử lý `// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;` 3 cũng khác nhau trong các hàm mũi tên so với các chức năng thông thường.
Nói tóm lại, với các hàm mũi tên không có ràng buộc của `// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;` 3.	Trong các chức năng chính quy, từ khóa `// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;` 3 đại diện cho đối tượng được gọi là hàm, có thể là cửa sổ, tài liệu, nút hoặc bất cứ điều gì.	Với các hàm mũi tên, từ khóa `// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;` 3 luôn đại diện cho đối tượng xác định hàm mũi tên.	Chúng ta hãy xem hai ví dụ để hiểu sự khác biệt.	Nói tóm lại, với các hàm mũi tên không có ràng buộc của `// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;` 3.

Biểu thức chức năng mũi tên là một thay thế nhỏ gọn cho biểu thức chức năng truyền thống, nhưng bị hạn chế và không thể được sử dụng trong tất cả các tình huống.arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

Có sự khác biệt giữa các hàm mũi tên và các chức năng truyền thống, cũng như một số hạn chế:

Các hàm mũi tên không có ràng buộc riêng của chúng với

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3,

param => expression
(param) => expression

1 hoặc

param => expression
(param) => expression

2 và không nên được sử dụng làm phương thức.

Các hàm mũi tên không có quyền truy cập vào từ khóa
```
param => expression
(param) => expression
```
3.

Các hàm mũi tên không phù hợp với các phương pháp

param => expression
(param) => expression

4,

param => expression
(param) => expression

5 và

param => expression
(param) => expression

6, thường dựa vào việc thiết lập một phạm vi.

Các chức năng mũi tên không thể được sử dụng làm hàm tạo.
Các hàm mũi tên không thể sử dụng
```
param => expression
(param) => expression
```
7, trong cơ thể của nó.

Thử nó

So sánh các chức năng truyền thống với các chức năng mũi tên

Chúng ta hãy phân tách một "chức năng ẩn danh truyền thống" cho đến "hàm mũi tên đơn giản nhất" từng bước:

Lưu ý: Mỗi bước trên đường đi là "hàm mũi tên" hợp lệ. Each step along the way is a valid "arrow function".

// Traditional Anonymous Function
(function (a) {
  return a + 100;
});

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

{Niềng răng} và (dấu ngoặc đơn) và "return" được yêu cầu trong một số trường hợp.

Ví dụ: nếu bạn có nhiều đối số hoặc không có đối số, bạn sẽ cần giới thiệu lại dấu ngoặc đơn xung quanh các đối số:multiple arguments or no arguments, you'll need to re-introduce parentheses around the arguments:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

Tương tự như vậy, nếu cơ thể yêu cầu các dòng xử lý bổ sung, bạn sẽ cần giới thiệu lại niềng răng cộng với "Trả về" (các hàm mũi tên không đoán được những gì hoặc khi bạn muốn "trả lại"):additional lines of processing, you'll need to re-introduce braces PLUS the "return" (arrow functions do not magically guess what or when you want to "return"):

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

Và cuối cùng, đối với các hàm được đặt tên, chúng tôi xử lý các biểu thức mũi tên như các biến:named functions we treat arrow expressions like variables:

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

Cú pháp

Cú pháp cơ bản

Một param. Với sự trở lại biểu thức đơn giản là không cần thiết:

param => expression
(param) => expression

Nhiều thông số yêu cầu dấu ngoặc đơn. Với sự trở lại biểu thức đơn giản là không cần thiết:

(param1, paramN) => expression

Tuyên bố đa dòng yêu cầu niềng răng và trở lại:

// The parentheses are optional with one single parameter
param => {
  const a = 1;
  return a + param;
}

Nhiều thông số yêu cầu dấu ngoặc đơn. Tuyên bố đa dòng yêu cầu niềng răng và trở lại:

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

Cú pháp nâng cao

Để trả về một biểu thức theo nghĩa đen của đối tượng yêu cầu dấu ngoặc đơn xung quanh biểu thức:

(params) => ({ foo: "a" }) // returning the object { foo: "a" }

Các tham số REST được hỗ trợ và luôn yêu cầu dấu ngoặc đơn:

(a, b, ...r) => expression

Các tham số mặc định được hỗ trợ và luôn yêu cầu dấu ngoặc đơn:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

0

Phá hủy trong các thông số được hỗ trợ và luôn yêu cầu dấu ngoặc đơn:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

1

Sự mô tả

Các hàm mũi tên được sử dụng làm phương thức

Như đã nêu trước đây, các biểu thức chức năng mũi tên phù hợp nhất cho các hàm không phải phương pháp. Hãy xem những gì xảy ra khi chúng ta cố gắng sử dụng chúng làm phương pháp:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

2

Các chức năng mũi tên không có

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 riêng của chúng. Một ví dụ khác liên quan đến

param => expression
(param) => expression

9:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

3

Bởi vì cơ thể của một lớp có bối cảnh

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3, mũi tên hoạt động khi các trường lớp đóng trên bối cảnh

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 của lớp và

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 bên trong cơ thể của hàm mũi tên sẽ trỏ chính xác vào trường hợp (hoặc chính lớp, cho các trường tĩnh). Tuy nhiên, vì nó là một đóng cửa, không phải là ràng buộc của chính chức năng, giá trị của

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 sẽ không thay đổi dựa trên bối cảnh thực thi.

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

4

Các thuộc tính chức năng mũi tên thường được cho là "phương pháp tự động bị ràng buộc", bởi vì tương đương với các phương thức bình thường là:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

5

Lưu ý: Các trường lớp được xác định trên ví dụ, không phải trên nguyên mẫu, do đó, mọi cách tạo phiên bản sẽ tạo ra một tham chiếu chức năng mới và phân bổ một lần đóng mới, có khả năng dẫn đến việc sử dụng bộ nhớ nhiều hơn một phương thức không liên kết thông thường. Class fields are defined on the instance, not on the prototype, so every instance creation would create a new function reference and allocate a new closure, potentially leading to more memory usage than a normal unbound method.

gọi, áp dụng và ràng buộc

Các phương pháp

param => expression
(param) => expression

4,

param => expression
(param) => expression

5 và

param => expression
(param) => expression

6 không phù hợp như các hàm mũi tên - vì chúng được thiết kế để cho phép các phương thức thực thi trong các phạm vi khác nhau - bởi vì các hàm mũi tên thiết lập

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 dựa trên phạm vi hàm mũi tên được xác định bên trong.NOT suitable as arrow functions – as they were designed to allow methods to execute within different scopes – because arrow functions establish

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 based on the scope the arrow function is defined within.

Ví dụ

param => expression
(param) => expression

4,

param => expression
(param) => expression

5 và

param => expression
(param) => expression

6 hoạt động như mong đợi với các chức năng truyền thống, bởi vì chúng tôi thiết lập phạm vi cho từng phương pháp:

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

6

Với các hàm mũi tên, vì hàm

// The parentheses are optional with one single parameter
param => {
  const a = 1;
  return a + param;
}

1 của chúng tôi về cơ bản được tạo trên phạm vi

// The parentheses are optional with one single parameter
param => {
  const a = 1;
  return a + param;
}

2 (toàn cầu), nên giả sử

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

3 là cửa sổ.

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

7

Có lẽ lợi ích lớn nhất của việc sử dụng các hàm mũi tên là với các phương thức như

// The parentheses are optional with one single parameter
param => {
  const a = 1;
  return a + param;
}

4 và

// The parentheses are optional with one single parameter
param => {
  const a = 1;
  return a + param;
}

5 thường yêu cầu một số loại đóng, gọi, áp dụng hoặc liên kết để đảm bảo rằng hàm được thực thi trong phạm vi thích hợp.

Ví dụ chức năng truyền thống

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

8

Ví dụ chức năng mũi tên

// Traditional Anonymous Function
(function (a, b) {
  return a + b + 100;
});

// Arrow Function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional Anonymous Function (no arguments)
(function() {
  return a + b + 100;
});

// Arrow Function (no arguments)
() => a + b + 100;

9

Không ràng buộc các đối số

Các hàm mũi tên không có đối tượng

param => expression
(param) => expression

1 của riêng họ. Do đó, trong ví dụ này,

param => expression
(param) => expression

1 là một tham chiếu đến các đối số của phạm vi kèm theo:

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

0

Lưu ý: Bạn không thể khai báo một biến có tên là

param => expression
(param) => expression

1 ở chế độ nghiêm ngặt, do đó, mã trên sẽ là lỗi cú pháp. Điều này làm cho hiệu ứng phạm vi của
param => expression (param) => expression
1 dễ lý luận hơn nhiều. You cannot declare a variable called

param => expression
(param) => expression

1 in strict mode, so the code above would be a syntax error. This makes the scoping effect of

param => expression
(param) => expression

1 much easier to reason about.

Trong hầu hết các trường hợp, sử dụng các tham số REST là một giải pháp thay thế tốt để sử dụng đối tượng

param => expression
(param) => expression

1.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

1

Sử dụng nhà điều hành mới

Các hàm mũi tên không thể được sử dụng làm hàm tạo và sẽ gây ra lỗi khi được sử dụng với

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

1.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

2

Sử dụng thuộc tính nguyên mẫu

Các hàm mũi tên không có thuộc tính

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

2.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

3

Sử dụng từ khóa năng suất

Từ khóa

param => expression
(param) => expression

7 có thể không được sử dụng trong cơ thể của hàm mũi tên (trừ khi được phép trong các chức năng tiếp tục lồng trong đó). Kết quả là, các hàm mũi tên không thể được sử dụng làm máy phát điện.

Cơ thể chức năng

Các chức năng mũi tên có thể có một cơ thể ngắn gọn hoặc thân khối thông thường.

Trong một cơ thể súc tích, chỉ có một biểu thức được chỉ định, trở thành giá trị trả về ngầm. Trong một thân khối, bạn phải sử dụng một câu lệnh

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

2 rõ ràng.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

4

Trả lại đối tượng theo nghĩa đen

Hãy nhớ rằng việc trả lại các chữ cái bằng cách sử dụng cú pháp cơ thể ngắn gọn

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

5 sẽ không hoạt động như mong đợi.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

5

Điều này là do mã bên trong niềng răng ({}) được phân tích cú pháp như một chuỗi các câu lệnh (nghĩa là

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

6 được coi là một nhãn, không phải là khóa trong một đối tượng theo nghĩa đen).

Bạn phải bọc đối tượng theo nghĩa đen trong ngoặc đơn:

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

6

Dòng phá vỡ

Hàm mũi tên không thể chứa một đường ngắt giữa các tham số và mũi tên của nó.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

7

Tuy nhiên, điều này có thể được sửa đổi bằng cách đặt đường ngắt sau mũi tên hoặc sử dụng dấu ngoặc đơn/niềng răng như được thấy dưới đây để đảm bảo rằng mã vẫn đẹp và mịn. Bạn cũng có thể đặt các lần phá vỡ dòng giữa các đối số.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

8

Thứ tự phân tích cú pháp

Mặc dù mũi tên trong hàm mũi tên không phải là toán tử, các hàm mũi tên có các quy tắc phân tích cú pháp đặc biệt tương tác khác nhau với sự ưu tiên của toán tử so với các chức năng thông thường.

// Traditional Anonymous Function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

9

Bởi vì

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

7 có ưu tiên thấp hơn hầu hết các toán tử, nên dấu ngoặc đơn là cần thiết để tránh

(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

8 được phân tích cú pháp làm danh sách đối số của hàm mũi tên.

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

0

Ví dụ

Cách sử dụng cơ bản

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

1

Thông số kỹ thuật

Sự chỉ rõ
Thông số kỹ thuật ngôn ngữ Ecmascript # Sec-Arrow-Function-DefineD # sec-arrow-function-definitions

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm thế nào các hàm mũi tên () => {} khác với các biểu thức hàm truyền thống?

Các chức năng thông thường được tạo bằng cách sử dụng khai báo chức năng hoặc biểu thức có thể xây dựng và có thể gọi được. Vì các chức năng thông thường có thể xây dựng, chúng có thể được gọi bằng cách sử dụng từ khóa mới. Tuy nhiên, các hàm mũi tên chỉ có thể gọi được và không thể xây dựng, tức là các hàm mũi tên không bao giờ có thể được sử dụng làm hàm của hàm tạo.arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions.

Mũi tên có nghĩa là gì trong JavaScript?

Các hàm mũi tên là một cách mới để viết các biểu thức hàm ẩn danh và tương tự như các hàm Lambda trong một số ngôn ngữ lập trình khác, chẳng hạn như Python.Các hàm mũi tên khác với các chức năng truyền thống theo một số cách, bao gồm cả cách xác định phạm vi của chúng và cách thể hiện cú pháp của chúng.a new way to write anonymous function expressions, and are similar to lambda functions in some other programming languages, such as Python. Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed.

Việc sử dụng chức năng mũi tên là gì?

Các chức năng mũi tên đã được giới thiệu trong ES6.Các hàm mũi tên cho phép chúng tôi viết cú pháp chức năng ngắn hơn: Hãy để myFunction = (a, b) => a * b;Hãy tự mình thử »allow us to write shorter function syntax: let myFunction = (a, b) => a * b; Try it Yourself »

Hàm mũi tên Lambda là gì?

Hàm Lambda là một hàm ẩn danh nhỏ chỉ bao gồm một biểu thức và có thể lấy một hoặc nhiều tham số.Về cơ bản, chúng cho phép các hàm được truyền dưới dạng tham số cho các chức năng khác.a small anonymous function that consist of only one expression and can take one or multiple parameters. They basically allow functions to be passed as parameter to other functions.

programming javascript JavaScript meaning Arrow function () => {} In TypeScript

Hướng dẫn what is the meaning of => in javascript? - ý nghĩa của => trong javascript là gì?

Các hàm mũi tên trả về giá trị theo mặc định:

Lưu ý: Điều này chỉ hoạt động nếu hàm chỉ có một câu lệnh.

Cả hai ví dụ đều gọi một phương thức hai lần, đầu tiên khi trang tải và một lần nữa khi người dùng nhấp vào nút.

Cả hai ví dụ đều gọi một phương thức hai lần, đầu tiên khi trang tải và một lần nữa khi người dùng nhấp vào nút.

Các hàm mũi tên trả về giá trị theo mặc định:

Thử nó

So sánh các chức năng truyền thống với các chức năng mũi tên

Cú pháp

Cú pháp cơ bản

Cú pháp nâng cao

Sự mô tả

Các hàm mũi tên được sử dụng làm phương thức

gọi, áp dụng và ràng buộc

Ví dụ chức năng truyền thống

Ví dụ chức năng mũi tên

Không ràng buộc các đối số

Sử dụng nhà điều hành mới

Sử dụng thuộc tính nguyên mẫu

Sử dụng từ khóa năng suất

Cơ thể chức năng

Trả lại đối tượng theo nghĩa đen

Dòng phá vỡ

Thứ tự phân tích cú pháp

Ví dụ

Cách sử dụng cơ bản

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Làm thế nào các hàm mũi tên () => {} khác với các biểu thức hàm truyền thống?

Mũi tên có nghĩa là gì trong JavaScript?

Việc sử dụng chức năng mũi tên là gì?

Hàm mũi tên Lambda là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội