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

本文详细介绍了ES6中的箭头函数用法,包括通用写法、参数和返回值的简写形式,以及this指向的特性。特别强调了箭头函数不能用作构造函数以及其在回调函数中的优势。示例展示了箭头函数如何简化代码,如对象解构、回调函数的使用等。

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 指向,用来指定回调函数会非常合适
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值