15 JavaScript ES6中的箭头函数

行乐

15 JavaScript ES6中的箭头函数

• 什么是箭头函数
  ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。
  
• 基本语法
  

1. // 箭头函数
2. let fn = (name) => {
3.     // 函数体
4.     return `Hello ${name} !`;
5. };
7. // 等同于
8. let fn = function (name) {
9.     // 函数体
10.     return `Hello ${name} !`;
11. };

复制代码

箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数，省去关键字function。
函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中.

• 箭头函数的参数
  

如果箭头函数没有参数，写空括号。

1. //没有参数，写空括号
2.     let fn = () => {
3.         console.log('hello');
4.     };

复制代码

如果箭头函数有一个参数，也可以省去包裹参数的括号。

1. //只有一个参数，可以省去参数括号
2.     let fn = name => {
3.         console.log(`hello ${name}!`)
4.     };

复制代码

如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。

1.     let fn = (val1, val2, val3, val4) => {
2.         return [val1, val2, val3, val4];
3.     }

复制代码

• 箭头函数的函数体
  

如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }。

1. //返回某个简单变量val
2. let f = val => val;
3. // 等同于
4. let f = function (val) { return val };
5. //返回一个简单的js表达式num1+num2
6. let sum = (num1, num2) => num1 + num2;
7. // 等同于
8. let sum = function(num1, num2) {
9.   return num1 + num2;
10. };

复制代码

如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。

1. //错误写法—花括号会被解释为函数体
2.     let getItem = id => {
3.         id: id,
4.         name: 'gaby'
5.     };
6. //正确写法
7.     let getItem = id => ({
8.         id: id,
9.         name: 'gaby'
10.     });

复制代码

如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字

1. let fn = () => void doesNotReturn();

复制代码

箭头函数用于回调函数

1. //栗子1
2. //普通函数
3.     [1, 2, 3].map(function (x) {
4.         return x + x;
5.     });
6. //ES6箭头函数
7. [1, 2, 3].map(x => x + x);

复制代码

1. //栗子2
2. //普通函数
3.     var result = [2, 4, 5, 1, 6].sort(function (a, b) {
4.         return a - b;
5.     });
6. //ES6箭头函数
7.         var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);

复制代码

来源:https://www.cnblogs.com/zczhaod/p/17648733.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！