ES6 函数扩展

函数的扩展

函数参数的默认值

现在允许为函数的参数设置默认值，即直接写在参数定义的后面。

function add(a,b = 2){
  console.log(a + b)
}
add(1) // 3
add(1,1) // 2
add(1,'') // '1'

与解构赋值默认值结合使用

解构的相关规则在函数参数中都是成立的。对象解构要注意本质的东西，是键还是名。

// 写法一
function func1({a = 0, b = 0} = {}) {
  return [a, b];
}

// 写法二
function func2({a, b} = { a: 0, b: 0 }) {
  return [a, b];
}

func1() // [0,0]
func2() // [0,0]

func1({a: 2, b: 4}) // [2, 4]
func2({a: 2, b: 4}) // [2, 4]

func1({a: 2}) // [2, 0]
func2({a: 2}) // [2, undefined]

func1({b: 4}) // [0, 4]
func2({b: 4}) // [undefined, 4]

func1({}) // [0, 0]
func2({}) // [undefined, undefined]

func1({c:1}) // [0, 0]
func2({c:1}) // [undefined, undefined]

函数的 length 属性

函数的length属性，将返回没有指定默认值的参数个数，但指定默认值后，length属性将失真，也不包括 rest 参数（…param）。

(function (x) {}).length // 1
(function (x = 5) {}).length // 0
(function (x, y, z = 5) {}).length // 2

rest 参数

rest 参数（形式为...变量名），用于获取函数的多余参数，该变量将多余的参数放入数组中。

function add(...number) {
  let sum = 0;

  for (var val of number) {
    sum += val;
  }

  return sum;
}

add(1, 5, 1) // 7

rest 参数之后不能再有其他参数

function f(a,...b,c){} //

name 属性

返回该函数的函数名

function func(){}
func.name // "func"

箭头函数

使用"箭头" => 来定义函数；this 的指向问题是需要去注意的点

var func = p => p ;
// 等同于
var func = function(p){
  return p;
}

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

使用注意

• 箭头函数没有自己的this对象
• 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
• 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

不适用场合

第一个场合是定义对象的方法，不合适

const obj = {
  number: 9,
  func1:()=>{
    this.number ++;
  }
}

第二个场合是需要动态this的时候，不合适

var button = document.getElementById('btn');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});
// button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。

嵌套的箭头函数

const func =  ()=>{
  ...
  return  ()=>{
    ...
    return ()=>{
      ...
      return value
    }
  }
}

λ演算

let fun = f =>(x=>f(v=> x(x)(v)))(x=> f(v=> x(x)(v)))

尾调用（Tail Call）

指某个函数的最后一步是调用另一个函数

function fun(){
  let a = 1 ;
  let b = 2 ;
  let c = a + b;
  return f(c);
}

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

function fun(num){
	if( num < 1 ) return true;
  return n * fun(num - 1);
}
fun(10) // 3628800

参考文献

阮一峰老师的 ECMAScript 6 入门

---

点赞 评论 收藏 ~~ 今天的学习记录暂时到这...... ~~ 点赞 评论 收藏