1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

docs(function): edit 函数参数的解构赋值

This commit is contained in:
ruanyf 2022-04-09 20:01:36 +08:00
parent 8a214a6ead
commit e856f9e4cb

View File

@ -17,7 +17,7 @@ log('Hello', 'China') // Hello China
log('Hello', '') // Hello World log('Hello', '') // Hello World
``` ```
上面代码检查函数`log`的参数`y`有没有赋值,如果没有,则指定默认值为`World`。这种写法的缺点在于,如果参数`y`赋值了,但是对应的布尔值为`false`,则该赋值不起作用。就像上面代码的最后一行,参数`y`等于空字符,结果被改为默认值。 上面代码检查函数`log()`的参数`y`有没有赋值,如果没有,则指定默认值为`World`。这种写法的缺点在于,如果参数`y`赋值了,但是对应的布尔值为`false`,则该赋值不起作用。就像上面代码的最后一行,参数`y`等于空字符,结果被改为默认值。
为了避免这个问题,通常需要先判断一下参数`y`是否被赋值,如果没有,再等于默认值。 为了避免这个问题,通常需要先判断一下参数`y`是否被赋值,如果没有,再等于默认值。
@ -93,7 +93,7 @@ x = 100;
foo() // 101 foo() // 101
``` ```
上面代码中,参数`p`的默认值是`x + 1`。这时,每次调用函数`foo`,都会重新计算`x + 1`,而不是默认`p`等于 100。 上面代码中,参数`p`的默认值是`x + 1`。这时,每次调用函数`foo()`,都会重新计算`x + 1`,而不是默认`p`等于 100。
### 与解构赋值默认值结合使用 ### 与解构赋值默认值结合使用
@ -110,7 +110,7 @@ foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined foo() // TypeError: Cannot read property 'x' of undefined
``` ```
上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数`foo`的参数是一个对象时,变量`x``y`才会通过解构赋值生成。如果函数`foo`调用时没提供参数,变量`x``y`就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。 上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数`foo()`的参数是一个对象时,变量`x``y`才会通过解构赋值生成。如果函数`foo()`调用时没提供参数,变量`x``y`就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
```javascript ```javascript
function foo({x, y = 5} = {}) { function foo({x, y = 5} = {}) {
@ -136,7 +136,7 @@ fetch('http://example.com')
// 报错 // 报错
``` ```
上面代码中,如果函数`fetch`的第二个参数是一个对象,就可以为它的三个属性设置默认值。这种写法不能省略第二个参数,如果结合函数参数的默认值,就可以省略第二个参数。这时,就出现了双重默认值。 上面代码中,如果函数`fetch()`的第二个参数是一个对象,就可以为它的三个属性设置默认值。这种写法不能省略第二个参数,如果结合函数参数的默认值,就可以省略第二个参数。这时,就出现了双重默认值。
```javascript ```javascript
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) { function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
@ -149,7 +149,19 @@ fetch('http://example.com')
上面代码中,函数`fetch`没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量`method`才会取到默认值`GET` 上面代码中,函数`fetch`没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量`method`才会取到默认值`GET`
作为练习,请问下面两种写法有什么差别? 注意,函数参数的默认值生效以后,参数解构赋值依然会进行。
```javascript
function f({ a, b = 'world' } = { a: 'hello' }) {
console.log(b);
}
f() // world
```
上面示例中,函数`f()`调用时没有参数,所以参数默认值`{ a: 'hello' }`生效,然后再对这个默认值进行解构赋值,从而触发参数变量`b`的默认值生效。
作为练习,大家可以思考一下,下面两种函数写法有什么差别?
```javascript ```javascript
// 写法一 // 写法一
@ -161,11 +173,7 @@ function m1({x = 0, y = 0} = {}) {
function m2({x, y} = { x: 0, y: 0 }) { function m2({x, y} = { x: 0, y: 0 }) {
return [x, y]; return [x, y];
} }
```
上面两种写法都对函数的参数设定了默认值,区别是写法一函数参数的默认值是空对象,但是设置了对象解构赋值的默认值;写法二函数参数的默认值是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。
```javascript
// 函数没有参数的情况 // 函数没有参数的情况
m1() // [0, 0] m1() // [0, 0]
m2() // [0, 0] m2() // [0, 0]