Chức năng mũi tên trong javascript là gì

Tìm hiểu tất cả về các hàm mũi tên JavaScript. Chúng tôi sẽ chỉ cho bạn cách sử dụng cú pháp mũi tên ES6 và một số lỗi phổ biến mà bạn cần lưu ý khi tận dụng các hàm mũi tên trong mã của mình. Bạn sẽ thấy rất nhiều ví dụ minh họa cách chúng hoạt động

Các chức năng mũi tên JavaScript xuất hiện cùng với việc phát hành ECMAScript 2015, còn được gọi là ES6. Do cú pháp ngắn gọn và cách xử lý từ khóa this, các hàm mũi tên nhanh chóng trở thành một tính năng yêu thích của các nhà phát triển

Cú pháp hàm mũi tên. Viết lại một chức năng thông thường

Các hàm giống như công thức nấu ăn nơi bạn lưu trữ các hướng dẫn hữu ích để hoàn thành điều gì đó bạn cần xảy ra trong chương trình của mình, chẳng hạn như thực hiện một hành động hoặc trả về một giá trị. Bằng cách gọi hàm của bạn, bạn thực hiện các bước có trong công thức của mình. Bạn có thể làm như vậy mỗi khi gọi hàm đó mà không cần phải viết đi viết lại công thức

Đây là một cách tiêu chuẩn để khai báo một hàm và sau đó gọi nó bằng JavaScript

// function declaration
function sayHiStranger[] {
  return 'Hi, stranger!'
}

// call the function
sayHiStranger[]

Bạn cũng có thể viết hàm tương tự như một biểu thức hàm, như thế này

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

Hàm mũi tên JavaScript luôn là biểu thức. Đây là cách bạn có thể viết lại hàm trên bằng cách sử dụng ký hiệu mũi tên béo

const sayHiStranger = [] => 'Hi, stranger'

Những lợi ích của việc này bao gồm

• chỉ một dòng mã
• không có từ khóa

  const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
  // call the function
  console.log[getNetflixSeries['Bridgerton', '2020'] ]
  // output: The Bridgerton series was released in 2020
  

  4
• không có từ khóa

  const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
  // call the function
  console.log[getNetflixSeries['Bridgerton', '2020'] ]
  // output: The Bridgerton series was released in 2020
  

  5
• và không có dấu ngoặc nhọn {}

Trong JavaScript, các hàm là “công dân hạng nhất. ” Bạn có thể lưu trữ các hàm trong các biến, chuyển chúng sang các hàm khác dưới dạng đối số và trả về chúng từ các hàm khác dưới dạng giá trị. Bạn có thể thực hiện tất cả những điều này bằng các hàm mũi tên JavaScript

Cú pháp không có Parens

Trong ví dụ trên, hàm không có tham số. Trong trường hợp này, bạn phải thêm một bộ dấu ngoặc đơn trống

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

6 trước biểu tượng mũi tên béo [

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

7]. Điều tương tự cũng xảy ra khi bạn có nhiều hơn một tham số

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

Tuy nhiên, chỉ với một tham số, bạn có thể tiếp tục và bỏ qua dấu ngoặc đơn [bạn không cần phải làm vậy, nhưng bạn có thể]

________số 8

Hãy cẩn thận, mặc dù. Ví dụ: nếu bạn quyết định sử dụng tham số mặc định, bạn phải đặt tham số đó bên trong dấu ngoặc đơn

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

Và chỉ vì bạn có thể, không có nghĩa là bạn nên. Pha trộn với một chút châm biếm nhẹ nhàng, có ý nghĩa tốt, Kyle Simpson [của You Don't Know JS nổi tiếng] đã đưa ra suy nghĩ của mình về việc bỏ dấu ngoặc đơn vào sơ đồ này

Trả lại ngầm định

Khi bạn chỉ có một biểu thức trong thân hàm, bạn có thể làm cho cú pháp mũi tên ES6 ngắn gọn hơn nữa. Bạn có thể giữ mọi thứ trên một dòng, loại bỏ các dấu ngoặc nhọn và loại bỏ từ khóa

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

5

Bạn vừa thấy cách thức hoạt động của những lớp lót tiện lợi này trong các ví dụ ở trên. Đây là một ví dụ nữa, chỉ để đo lường tốt. Hàm

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

9 thực hiện những gì nó nói trên hộp thiếc. nghĩa là, nó trả về một mảng các đối tượng sê-ri Netflix được sắp xếp theo số lượt thích cao nhất

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

2

Điều này thật tuyệt, nhưng hãy chú ý đến khả năng đọc mã của bạn — đặc biệt là khi sắp xếp thứ tự một loạt các hàm mũi tên bằng cách sử dụng cú pháp mũi tên một dòng và cú pháp mũi tên ES6 không có dấu ngoặc đơn, như trong ví dụ này

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

3

Điều gì đang xảy ra ở đó?

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

4

Bây giờ, bạn có thể nhanh chóng thấy cách hàm bên ngoài

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

0 có tham số,

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

1 và trả về một hàm ẩn danh. Đến lượt hàm bên trong này có một tham số gọi là

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

2 và trả về một chuỗi sử dụng giá trị của cả

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

1 và

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

2. Đây là cách bạn có thể gọi hàm

const sayHiStranger = [] => 'Hi, stranger'

0

Coi chừng những sai lầm hoàn trả tiềm ẩn này

Khi hàm mũi tên JavaScript của bạn chứa nhiều hơn một câu lệnh, bạn cần đặt tất cả chúng trong dấu ngoặc nhọn và sử dụng từ khóa

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

5

Trong đoạn mã bên dưới, hàm này xây dựng một đối tượng chứa tiêu đề và tóm tắt của một số sê-ri Netflix [các bài đánh giá Netflix từ trang web Rotten Tomatoes]

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

0

Hàm mũi tên bên trong hàm

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

6 phát triển qua một loạt câu lệnh, ở cuối câu lệnh, nó trả về một đối tượng. Điều này làm cho việc sử dụng dấu ngoặc nhọn xung quanh thân hàm là không thể tránh khỏi

Ngoài ra, khi bạn đang sử dụng dấu ngoặc nhọn, trả về ẩn không phải là một tùy chọn. Bạn phải sử dụng từ khóa

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

5

Nếu hàm của bạn trả về một đối tượng theo nghĩa đen bằng cách sử dụng hàm trả về ẩn, thì bạn cần bọc đối tượng bên trong dấu ngoặc tròn. Không làm như vậy sẽ dẫn đến lỗi, bởi vì công cụ JavaScript phân tích nhầm dấu ngoặc nhọn của đối tượng thành dấu ngoặc nhọn của hàm. Và như bạn vừa lưu ý ở trên, khi bạn sử dụng dấu ngoặc nhọn trong hàm mũi tên, bạn không thể bỏ qua từ khóa trả về

Phiên bản ngắn hơn của mã trước thể hiện cú pháp này

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

1

Bạn không thể đặt tên cho các chức năng mũi tên

Các hàm không có định danh tên giữa từ khóa

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

4 và danh sách tham số được gọi là các hàm ẩn danh. Đây là biểu thức hàm ẩn danh thông thường trông như thế nào

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

2

Các hàm mũi tên đều là các hàm ẩn danh

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

3

Kể từ ES6, các biến và phương thức có thể suy ra tên của một hàm ẩn danh từ vị trí cú pháp của nó, sử dụng thuộc tính

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

2 của nó. Điều này giúp có thể xác định chức năng khi kiểm tra giá trị của nó hoặc báo cáo lỗi

Kiểm tra điều này bằng cách sử dụng

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

0

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

4

Xin lưu ý rằng thuộc tính

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

2 được suy luận này chỉ tồn tại khi hàm ẩn danh được gán cho một biến, như trong ví dụ trên. Nếu bạn sử dụng chức năng ẩn danh làm lệnh gọi lại, bạn sẽ mất tính năng hữu ích này. Điều này được minh họa trong bản demo bên dưới khi chức năng ẩn danh bên trong phương thức

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

2 không thể sử dụng thuộc tính

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

2

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

5

Và đó không phải là tất cả. Thuộc tính

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

2 được suy luận này vẫn không hoạt động như một mã định danh phù hợp mà bạn có thể sử dụng để tham chiếu hàm từ bên trong chính nó — chẳng hạn như đối với đệ quy, sự kiện hủy liên kết, v.v.

Tính ẩn danh nội tại của các hàm mũi tên đã khiến Kyle Simpson bày tỏ quan điểm của mình về chúng như sau

Vì tôi không nghĩ rằng các hàm ẩn danh là một ý tưởng hay để sử dụng thường xuyên trong các chương trình của bạn, nên tôi không phải là người thích sử dụng biểu mẫu hàm mũi tên

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

7. — Bạn không biết JS

Các hàm mũi tên xử lý từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 như thế nào

Điều quan trọng nhất cần nhớ về các hàm mũi tên là cách chúng xử lý từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6. Cụ thể, từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 bên trong hàm mũi tên không bị bật lại

Để minh họa điều này có nghĩa là gì, hãy xem bản demo bên dưới

[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”qBqgBmR” user=”SitePoint”]Xem Pen
JS này trong hàm mũi tên của SitePoint [ . [/codepen_embed]
on CodePen.[/codepen_embed]

Đây là một nút. Nhấp vào nút sẽ kích hoạt bộ đếm ngược từ 5 thành 1, hiển thị trên chính nút đó

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

6

Lưu ý cách trình xử lý sự kiện bên trong phương thức

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

9 là biểu thức hàm ẩn danh thông thường, không phải hàm mũi tên. Tại sao?

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

7

Đây là giao diện trong bảng điều khiển công cụ dành cho nhà phát triển Firefox

Tuy nhiên, hãy thử thay thế chức năng thông thường bằng chức năng mũi tên, như thế này

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

8

Bây giờ,

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 không tham chiếu nút nữa. Thay vào đó, nó tham chiếu đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

22

Điều này có nghĩa là, ví dụ, nếu bạn muốn sử dụng

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 để thêm một lớp vào nút sau khi nhấp vào nút đó, thì mã của bạn sẽ không hoạt động

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

9

Đây là thông báo lỗi trong bảng điều khiển

Khi bạn sử dụng chức năng mũi tên trong JavaScript, giá trị của từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 không bị phục hồi. Nó được kế thừa từ phạm vi cha [điều này được gọi là phạm vi từ vựng]. Trong trường hợp cụ thể này, hàm mũi tên được đề cập đang được truyền dưới dạng đối số cho phương thức

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

25, thuộc phạm vi toàn cầu. Do đó,

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 bên trong hàm xử lý cũng bị ràng buộc với phạm vi toàn cục — nghĩa là với đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

22

Vì vậy, nếu bạn muốn

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 tham chiếu nút bắt đầu trong chương trình, cách tiếp cận đúng là sử dụng hàm thông thường, không phải hàm mũi tên

Chức năng mũi tên ẩn danh

Điều tiếp theo cần chú ý trong bản demo ở trên là mã bên trong phương thức

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

2. Ở đây cũng vậy, bạn sẽ tìm thấy một hàm ẩn danh, nhưng lần này là một hàm mũi tên. Tại sao?

Lưu ý giá trị của

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 sẽ là bao nhiêu nếu bạn sử dụng một hàm thông thường

const sayHiStranger = [] => 'Hi, stranger'

0

Nó có phải là phần tử

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

31 không? . Nó sẽ là đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

22

Trên thực tế, ngữ cảnh đã thay đổi, vì

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 hiện đang ở bên trong một hàm toàn cục hoặc không liên kết đang được truyền dưới dạng đối số cho

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

2. Do đó, giá trị của từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 cũng đã thay đổi, vì giờ đây nó bị ràng buộc với phạm vi toàn cầu

Một thủ thuật phổ biến trong tình huống này là bao gồm một biến khác để lưu trữ giá trị của từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 để nó tiếp tục tham chiếu đến phần tử mong đợi — trong trường hợp này là phần tử

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

31

const sayHiStranger = [] => 'Hi, stranger'

1

Bạn cũng có thể sử dụng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

38 để giải quyết vấn đề

const sayHiStranger = [] => 'Hi, stranger'

2

Với chức năng mũi tên, vấn đề biến mất hoàn toàn. Đây là giá trị của

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 khi bạn sử dụng hàm mũi tên

const sayHiStranger = [] => 'Hi, stranger'

3

Lần này, bảng điều khiển ghi lại nút, đó là những gì chúng tôi muốn. Trên thực tế, chương trình sẽ thay đổi văn bản nút, vì vậy nó cần

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 để tham chiếu đến phần tử

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

31

const sayHiStranger = [] => 'Hi, stranger'

4

Hàm mũi tên không có ngữ cảnh

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 của riêng chúng. Chúng thừa hưởng giá trị của

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 từ cha mẹ và chính vì tính năng này mà chúng đưa ra lựa chọn tuyệt vời trong các tình huống như trên

Hàm mũi tên JavaScript không phải lúc nào cũng là công cụ phù hợp cho công việc

Các hàm mũi tên không chỉ là một cách viết hàm mới trong JavaScript. Chúng có những hạn chế riêng, có nghĩa là có những trường hợp bạn không muốn sử dụng chúng. Trình xử lý nhấp chuột trong bản demo trước là một trường hợp điển hình, nhưng nó không phải là trường hợp duy nhất. Hãy kiểm tra thêm một số

Các hàm mũi tên như các phương thức đối tượng

Các hàm mũi tên không hoạt động tốt như các phương thức trên các đối tượng. Đây là một ví dụ

Hãy xem xét đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

44 này, có một số thuộc tính và một số phương thức. Gọi

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

45 sẽ in ra thông báo với số lượt thích hiện tại và gọi

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

46 sẽ tăng số lượt thích lên một và sau đó in giá trị mới cùng với thông báo cảm ơn trên bảng điều khiển

const sayHiStranger = [] => 'Hi, stranger'

5

Thay vào đó, gọi phương thức

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

47 trả về “không xác định có lượt thích NaN” và gọi phương thức

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

48 trả về “Cảm ơn bạn đã thích undefined, hiện có lượt thích NaN”. Vì vậy,

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

49 và

const sayHiStranger = [] => 'Hi, stranger'

00 không tham chiếu được các thuộc tính của đối tượng lần lượt là

const sayHiStranger = [] => 'Hi, stranger'

01 và

const sayHiStranger = [] => 'Hi, stranger'

02

Một lần nữa, vấn đề nằm ở phạm vi từ vựng của các hàm mũi tên.

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 bên trong phương thức của đối tượng đang tham chiếu đến phạm vi của cha mẹ, trong trường hợp này là đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

22, không phải chính cha mẹ — nghĩa là, không phải đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

44

Tất nhiên, giải pháp là sử dụng một hàm thông thường

const sayHiStranger = [] => 'Hi, stranger'

6

Chức năng mũi tên với thư viện bên thứ 3

Một vấn đề khác cần lưu ý là các thư viện của bên thứ ba sẽ thường liên kết các lệnh gọi phương thức để giá trị

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 trỏ đến một thứ gì đó hữu ích

Ví dụ: bên trong trình xử lý sự kiện jQuery,

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 sẽ cấp cho bạn quyền truy cập vào phần tử DOM mà trình xử lý bị ràng buộc

const sayHiStranger = [] => 'Hi, stranger'

7

Nhưng nếu chúng ta sử dụng hàm mũi tên — như chúng ta đã thấy, không có ngữ cảnh

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 của riêng nó — chúng ta sẽ nhận được kết quả không mong muốn

const sayHiStranger = [] => 'Hi, stranger'

8

Đây là một ví dụ khác sử dụng Vue

const sayHiStranger = [] => 'Hi, stranger'

9

Bên trong hook

const sayHiStranger = [] => 'Hi, stranger'

09,

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 được liên kết với phiên bản Vue, vì vậy câu lệnh “Xin chào, Thế giới. ” thông báo được hiển thị

Tuy nhiên, nếu chúng ta sử dụng hàm mũi tên, thì

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 sẽ trỏ đến phạm vi cha, không có thuộc tính

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

02

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

0

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

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

03

Đôi khi, bạn có thể cần tạo một hàm với số lượng tham số không xác định. Ví dụ: giả sử bạn muốn tạo một hàm liệt kê loạt phim Netflix yêu thích của mình được sắp xếp theo sở thích. Tuy nhiên, bạn chưa biết mình sẽ bao gồm bao nhiêu sê-ri. JavaScript cung cấp đối tượng đối số. Đây là một đối tượng dạng mảng [không phải mảng đầy đủ] lưu trữ các giá trị được truyền cho hàm khi được gọi

Cố gắng triển khai chức năng này bằng chức năng mũi tên

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

1

Khi bạn gọi hàm, bạn sẽ nhận được thông báo lỗi sau.

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

04. Điều này có nghĩa là đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

03 không có sẵn bên trong arrow functions. Trên thực tế, việc thay thế chức năng mũi tên bằng một chức năng thông thường thực hiện thủ thuật

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

2

Vì vậy, nếu bạn cần đối tượng

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

03, bạn không thể sử dụng các hàm mũi tên

Nhưng nếu bạn thực sự muốn sử dụng chức năng mũi tên để sao chép chức năng tương tự thì sao? . Đây là cách bạn có thể viết lại chức năng của mình

const getNetflixSeries = [seriesName, releaseDate] => `The ${seriesName} series was released in ${releaseDate}`
// call the function
console.log[getNetflixSeries['Bridgerton', '2020'] ]
// output: The Bridgerton series was released in 2020

3

Phần kết luận

Bằng cách sử dụng các hàm mũi tên, bạn có thể viết các dòng đơn ngắn gọn với hàm trả về ngầm định và cuối cùng quên đi các mẹo cũ để giải quyết ràng buộc của từ khóa

// with parentheses: correct
const bestNetflixSeries = [seriesName = "Bridgerton"] => `${seriesName} is the best`
// outputs: "Bridgerton is the best"
console.log[bestNetflixSeries[]]

// no parentheses: error
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments [parentheses around the arrow-function may help]

6 trong JavaScript. Các hàm mũi tên cũng hoạt động hiệu quả với các phương thức mảng như

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// call the function
console.log[favoriteSeries["Bridgerton"]]
// output: "Let's watch it"

6,

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

10,

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

11,

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

12 và

const sayHiStranger = function [] {
  return 'Hi, stranger!'
}

13. Nhưng hãy nhớ. các hàm mũi tên không thay thế các hàm JavaScript thông thường. Hãy nhớ chỉ sử dụng các hàm mũi tên JavaScript khi chúng là công cụ phù hợp cho công việc

Nếu bạn có bất kỳ câu hỏi nào về các chức năng mũi tên hoặc cần bất kỳ trợ giúp nào để hiểu đúng về chúng, tôi khuyên bạn nên ghé thăm các diễn đàn thân thiện của SitePoint. Có rất nhiều lập trình viên am hiểu sẵn sàng trợ giúp

Chia sẻ bài viết này

Maria Antonietta Perna

Maria Antonietta Perna là một giáo viên và nhà văn kỹ thuật. Cô ấy thích mày mò với các tiêu chuẩn CSS thú vị và tò mò về việc dạy các phương pháp tiếp cận mã giao diện người dùng. Khi không viết mã hoặc viết web, cô ấy thích đọc sách triết học, đi bộ đường dài và đánh giá cao những món ăn ngon

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

Chức năng mũi tên là gì và tại sao nó được sử dụng?

[] => có nghĩa là gì trong JavaScript?

Sự khác biệt giữa chức năng mũi tên và chức năng bình thường là gì?