箭头函数

基本用法

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

作用

1. 箭头函数 更加简洁
2. 函数函数简化回调函数
3. 箭头函数可以与变量解构结合使用

注意点

1. 函数体内的this,就是定义时的对象，而不是使用时的对象
2. 不可以当作构造函数，即不可以使用new 命令，否则会抛出一个错误
3. 不可以使用arguments 对象，该对象在箭头函数内不存在，可以使用rest参数代替
4. 不可以使用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
  }
}})