Skip to content

Commit

Permalink
docs(function): edit 函数参数的解构赋值
Browse files Browse the repository at this point in the history
  • Loading branch information
ruanyf committed Apr 9, 2022
1 parent 8a214a6 commit e856f9e
Showing 1 changed file with 17 additions and 9 deletions.
26 changes: 17 additions & 9 deletions docs/function.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
```

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

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

Expand Down Expand Up @@ -93,7 +93,7 @@ x = 100;
foo() // 101
```

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

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

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

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

```javascript
function foo({x, y = 5} = {}) {
Expand All @@ -136,7 +136,7 @@ fetch('http:https://example.com')
// 报错
```

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

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

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

作为练习,请问下面两种写法有什么差别?
注意,函数参数的默认值生效以后,参数解构赋值依然会进行。

```javascript
function f({ a, b = 'world' } = { a: 'hello' }) {
console.log(b);
}

f() // world
```

上面示例中,函数`f()`调用时没有参数,所以参数默认值`{ a: 'hello' }`生效,然后再对这个默认值进行解构赋值,从而触发参数变量`b`的默认值生效。

作为练习,大家可以思考一下,下面两种函数写法有什么差别?

```javascript
// 写法一
Expand All @@ -161,11 +173,7 @@ function m1({x = 0, y = 0} = {}) {
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
```

上面两种写法都对函数的参数设定了默认值,区别是写法一函数参数的默认值是空对象,但是设置了对象解构赋值的默认值;写法二函数参数的默认值是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。

```javascript
// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]
Expand Down

0 comments on commit e856f9e

Please sign in to comment.