函数的扩展

56 阅读1分钟

1. ES5之前

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

2. ES6

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

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

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

function foo({x,y=5} = {}){
  console.log(x,y)  
}
foo() //undefined 5
// 写法一
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]; 因为默认x,y已经赋值为0,所以输出为0,0
m2({}) // [undefined, undefined]  因为默认只是申明了x,y,未初始化的值为undefined,所以输出为undefined,undefined

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

4. rest