函数的扩展

1.函数参数的默认值

es5写法：

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

es6写法：

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

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

2.function Point(x = 0, y = 0) { this.x = x; this.y = y; } const p = new Point(); p // { x: 0, y: 0 }

默认声明的参数，不能用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) {
  // ...
}
// 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

总结：函数默认值的4大特点。

1.参数直接使用默认值不需要再判断。

2.使用参数默认值之后不能再使用let和const声明。

3.使用参数默认值不能有重复参数。

4.参数默认值是惰性求值，每次都会重新计算默认值表达式的值。

二：与结构赋值默认值结合使用

1.下面代码单纯结构赋值，并没有使用默认值。

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调用时没提供参数，直接是foo（）；就会报错。

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

foo() // undefined 5

上面代码参数使用了解构赋值，并且使用了默认值。所以就不会报错。

结论：解构赋值无论是对象还是数组，还是字符串，只要没有使用默认值，那么调用函数没有传对默认参数都会报错。

猜你喜欢