基本用法
var f = v => v;
// equal
var f = function (v) {
return v
}
// ()
vaf f = () => 5
var f = function() { reurn 5 }
var sum = (num1, num2) => num1 + num2
var fum = function(num1, num2) {
return num1 + num2
}
// {}
var sum = (num1, num2) => { reutrn num1 + num2 }
// 返回一个对象
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, 2, 3].map(function(x) => {
return x * x
})
[1, 2, 3].map(v => v * v)
let result = values.sort(function(a, b) => {
return a - b
})
let result = values.sort((a, b) => a - b)
const numbers = (...nums) => nums
作用
- 箭头函数 更加简洁
- 函数函数简化回调函数
- 箭头函数可以与变量解构结合使用
注意点
- 函数体内的this,就是定义时的对象,而不是使用时的对象
- 不可以当作构造函数,即不可以使用new 命令,否则会抛出一个错误
- 不可以使用arguments 对象,该对象在箭头函数内不存在,可以使用rest参数代替
- 不可以使用yield命令,箭头函数不能用作Generator函数。
不适用场合
第一个场合:定义对象的方法,且该方法内部包含this
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
第二个场合:需要动态this 时,也不应使用箭头函数
var button = document.getElementById('press')
button.addEventListener('click', () => {
this.classList.toggle('on')
})
点击按钮报错,因为箭头函数的this 就是全局对象;若改为普通函数,this 就会动态指向被点击的按钮对象。
另外:如果函数体很复杂(有许多行,或者函数内部有大量的读写操作),这时也不应该使用箭头函数,而是使用普通函数,这样可以提高函数的可读性。
嵌套的箭头函数
箭头函数内部还可以使用箭头函数
function insert(value) {
return {
into: function (array) {
return {
after: function (afterValue) {
array.splice(array.indexOf(afterValue) + 1, 0, value)
return array
}
}
}
}
}
const insert = (value) => ({into: (array) => {
after: (afterValue) => {
array.splice(array.indexOf(afterValue) + 1, 0, value)
return array
}
}})