ES6函数参数的默认值

基本用法

在ES6之前，不能直接将函数的参数指定默认值，只能采用变通的方法

function fn(x,y) {
    y = y || 'World'
    console.log(x,y)
}

fn('Hello')  // Hello World
fn('Hello','China')  // Hello China
fn('Hello','')  // Hello World

这段代码 在调用函数时，y没有被赋值，所以就指定y为默认值：World，
但是这种写法的缺点在于，如果参数y被赋值，但是如果对应的值为false，则该赋值就不起作用，
就像最后一行代码，y的值为空字符，则结果被改成默认值

所以为了避免这个问题，我们需要判断一个参数y是否被赋值，如果没有，在等于默认值

if (typeof y === 'undefined') {
  y = 'World';
}

而在ES6允许给函数的参数设置默认值，直接在参数后面定义即可

function fn(x,y='World') {
     console.log(x, y);
}

fn('Hello') // Hello World
fn('Hello', 'China') // Hello China
fn('Hello', '') // Hello

这样对比可以看到ES6的写法比ES5简洁许多

除了简洁，ES6的写法还有两个好处：

首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；

其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

参数变量是默认声明的，所以不能用let或const再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

上面代码中，参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。

使用参数默认值时，参数不能同名

// 不报错
function foo(x, x, y) {
  // ...
}

没有设置把参数默认值，参数同名不会报错

// 报错
function foo(x, x, y = 1) {
  // ...
}
把参数设置默认值了，参数同名则会报错
// SyntaxError: Duplicate parameter name not allowed in this context

另外，一个容易忽略的地方是，参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101


参数p的默认值为x+1，这时，每调用一次函数foo(),都会重新计算x+1，而不是默认p=100

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

参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo()的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数foo()调用时没提供参数，变量x和y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

如果没有提供参数，函数foo的参数默认为一个空对象

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 报错

上面代码中，如果函数fetch()的第二个参数是一个对象，就可以为它的三个属性设置默认值。这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

function f({ a, b = 'world' } = { a: 'hello' }) {
  console.log(b);
}

f() // world

上面示例中，函数f()调用时没有参数，所以参数默认值{ a: 'hello' }生效，然后再对这个默认值进行解构赋值，从而触发参数变量b的默认值生效。

作为练习，大家可以思考一下，下面两种函数写法有什么差别？

// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值，y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]