@@ -59,34 +59,35 @@ p // { x: 0, y: 0 }
59
59
60
60
除了简洁,ES6的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本彻底拿掉这个参数,也不会导致以前的代码无法运行。
61
61
62
- 参数默认值可以与解构赋值,联合起来使用 。
62
+ 参数变量是默认声明的,所以不能用let或const再次声明 。
63
63
64
64
``` javascript
65
- function foo ({x, y = 5 }) {
66
- console .log (x, y);
65
+ function foo (x = 5 ) {
66
+ let x = 1 ; // error
67
+ const x = 2 ; // error
67
68
}
68
-
69
- foo ({}) // undefined, 5
70
- foo ({x: 1 }) // 1, 5
71
- foo ({x: 1 , y: 2 }) // 1, 2
72
69
```
73
70
74
- 上面代码中,` foo ` 函数的参数是一个对象,变量` x ` 和` y ` 用于解构赋值,` y ` 有默认值5。
71
+ 上面代码中,参数变量` x ` 是默认声明的,在函数体中,不能用let或const再次声明,否则会报错。
72
+
73
+ ### 与解构赋值默认值结合使用
75
74
76
- 另外,参数变量是默认声明的,所以不能用let或const再次声明 。
75
+ 参数默认值可以与解构赋值的默认值,结合起来使用 。
77
76
78
77
``` javascript
79
- function foo (x = 5 ) {
80
- let x = 1 ; // error
81
- const x = 2 ; // error
78
+ function foo ({x, y = 5 }) {
79
+ console .log (x, y);
82
80
}
83
- ```
84
81
85
- 上面代码中,参数变量` x ` 是默认声明的,在函数体中,不能用let或const再次声明,否则会报错。
82
+ foo ({}) // undefined, 5
83
+ foo ({x: 1 }) // 1, 5
84
+ foo ({x: 1 , y: 2 }) // 1, 2
85
+ foo () // TypeError: Cannot read property 'x' of undefined
86
+ ```
86
87
87
- ### 双重默认值
88
+ 上面代码使用了对象的解构赋值默认值,而没有使用函数参数的默认值。只有当函数 ` foo ` 的参数是一个对象时,变量 ` x ` 和 ` y ` 才会通过解构赋值而生成。如果函数 ` foo ` 调用时参数不是对象,变量 ` x ` 和 ` y ` 就不会生成,从而报错。如果参数对象没有 ` y ` 属性, ` y ` 的默认值5才会生效。
88
89
89
- 默认值的写法非常灵活,下面是一个为对象属性设置默认值的例子 。
90
+ 下面是另一个对象的解构赋值默认值的例子 。
90
91
91
92
``` javascript
92
93
function fetch (url , { body = ' ' , method = ' GET' , headers = {} }){
@@ -100,9 +101,9 @@ fetch('http://example.com')
100
101
// 报错
101
102
```
102
103
103
- 上面代码中,传入函数 ` fetch ` 的第二个参数是一个对象,调用的时候可以为它的三个属性设置默认值 。
104
+ 上面代码中,如果函数 ` fetch ` 的第二个参数是一个对象,就可以为它的三个属性设置默认值 。
104
105
105
- 但是,这种写法不能省略第二个参数,为此可以设置双重默认值 。
106
+ 上面的写法不能省略第二个参数,如果结合函数参数的默认值,就可以省略第二个参数。这时,就出现了双重默认值 。
106
107
107
108
``` javascript
108
109
function fetch (url , { method = ' GET' } = {}){
@@ -113,7 +114,7 @@ fetch('http://example.com')
113
114
// "GET"
114
115
```
115
116
116
- 上面代码中,调用函数 ` fetch ` 时,第二个参数默认为一个空对象,而只要有第二个参数, ` method ` 参数就默认为 ` GET ` 。
117
+ 上面代码中,函数 ` fetch ` 没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量 ` method ` 才会取到默认值 ` GET ` 。
117
118
118
119
再请问下面两种写法有什么差别?
119
120
@@ -129,7 +130,7 @@ function m2({x, y} = { x: 0, y: 0 }) {
129
130
}
130
131
```
131
132
132
- 上面两种写法都对函数的参数设定了默认值,区别是写法一对 ` x ` 和 ` y ` 设定了默认值,写法二没有 。
133
+ 上面两种写法都对函数的参数设定了默认值,区别是写法一函数参数的默认值是空对象,但是设置了对象解构赋值的默认值;写法二函数参数的默认值是一个有具体属性的函数,但是没有设置对象解构赋值的默认值 。
133
134
134
135
``` javascript
135
136
// 函数没有参数的情况
@@ -174,7 +175,7 @@ function f(x, y = 5, z) {
174
175
175
176
f () // [undefined, 5, undefined]
176
177
f (1 ) // [1, 5, undefined]
177
- f (1 ,,2 ) // 报错
178
+ f (1 , ,2 ) // 报错
178
179
f (1 , undefined , 2 ) // [1, 5, 2]
179
180
```
180
181
0 commit comments