ES6

箭头函数

ES6

Posted by BY Stone on August 21, 2017

箭头函数和普通函数的区别是:

  • 箭头函数没有this,函数内部的this来自于父级最近的非箭头函数,并且不能改变this的指向。
  • 箭头函数没有super
  • 箭头函数没有arguments
  • 箭头函数没有new.target绑定。
  • 不能使用new
  • 没有原型
  • 不支持重复的命名参数。

箭头函数的简单理解

1、箭头函数的左边表示输入的参数,右边表示输出的结果。

const s = a => a
console.log(s(2)) // 2

2、箭头函数中,最重要的this报错将不再成为你每天都担心的bug。

3、箭头函数还可以输出对象,在react的action中就推荐这种写法。

const action = (type, a) => ({
  type: "TYPE",
  a
})

4、支持立即执行函数表达式写法

const test = ((id) => {
  return {
    getId() {
      console.log(id)
    }
  }
})(18)
test.getId() // 18

5、箭头函数给数组排序

const arr = [10, 50, 30, 40, 20]
const s = arr.sort((a, b) => a - b)
console.log(s) // [10,20,30,40,50]

尾调用优化

尾调用是什么鬼?

尾调用是指在函数return的时候调用一个新的函数,由于尾调用的实现需要存储到内存中,在一个循环体中,如果存在函数的尾调用,你的内存可能爆满或溢出。

ES6中,引擎会帮你做好尾调用的优化工作,你不需要自己优化,但需要满足下面3个要求:

1、函数不是闭包

2、尾调用是函数最后一条语句

3、尾调用结果作为函数返回

一个满足以上要求的函数如下所示:
"use strict";   
function a() {
  return b();
}
下面的都是不满足的写法:
//没有return不优化
"use strict";
function a() {
  b();
}

//不是直接返回函数不优化
"use strict";
function a() {
  return 1 + b();
}

//尾调用是函数不是最后一条语句不优化
"use strict";
function a() {
  const s = b();
  return s
}

//闭包不优化
"use strict";
function a() {
  const num = 1
  function b() {
    return num
  }
  return b
}
尾调用实际用途——递归函数优化

在ES5时代,我们不推荐使用递归,因为递归会影响性能。

但是有了尾调用优化之后,递归函数的性能有了提升。

//新型尾优化写法
"use strict";  
function a(n, p = 1) {
  if(n <= 1) {
    return 1 * p
  }
  let s = n * p
  return a(n - 1, s)
}
//求 1 x 2 x 3的阶乘
let sum = a(3)
console.log(sum) // 6