mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
docs(function): edit 函数参数的解构赋值
This commit is contained in:
parent
8a214a6ead
commit
e856f9e4cb
@ -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]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user