mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
修改function/参数默认值
This commit is contained in:
parent
4b568ef436
commit
b17a970cd0
@ -76,7 +76,7 @@ var firstName = 'David';
|
||||
var lastName = 'Belle';
|
||||
var year = 1973;
|
||||
|
||||
export {firstName, lastName, year}
|
||||
export {firstName, lastName, year};
|
||||
|
||||
```
|
||||
|
||||
@ -132,7 +132,19 @@ console.log("圆面积:" + area(4));
|
||||
console.log("圆周长:" + circumference(14));
|
||||
|
||||
```
|
||||
上面写法是逐一指定要导入的方法。另一种写法是使用module关键字,整体导入。
|
||||
|
||||
上面写法是逐一指定要导入的方法。另一种写法是整体导入。
|
||||
|
||||
```javascript
|
||||
|
||||
import * as circle from 'circle';
|
||||
|
||||
console.log("圆面积:" + circle.area(4));
|
||||
console.log("圆周长:" + circle.circumference(14));
|
||||
|
||||
```
|
||||
|
||||
module关键字可以取代import语句,达到整体输入模块的作用。
|
||||
|
||||
```javascript
|
||||
|
||||
@ -177,6 +189,14 @@ customName(); // 'foo'
|
||||
|
||||
显然,一个模块只能有一个默认方法。
|
||||
|
||||
如果想在一条import语句中,同时输入默认方法和指定名称的变量,可以写成下面这样。
|
||||
|
||||
```javascript
|
||||
|
||||
import customName, { otherMethod } from './export-default';
|
||||
|
||||
```
|
||||
|
||||
如果要输出默认属性,只需将值跟在`export default`之后即可。
|
||||
|
||||
```javascript
|
||||
|
@ -145,6 +145,9 @@ y // "World"
|
||||
var { x = 3 } = {};
|
||||
x // 3
|
||||
|
||||
var {x, y = 5} = {x: 1};
|
||||
console.log(x, y) // 1, 5
|
||||
|
||||
```
|
||||
|
||||
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
|
||||
|
@ -2,7 +2,56 @@
|
||||
|
||||
## 函数参数的默认值
|
||||
|
||||
ES6允许为函数的参数设置默认值。
|
||||
在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
|
||||
|
||||
```javascript
|
||||
|
||||
function log(x, y) {
|
||||
y = y || 'World';
|
||||
console.log(x, y);
|
||||
}
|
||||
|
||||
log('Hello') // Hello World
|
||||
log('Hello', 'China') // Hello China
|
||||
log('Hello', '') // Hello World
|
||||
|
||||
```
|
||||
|
||||
上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World。这种写法的缺点在于,如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用。就像上面代码的最后一行,参数y等于空字符,结果被改为默认值。
|
||||
|
||||
为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值。这有两种写法。
|
||||
|
||||
```javascript
|
||||
|
||||
// 写法一
|
||||
if (typeof y === 'undefined') {
|
||||
y = 'World';
|
||||
}
|
||||
|
||||
|
||||
// 写法二
|
||||
if (arguments.length === 1) {
|
||||
y = 'World';
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。
|
||||
|
||||
```javascript
|
||||
|
||||
function log(x, y = 'World') {
|
||||
console.log(x, y);
|
||||
}
|
||||
|
||||
log('Hello') // Hello World
|
||||
log('Hello', 'China') // Hello China
|
||||
log('Hello', '') // Hello
|
||||
|
||||
```
|
||||
|
||||
可以看到,ES6的写法比ES5简洁许多,而且非常自然。下面是另一个例子。
|
||||
|
||||
```javascript
|
||||
|
||||
@ -16,15 +65,13 @@ var p = new Point();
|
||||
|
||||
```
|
||||
|
||||
任何带有默认值的参数,被视为可选参数。不带默认值的参数,则被视为必需参数。
|
||||
|
||||
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
|
||||
|
||||
```javascript
|
||||
|
||||
function throwIfMissing() {
|
||||
throw new Error('Missing parameter');
|
||||
}
|
||||
}
|
||||
|
||||
function foo(mustBeProvided = throwIfMissing()) {
|
||||
return mustBeProvided;
|
||||
@ -37,6 +84,40 @@ foo()
|
||||
|
||||
上面代码的foo函数,如果调用的时候没有参数,就会调用默认值throwIfMissing函数,从而抛出一个错误。
|
||||
|
||||
从上面代码还可以看到,参数mustBeProvided的默认值等于throwIfMissing函数的运行结果(即函数名之后有一对圆括号),这表明参数的默认值不是在定义时执行,而是在运行时执行(即如果参数已经赋值,默认值中的函数就不会运行),这与python语言不一样。
|
||||
|
||||
另一个需要注意的地方是,参数默认值所处的作用域,不是全局作用域,而是函数作用域。
|
||||
|
||||
```javascript
|
||||
|
||||
var x = 1;
|
||||
|
||||
function foo(x, y = x) {
|
||||
console.log(y);
|
||||
}
|
||||
|
||||
foo(2) // 2
|
||||
|
||||
```
|
||||
|
||||
上面代码中,参数y的默认值等于x,由于处在函数作用域,所以x等于参数x,而不是全局变量x。
|
||||
|
||||
参数默认值可以与解构赋值,联合起来使用。
|
||||
|
||||
```javascript
|
||||
|
||||
function foo({x, y = 5}) {
|
||||
console.log(x, y);
|
||||
}
|
||||
|
||||
foo({}) // undefined, 5
|
||||
foo({x: 1}) // 1, 5
|
||||
foo({x: 1, y: 2}) // 1, 2
|
||||
|
||||
```
|
||||
|
||||
上面代码中,foo函数的参数是一个对象,变量x和y用于解构赋值,y有默认值5。
|
||||
|
||||
## rest参数
|
||||
|
||||
ES6引入rest参数(...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
|
||||
|
@ -26,6 +26,7 @@
|
||||
- Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍
|
||||
- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/)
|
||||
- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observer()的概念
|
||||
- Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值
|
||||
|
||||
## Generator
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user