Hướng dẫn what does arrow mean in javascript? - mũi tên trong javascript nghĩa là gì?

Question

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;

2,

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

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

3 hoặc

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

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

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

Các chức năng mũi tên không có quyền truy cập vào từ khóa

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

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

5.

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

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

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

6,

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

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

7 và

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

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

8, 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

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

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

9, 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 hàm mũi tên không có

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

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

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

param => expression
(param) => expression

1:

// 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;

2, 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;

2 của lớp và

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

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

2 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;

2 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

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

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

6,

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

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

7 và

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

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

8 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;

2 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;

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

Ví dụ

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

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

6,

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

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

7 và

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

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

8 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 chức năng mũi tên, vì hàm

(param1, paramN) => expression

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

(param1, paramN) => expression

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

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

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

2 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ư

(param1, paramN) => expression

6 và

(param1, paramN) => expression

7 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

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

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

3 riêng của chúng. Do đó, trong ví dụ này,

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

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

3 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à

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

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

3 ở 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
// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;
3 dễ lý luận hơn nhiều. You cannot declare a variable called

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

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

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

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

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

3 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

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

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

3.

// 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

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

3.

// 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

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

4.

// 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

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

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

9 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

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

6 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

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

7 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à

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

8 đượ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ì

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

9 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;
}

0 đượ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

=> Có nghĩa là gì trong javascript?

Đây là một tính năng mới được giới thiệu trong ES6 và được gọi là hàm mũi tên. Phần bên trái biểu thị đầu vào của một hàm và phần bên phải đầu ra của hàm đó.arrow function. The left part denotes the input of a function and the right part the output of that function.

Khi nào tôi nên sử dụng các chức năng mũi tên trong JavaScript?

Chúng tôi có thể sử dụng cú pháp hàm mũi tên với phương thức của chúng tôi được liên kết với mảng, như map (), giảm (), filter () vì bằng cách sử dụng cú pháp hàm mũi tên thay vì sử dụng cú pháp chức năng bình thường mà người ta có thể dễ dàng đọc và hiểu cũng như viết mã hiệu quả hơn.with our method associated with the array, like map(), reduce(), filter() since by using arrow function syntax instead of using normal function syntax one could easily read and understand as well as write the code more effectively.

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

Các phím mũi tên được sử dụng trong nhiều ứng dụng để làm những việc khác nhau như: di chuyển con trỏ văn bản sang phải, bên trái, dòng trước và dòng tiếp theo.Di chuyển nhân vật của người chơi trong các trò chơi video.Cuộn xuống và lên trong các tài liệu và trang web khác nhau.Moving text cursor to the right, left, previous line and next line. Moving player's character in video games. Scrolling down and up in different documents and web pages.

Mũi tên chất béo có nghĩa là gì trong JavaScript?

Các chức năng của mũi tên - còn được gọi là các chức năng của Mũi tên Fat Fat, là một cách tương đối mới để viết các chức năng ngắn gọn trong JavaScript.Chúng đã được giới thiệu bởi các thông số kỹ thuật ECMAScript 6 và kể từ đó trở thành tính năng ES6 phổ biến nhất.a new way of writing concise functions in JavaScript. They have been introduced by the ECMAScript 6 specifications and since then become the most popular ES6 feature.

programming javascript This in JavaScript Function JS

Hướng dẫn what does arrow mean in javascript? - mũi tên trong javascript nghĩa là gì?

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

=> Có nghĩa là gì trong javascript?

Khi nào tôi nên sử dụng các chức năng mũi tên trong JavaScript?

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

Mũi tên chất béo có nghĩa là gì trong JavaScript?

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