ES 6 系列之函数的扩展

函数参数默认值

基本用法

我们来介绍一下函数的默认值，在 ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方式。

我们先来看看 ES6 之前怎么给函数参数添加默认值

function add(x, y) {
  y = y || 1;
  return x + y;
}
console.log(add(1)); // 2
console.log(add(1, 2)); // 3

我们做的是检查 y 的值有没有传入，如果没有则会默认被赋值为 1。这种方式是有缺点的，如果传入的值为布尔值 false，那么传入的值会变得无效。空字符串也是会有布尔值 false 一样的结果。

那么现在我们来看看 ES6 允许设置默认值的写法吧

function add(x = 1, y = 2) {
  return x + y;
}
console.log(add()); // 3
console.log(add(3)); // 5
console.log(add(2, 3)); // 5

从上面的代码就可以看到，一眼就可以判断出参数是否可省略，且写法比 ES5 简洁许多

注意：

• 函数的参数变量是默认声明的，所以不能使用 let 或者 const 再次声明。
• 参数默认值的位置，必须是在函数的尾部，如果不是在尾部，否则是没法省略的。

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

function add([x, y] = [1, 2]) {
  return x + y;
}

来我们还是先用 add 函数来举例，上面就是用的数组的解构赋值，可以个传入的数组进行解构赋值，默认解构赋值。

函数的 length

很奇怪吧，函数居然能有 length，来我们在这里简单提一下函数的 length 是什么。

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

没错，就是这样。它的 length 就是函数必须传入的参数，也就是函数的所有参数减去制定了默认值的参数个数。 如果设置了默认值的参数不是尾参数，那么 length 属性也不再计入后面的参数了。

作用域

---

rest 参数

ES6 中引入来 rest 参数（形式为 ...变量名 ），用于获取函数的多余参数，替代 arguments 对象。

我们还是那 add 函数来举例吧。

function add(...values) {
  let sum = 0;
  for (let num of values) {
    sum += num;
  }
  return sum;
}
console.log(add(1, 2, 3, 4, 5)); // 15

这里就可以看出来，rest 参数是做什么用的，使用它之后，参数可以无限传入，不限制定量。

函数的 length 不包括 rest 参数。

---

箭头函数

基本使用

我们来看看 ES6 中增加的箭头函数( => )，来我们还是用 add 函数来举例子，

function add(a, b) {
  return a + b;
}

// 等价于
const add = (a, b) => {
  return a + b;
};

来看看更简单的写法

function multiply(n) {
  return n * n;
}
// 等价于
const multiply = (n) => n * n;

有时候 return 可以省略。

当然，箭头函数可以嵌套使用，会大大增加代码量

function add(x) {
  return function (y) {
    return function (z) {
      return x + y + z;
    };
  };
}

上面是普通的写法，然后我们来看一下箭头函数的写法

const add = (x) => (y) => (z) => x + y + z;

对比一下，应该就知道啦，两种的写法简便程度差别真的很大。

注意点

在这里，稍微提一下箭头函数的相关注意点：

• 箭头函数没有自己的 this 对象
• 不可以当作构造函数，即不可使用 new 命令
• 不可以使用 arguments 对象，不存在该对象，但是可以使用 rest 参数代替
• 不可以使用 yield 命令，因此箭头函数不能使用 Generator 函数

在这里不特点讲述，如果想要具体了解，可以看一下我的另一篇文章Javasctip - this 指向，文章后续补齐。