函数的扩展

基本使用

es6之前，不能直接为函数的参数指定默认值，只能采用普通的方法

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

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

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

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

• 可以方便查看哪些参数是可以省略的
• 有利于代码优化

注意

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

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

且默认值是惰性求值的

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

foo() // 100

x = 100;
foo() // 101

结构赋值使用

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

对对象的结构赋值默认值，没有使用参数的默认值

如果没有对函数进行传参，会报错

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

foo() // undefined 5

注意

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

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

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

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

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

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

对第二个参数对象设置默认值