programming javascript

Mũi tên mập nghĩa là gì trong javascript?

ES2015 đã giới thiệu một cách mới để xác định hàm trong JavaScript. chức năng mũi tên. Chúng có cú pháp ngắn gọn, có thể được nội tuyến, phù hợp tuyệt vời như các cuộc gọi lại và giải quyết từ vựng 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3

Tôi sẽ giải thích bằng một vài bước đơn giản về cách sử dụng hàm mũi tên trong JavaScript

Mục lục

1. cú pháp

Biểu tượng trung tâm của hàm mũi tên là mũi tên mập 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
4. Đó là nơi bắt nguồn của chức năng mũi tên tên

Hãy xác định chức năng mũi tên để chào một người

javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
5 là một hàm mũi tên. Ký hiệu 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
4 phân định các tham số 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
7 và thân hàm 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
8

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
9 là cách bạn gọi hàm mũi tên. Không có sự khác biệt giữa việc gọi hàm thông thường và hàm mũi tên

Nói chung, cú pháp của hàm mũi tên là thế này

________số 8

Liệt kê các tham số 

javascript
const object = {
  items: [1, 2],
  method[] {
    this === object; // => true
    this.items.forEach[[] => {
      this === object; // => true
    }];
  }
};
object.method[];
0, sau đó đặt mũi tên 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
4 và ở bên phải viết phần thân 
javascript
const object = {
  items: [1, 2],
  method[] {
    this === object; // => true
    this.items.forEach[[] => {
      this === object; // => true
    }];
  }
};
object.method[];
2

Hầu hết mọi nơi bạn có thể sử dụng chức năng thông thường, bạn cũng có thể sử dụng chức năng mũi tên. Ví dụ

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]

javascript
const object = {
  items: [1, 2],
  method[] {
    this === object; // => true
    this.items.forEach[[] => {
      this === object; // => true
    }];
  }
};
object.method[];
3 là một hàm mũi tên được sử dụng như một hàm gọi lại của phương thức 
javascript
const object = {
  items: [1, 2],
  method[] {
    this === object; // => true
    this.items.forEach[[] => {
      this === object; // => true
    }];
  }
};
object.method[];
4

2. giá trị này

Hàm mũi tên giải quyết từ vựng 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3

Sự khác biệt lớn nhất giữa hàm mũi tên và giá trị 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 bên trong hàm mũi tên luôn bằng 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 từ hàm bên ngoài

Nói cách khác, chức năng mũi tên không xác định ngữ cảnh thực thi của chính nó

Trong ví dụ sau, một hàm mũi tên được định nghĩa bên trong một phương thức

javascript
const object = {
  items: [1, 2],
  method[] {
    this === object; // => true
    this.items.forEach[[] => {
      this === object; // => true
    }];
  }
};
object.method[];

javascript
const object = {
  items: [1, 2],
  method[] {
    this === object; // => true
    this.items.forEach[[] => {
      this === object; // => true
    }];
  }
};
object.method[];
8 là một. Giá trị 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 bên trong hàm mũi tên bằng với 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 của hàm bên ngoài — và là 
javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
21

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 được giải quyết theo từ vựng là một tính năng tuyệt vời của các chức năng mũi tên. Khi sử dụng các cuộc gọi lại bên trong các phương thức, bạn chắc chắn rằng hàm mũi tên không xác định 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 của chính nó

Để so sánh, nếu bạn sử dụng một chức năng thông thường trong cùng một trường hợp

javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
2

Sau đó, bên trong hàm thông thường 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 bằng đối tượng toàn cục, là 
javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
25 trong môi trường trình duyệt

3. đối tượng đối số

Hàm mũi tên giải quyết từ vựng 

javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
26

Đối tượng ________ 226 bên trong hàm mũi tên bằng với ________ 226 của hàm bên ngoài

Hãy thử truy cập 

javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
26 bên trong hàm mũi tên

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
2

Đối tượng 

javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
26 bên trong hàm mũi tên bằng với các đối số của lệnh gọi hàm 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
21. 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
22, 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
23

Để truy cập các đối số trực tiếp của hàm mũi tên, hãy sử dụng 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
24

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
8

Tham số còn lại của 

javascript

  


const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
24 thu thập các đối số của lệnh gọi hàm mũi tên. 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
26

4. Sự làm ngắn lại

Trong các ví dụ trước, hàm mũi tên được sử dụng ở dạng dài. cả dấu ngoặc đơn và dấu ngoặc nhọn đều có mặt

May mắn thay, một lợi ích lớn của chức năng mũi tên là khả năng làm cho nó ngắn hơn. Cùng xem những tình huống bạn có thể làm được điều đó

4. 1 Bỏ qua dấu ngoặc đơn

Nếu hàm mũi tên có một tham số, có thể bỏ qua dấu ngoặc đơn xung quanh tham số này

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
1

Ví dụ, hàm 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
5 chỉ có một tham số 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
28. Điều đó tốt vì bạn có thể bỏ qua dấu ngoặc đơn xung quanh một tham số

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
4

Nhưng lưu ý rằng không phải lúc nào cũng có thể bỏ qua dấu ngoặc đơn

Nếu arrow function chấp nhận tham số còn lại, hủy cấu trúc tham số hoặc không có tham số, thì bạn phải giữ nguyên dấu ngoặc đơn

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
5

4. 2 Bỏ dấu ngoặc nhọn

Nếu thân hàm mũi tên chứa một câu lệnh, bạn có thể bỏ qua dấu ngoặc nhọn và và từ khóa ________ 329, khi đó biểu thức sẽ được trả về ngầm định

javascript
[param1, param2, ..., paramN] => { .. }
0

Theo ví dụ, hàm 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
5 chứa một câu lệnh, vì vậy hãy bỏ qua các dấu ngoặc nhọn xung quanh thân hàm

javascript
[param1, param2, ..., paramN] => { .. }
1

Trong hàm mũi tên _______ 381, biểu thức _______ 382 được trả về hoàn toàn

Biểu mẫu khi bỏ qua dấu ngoặc nhọn được đặt tên là. Chúng rất hữu ích để viết các cuộc gọi lại ngắn

javascript
[param1, param2, ..., paramN] => { .. }
2

Đối tượng chữ thường

Bỏ qua các dấu ngoặc nhọn hoạt động hoàn hảo trong hầu hết thời gian nhưng với một ngoại lệ

Khi trả về một đối tượng bằng chữ, bạn phải đặt chữ vào một cặp dấu ngoặc đơn

javascript
[param1, param2, ..., paramN] => { .. }
3

Mặt khác, JavaScript các dấu ngoặc nhọn của thân hàm với các dấu ngoặc nhọn của đối tượng bằng chữ và trả về 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
83

javascript
[param1, param2, ..., paramN] => { .. }
4

5. Nên và không nên

5. 1 Có thể không đồng bộ

Bạn có thể tạo hàm mũi tên không đồng bộ bằng cú pháp ________ 384

javascript
[param1, param2, ..., paramN] => { .. }
5

5. 2 Không thể là một phương pháp

Một phương thức là một chức năng đặc biệt gắn liền với một đối tượng. Bên trong một phương thức, giá trị 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 bằng với đối tượng mà phương thức được gọi trên đó

Hãy xem xét phương thức 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
86 trong đối tượng 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
87

javascript
[param1, param2, ..., paramN] => { .. }
6

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
88 là một. Bên trong phương thức ________ 386, bạn có thể truy cập giá trị đặc biệt 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3, tương đương với đối tượng mà phương thức được gọi — ________ 387

Tuy nhiên, bạn biết rằng 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 bên trong hàm mũi tên bằng với giá trị 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 của phạm vi bên ngoài. Đó là lý do tại sao bạn thường không thể sử dụng hàm mũi tên làm phương thức

javascript
[param1, param2, ..., paramN] => { .. }
7

Khi thực hiện một lời gọi phương thức 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
88 JavaScript ném một 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
15. Tất cả chỉ vì 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 bên trong hàm mũi tên bằng với đối tượng toàn cầu, đặc biệt là 
javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
25 khi chạy trong trình duyệt

5. 3 Không thể là hàm tạo

Một chức năng thông thường có thể là một trong các trường hợp

javascript
[param1, param2, ..., paramN] => { .. }
8

Tuy nhiên, chức năng mũi tên không thể được sử dụng làm hàm tạo

javascript
[param1, param2, ..., paramN] => { .. }
9

Khi 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
18 là một hàm mũi tên, việc gọi 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
19 sẽ ném một 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
40

5. 4 Không thể là hàm tạo

Cuối cùng, chức năng mũi tên không thể được sử dụng làm chức năng tạo

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
0

Khi sử dụng dấu hoa thị 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
41 để đánh dấu chức năng mũi tên là trình tạo, JavaScript sẽ đưa ra lỗi cú pháp

Tất nhiên, các chức năng thông thường được đánh dấu là trình tạo không có vấn đề

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
1

6. Tóm lược

Biểu tượng trung tâm của hàm mũi tên là mũi tên mập 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
4. ở phía bên trái của nó là các tham số và ở phía bên phải là thân hàm

________số 8

Chức năng mũi tên có thể được rút ngắn. khi nó có một tham số, bạn có thể bỏ qua dấu ngoặc đơn 

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
43 và khi nó có một câu lệnh, bạn có thể bỏ qua dấu ngoặc nhọn 
javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
44

javascript
const numbers = [4, 5, 2, 6];
const doubled = numbers.map[[number] => {
  return number * 2;
}];
doubled; // => [8, 10, 4, 12]
3 và 
javascript
const greet = [who] => {
  return `Hello, ${who}!`;
};
greet['Eric Cartman']; // => 'Hello, Eric Cartman!'
26 bên trong hàm mũi tên được giải quyết theo từ vựng, nghĩa là chúng được lấy từ phạm vi hàm bên ngoài

Chức năng mũi tên có một số hạn chế. bạn không thể sử dụng nó như một phương thức trên một đối tượng, hàm tạo hoặc hàm tạo

Các hàm mũi tên nhẹ, nội tuyến và dễ đọc [] — sử dụng chúng bao nhiêu tùy thích trong mã của bạn

Còn sự khác biệt giữa một mũi tên và một hàm thông thường thì sao?

Bạn có thích sử dụng các chức năng mũi tên hoặc thông thường?

Thích bài viết?

đề xuất cải tiến

Bài đăng chất lượng vào hộp thư đến của bạn

Tôi thường xuyên xuất bản bài viết có chứa

  • Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
  • Tổng quan về các tính năng JavaScript mới
  • Cách sử dụng TypeScript và cách gõ
  • Thiết kế phần mềm và thực hành mã hóa tốt

Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn

Đặt mua

Tham gia cùng 6845 người đăng ký khác

Giới thiệu về Dmitri Pavlutin

Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm [nhưng không giới hạn] uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉

Ý nghĩa của => trong JavaScript là gì?

Nó là gì. Đây là hàm mũi tên . Các hàm mũi tên là một cú pháp ngắn, được giới thiệu bởi ECMAscript 6, có thể được sử dụng tương tự như cách bạn sẽ sử dụng các biểu thức hàm. Nói cách khác, bạn có thể thường xuyên sử dụng chúng thay cho các biểu thức như function [foo] {. }.

Lợi thế của chức năng mũi tên béo trong JavaScript là gì?

Các hàm mũi tên béo có trả về ngầm định . // Sử dụng biểu thức hàm. hàm isOpen[giá trị] { return. giá trị. } // Sử dụng hàm Fat Arrow, trả về là ẩn.

Làm cách nào để tạo chức năng mũi tên béo trong js?

Hàm mũi tên JavaScript .
Trước mũi tên. xin chào = hàm[] {.
Với chức năng mũi tên. xin chào = [] => {.
Hàm mũi tên Giá trị trả về theo mặc định. xin chào = [] => "Xin chào thế giới. “;.
Hàm mũi tên có tham số. xin chào = [val] => "Xin chào" + val;.
Hàm mũi tên không có dấu ngoặc đơn. xin chào = val => "Xin chào" + val;

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

Một cách dễ dàng để nắm bắt điều này là hãy nhớ rằng hàm mũi tên cong/mũi tên kép là hàm trả về [các] hàm khác một cách ngầm định . Theo logic này, bạn cũng có thể có ba chức năng mũi tên, v.v.

Bài Viết Liên Quan

Gán giá trị mảng cho biến JavaScript
Kiểm tra null PHP
1 bát cháo thịt bao nhiêu calo
JavaScript là 0 chẵn hay lẻ?
CBU Application deadline 2023
Chạy tệp PHP vscode
Cách tách chuỗi và số trong php?
Làm cách nào để chuyển đổi danh sách từ điển thành từ điển đơn trong Python?
Special days Calendar 2023
Làm cách nào để cập nhật kho sản phẩm WooC Commerce?
Làm cách nào để chuyển đổi dữ liệu byte thành chuỗi trong Python?
Có một chỉ số trong python?
Python có sử dụng đối tượng không?
Super bowl 2023 national anthem cupcake
Python tự sao chép
Cách định vị video trong html
Nhà để xe kỹ thuật số Google Python
Mảng JavaScript với ví dụ là gì?
Thêm chuỗi leetcode python
Ai sẽ là tổng thống vào năm 2024?

Toplist mới

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
7 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
7 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
7 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
7 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
7 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
7 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
7 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
7 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
7 tháng trước

Bài mới nhất

Găng tay cao su phù hợp với hóa chất gì năm 2024
Bảo vệ trẻ em thuộc lĩnh vực của bộ nào năm 2024
Khắc phục lỗi khi lưu file khi dùng dev c năm 2024
Đi hàn quốc vào mùa nào đẹp nhất năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Bài Tập Địa Điểm Hay Mẹo Hay Học Tốt Nghĩa của từ Công Nghệ Khỏe Đẹp bao nhiêu Top List Tiếng anh Bao nhiêu Sản phẩm tốt Xây Đựng Ngôn ngữ javascript Ở đâu Đại học Hướng dẫn Bài tập Tại sao Dịch So Sánh Máy tính Món Ngon mẹo hay Bao lâu Thế nào So sánh Khoa Học Vì sao Lớp 9 Lớp 10