基本用法

  1. var f = v => v;
  2. // equal
  3. var f = function (v) {
  4. return v
  5. }
  6. // ()
  7. vaf f = () => 5
  8. var f = function() { reurn 5 }
  9. var sum = (num1, num2) => num1 + num2
  10. var fum = function(num1, num2) {
  11. return num1 + num2
  12. }
  13. // {}
  14. var sum = (num1, num2) => { reutrn num1 + num2 }
  15. // 返回一个对象
  16. let getTempItem = id => ({id: id, name: 'Temp'})
  17. // 箭头函数与变量解构结合使用
  18. const full = ({ first, last }) => first + '' + last
  19. function full(person) {
  20. return person.first + '' + person.last
  21. }
  22. // 简洁
  23. const isEven = n => n % 2 === 0
  24. const square = n => n * n;
  25. // 简化回调函数
  26. [1, 2, 3].map(function(x) => {
  27. return x * x
  28. })
  29. [1, 2, 3].map(v => v * v)
  30. let result = values.sort(function(a, b) => {
  31. return a - b
  32. })
  33. let result = values.sort((a, b) => a - b)
  34. const numbers = (...nums) => nums

作用

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

注意点

  1. 函数体内的this,就是定义时的对象,而不是使用时的对象
  2. 不可以当作构造函数,即不可以使用new 命令,否则会抛出一个错误
  3. 不可以使用arguments 对象,该对象在箭头函数内不存在,可以使用rest参数代替
  4. 不可以使用yield命令,箭头函数不能用作Generator函数。

不适用场合

第一个场合:定义对象的方法,且该方法内部包含this

  1. const cat = {
  2. lives: 9,
  3. jumps: () => {
  4. this.lives--;
  5. }
  6. }

第二个场合:需要动态this 时,也不应使用箭头函数

  1. var button = document.getElementById('press')
  2. button.addEventListener('click', () => {
  3. this.classList.toggle('on')
  4. })

点击按钮报错,因为箭头函数的this 就是全局对象;若改为普通函数,this 就会动态指向被点击的按钮对象。

另外:如果函数体很复杂(有许多行,或者函数内部有大量的读写操作),这时也不应该使用箭头函数,而是使用普通函数,这样可以提高函数的可读性。

嵌套的箭头函数

箭头函数内部还可以使用箭头函数

  1. function insert(value) {
  2. return {
  3. into: function (array) {
  4. return {
  5. after: function (afterValue) {
  6. array.splice(array.indexOf(afterValue) + 1, 0, value)
  7. return array
  8. }
  9. }
  10. }
  11. }
  12. }
  1. const insert = (value) => ({into: (array) => {
  2. after: (afterValue) => {
  3. array.splice(array.indexOf(afterValue) + 1, 0, value)
  4. return array
  5. }
  6. }})