ES6-11箭头函数:简化回调函数,使得表达更加简洁

ES6 允许使用“箭头”(=>)定义函数。

//箭头函数
let f = v => v;

// 等同于
let f = function (v) {
  return v;
};
箭头函数的注意点 :
        1) 如果形参只有一个,则小括号可以省略
        2) 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的 执行结果
        3) 箭头函数 this 指向声明时所在作用域下 this 的值
        4) 箭头函数不能作为构造函数实例化
        5) 不能使用 arguments

写法

//1.通用写法

let fn = (arg1, arg2, arg3) => {
    return arg1 + arg2 + arg3;
}

//2.省略小括号的情况

let fn2 = num => {
return num * 10;
};


//3.省略花括号的情况

let fn3 = score => score * 20;


//4.this 指向声明时所在作用域中 this 的值

let fn4 = () => {
console.log(this);
}

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭头函数使得表达更加简洁。下面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。

const isEven = n => n % 2 === 0;
const square = n => n * n;

箭头函数的一个用处是简化回调函数。

/**
* 例1
*/

// 普通函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

/**
* 例2
*/
// 普通函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值