Skip to content

Commit e856f9e

Browse files
committed
docs(function): edit 函数参数的解构赋值
1 parent 8a214a6 commit e856f9e

File tree

1 file changed

+17
-9
lines changed

1 file changed

+17
-9
lines changed

docs/function.md

+17-9
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ log('Hello', 'China') // Hello China
1717
log('Hello', '') // Hello World
1818
```
1919

20-
上面代码检查函数`log`的参数`y`有没有赋值,如果没有,则指定默认值为`World`。这种写法的缺点在于,如果参数`y`赋值了,但是对应的布尔值为`false`,则该赋值不起作用。就像上面代码的最后一行,参数`y`等于空字符,结果被改为默认值。
20+
上面代码检查函数`log()`的参数`y`有没有赋值,如果没有,则指定默认值为`World`。这种写法的缺点在于,如果参数`y`赋值了,但是对应的布尔值为`false`,则该赋值不起作用。就像上面代码的最后一行,参数`y`等于空字符,结果被改为默认值。
2121

2222
为了避免这个问题,通常需要先判断一下参数`y`是否被赋值,如果没有,再等于默认值。
2323

@@ -93,7 +93,7 @@ x = 100;
9393
foo() // 101
9494
```
9595

96-
上面代码中,参数`p`的默认值是`x + 1`。这时,每次调用函数`foo`,都会重新计算`x + 1`,而不是默认`p`等于 100。
96+
上面代码中,参数`p`的默认值是`x + 1`。这时,每次调用函数`foo()`,都会重新计算`x + 1`,而不是默认`p`等于 100。
9797

9898
### 与解构赋值默认值结合使用
9999

@@ -110,7 +110,7 @@ foo({x: 1, y: 2}) // 1 2
110110
foo() // TypeError: Cannot read property 'x' of undefined
111111
```
112112

113-
上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数`foo`的参数是一个对象时,变量`x``y`才会通过解构赋值生成。如果函数`foo`调用时没提供参数,变量`x``y`就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
113+
上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数`foo()`的参数是一个对象时,变量`x``y`才会通过解构赋值生成。如果函数`foo()`调用时没提供参数,变量`x``y`就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
114114

115115
```javascript
116116
function foo({x, y = 5} = {}) {
@@ -136,7 +136,7 @@ fetch('http://example.com')
136136
// 报错
137137
```
138138

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

141141
```javascript
142142
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
@@ -149,7 +149,19 @@ fetch('http://example.com')
149149

150150
上面代码中,函数`fetch`没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量`method`才会取到默认值`GET`
151151

152-
作为练习,请问下面两种写法有什么差别?
152+
注意,函数参数的默认值生效以后,参数解构赋值依然会进行。
153+
154+
```javascript
155+
function f({ a, b = 'world' } = { a: 'hello' }) {
156+
console.log(b);
157+
}
158+
159+
f() // world
160+
```
161+
162+
上面示例中,函数`f()`调用时没有参数,所以参数默认值`{ a: 'hello' }`生效,然后再对这个默认值进行解构赋值,从而触发参数变量`b`的默认值生效。
163+
164+
作为练习,大家可以思考一下,下面两种函数写法有什么差别?
153165

154166
```javascript
155167
// 写法一
@@ -161,11 +173,7 @@ function m1({x = 0, y = 0} = {}) {
161173
function m2({x, y} = { x: 0, y: 0 }) {
162174
return [x, y];
163175
}
164-
```
165176

166-
上面两种写法都对函数的参数设定了默认值,区别是写法一函数参数的默认值是空对象,但是设置了对象解构赋值的默认值;写法二函数参数的默认值是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。
167-
168-
```javascript
169177
// 函数没有参数的情况
170178
m1() // [0, 0]
171179
m2() // [0, 0]

0 commit comments

Comments
 (0)