JS ES6 函数的拓展

Question

函数参数的默认值

ES6 之前

function log (x, y) {
  if (typeof y === 'undefined') {
    y = 'World'
  }
  console.log(x, y)
}

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

ES6

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

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

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

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

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

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

// 报错
function foo (x, x, y = 1) {     //let 声明了两次
  // ...
}
// 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

作为练习，请问下面两种写法有什么差别？

// 写法一
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]

函数的 length 属性

指定了默认值以后，函数的 length 属性，将返回没有指定默认值的参数个数。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
(function(...args) {}).length // 0
(function (a = 0, b, c) {}).length // 0 ?
(function (a, b = 1, c) {}).length // 1 ?