ES6 函数的扩展之箭头函数

基本用法

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

var f = v => v
// 等同于
var f = function (v) {
  return v
}

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分

var f = () => 5
// 等同于
var f = function () { return 5 }

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
  return num1 + num2
}

如果箭头函数的代码块部分多于一条语句,需使用大括号括起来,并使用 return 语句返回

var sum = (num1, num2) => {
    let num3 = 3
    return num1 + num2 + num3
}

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

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

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

如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法

let fn = () => void doesNotReturn()

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

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, 2, 3].map(function (x) {
  return x * x
})

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

箭头函数与 rest 的结合

下面是 rest 参数与箭头函数结合的例子

const numbers = (...nums) => nums
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail]
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

提示

  • 箭头函数没有 this,因此函数体内的 this 就是外层作用域的 this
  • 不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误
  • 不可以使用 arguments 对象,该对象在函数体内不存在,如果要用,可以用 rest 参数代替
  • 不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数
  • 不能用 call、apply、bind 这些方法去改变 this 的指向

举例:

// 示例一
const cat = {
  lives: 9,
  jumps: () => {
    this.lives--
  }
}

// 示例二
const cat = {
  lives: 9,
  jumps: function () {
    this.lives--
  }
}

示例一中,调用 cat.jumps 时 this 指向全局对象,因此没有得到预期结果
示例二中,调用 cat.jumps 时 this 指向 cat,可以得到预期结果

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1028.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号