mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
edit destructuring/string default
This commit is contained in:
parent
68b98678af
commit
5c7390cd0b
@ -7,19 +7,15 @@ ES6允许按照一定模式,从数组和对象中提取值,对变量进行
|
||||
以前,为变量赋值,只能直接指定值。
|
||||
|
||||
```javascript
|
||||
|
||||
var a = 1;
|
||||
var b = 2;
|
||||
var c = 3;
|
||||
|
||||
```
|
||||
|
||||
ES6允许写成下面这样。
|
||||
|
||||
```javascript
|
||||
|
||||
var [a, b, c] = [1, 2, 3];
|
||||
|
||||
```
|
||||
|
||||
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
|
||||
@ -49,14 +45,12 @@ tail // [2, 3, 4]
|
||||
如果解构不成功,变量的值就等于undefined。
|
||||
|
||||
```javascript
|
||||
|
||||
var [foo] = [];
|
||||
var [foo] = 1;
|
||||
var [foo] = 'Hello';
|
||||
var [foo] = false;
|
||||
var [foo] = NaN;
|
||||
var [bar, foo] = [1];
|
||||
|
||||
```
|
||||
|
||||
以上几种情况都属于解构不成功,foo的值都会等于undefined。这是因为原始类型的值,会自动转为对象,比如数值1转为`new Number(1)`,从而导致foo取到undefined。
|
||||
@ -64,7 +58,6 @@ var [bar, foo] = [1];
|
||||
另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。
|
||||
|
||||
```javascript
|
||||
|
||||
let [x, y] = [1, 2, 3];
|
||||
x // 1
|
||||
y // 2
|
||||
@ -80,11 +73,9 @@ d // 4
|
||||
如果对undefined或null进行解构,会报错。
|
||||
|
||||
```javascript
|
||||
|
||||
// 报错
|
||||
var [foo] = undefined;
|
||||
var [foo] = null;
|
||||
|
||||
```
|
||||
|
||||
这是因为解构只能用于数组或对象。其他原始类型的值都可以转为相应的对象,但是,undefined和null不能转为对象,因此报错。
|
||||
@ -92,32 +83,26 @@ var [foo] = null;
|
||||
解构赋值允许指定默认值。
|
||||
|
||||
```javascript
|
||||
|
||||
var [foo = true] = [];
|
||||
foo // true
|
||||
|
||||
[x, y='b'] = ['a'] // x='a', y='b'
|
||||
[x, y='b'] = ['a', undefined] // x='a', y='b'
|
||||
|
||||
```
|
||||
|
||||
解构赋值不仅适用于var命令,也适用于let和const命令。
|
||||
|
||||
```javascript
|
||||
|
||||
var [v1, v2, ..., vN ] = array;
|
||||
let [v1, v2, ..., vN ] = array;
|
||||
const [v1, v2, ..., vN ] = array;
|
||||
|
||||
```
|
||||
|
||||
对于Set结构,也可以使用数组的解构赋值。
|
||||
|
||||
```javascript
|
||||
|
||||
[a, b, c] = new Set(["a", "b", "c"])
|
||||
a // "a"
|
||||
|
||||
```
|
||||
|
||||
事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
|
||||
@ -138,6 +123,26 @@ sixth // 5
|
||||
|
||||
上面代码中,fibs是一个Generator函数,原生具有Iterator接口。解构赋值会依次从这个接口获取值。
|
||||
|
||||
## 字符串的解构赋值
|
||||
|
||||
由于JavaScript引擎内部,某些场合时,字符串会被转为类似数组的对象。因此,字符串也可以解构赋值。
|
||||
|
||||
```javascript
|
||||
const [a, b, c, d, e] = 'hello';
|
||||
a // "h"
|
||||
b // "e"
|
||||
c // "l"
|
||||
d // "l"
|
||||
e // "o"
|
||||
```
|
||||
|
||||
类似数组的对象都有一个length属性,因此还可以对这个属性结构赋值。
|
||||
|
||||
```javascript
|
||||
let {length : len} = 'hello';
|
||||
len // 5
|
||||
```
|
||||
|
||||
## 对象的解构赋值
|
||||
|
||||
解构不仅可以用于数组,还可以用于对象。
|
||||
|
@ -493,25 +493,20 @@ var go = function*(){
|
||||
ES6允许使用“箭头”(=>)定义函数。
|
||||
|
||||
```javascript
|
||||
|
||||
var f = v => v;
|
||||
|
||||
```
|
||||
|
||||
上面的箭头函数等同于:
|
||||
|
||||
```javascript
|
||||
|
||||
var f = function(v) {
|
||||
return v;
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
|
||||
|
||||
```javascript
|
||||
|
||||
var f = () => 5;
|
||||
// 等同于
|
||||
var f = function (){ return 5 };
|
||||
@ -521,32 +516,36 @@ var sum = (num1, num2) => num1 + num2;
|
||||
var sum = function(num1, num2) {
|
||||
return num1 + num2;
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
|
||||
|
||||
```javascript
|
||||
|
||||
var sum = (num1, num2) => { return num1 + num2; }
|
||||
|
||||
```
|
||||
|
||||
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
|
||||
|
||||
```javascript
|
||||
|
||||
var getTempItem = id => ({ id: id, name: "Temp" });
|
||||
```
|
||||
|
||||
箭头函数可以与变量解构结合使用。
|
||||
|
||||
```javascript
|
||||
const full = ({ first, last }) => first + ' ' + last;
|
||||
|
||||
// 等同于
|
||||
function full( person ){
|
||||
return person.first + ‘ ‘ + person.name;
|
||||
}
|
||||
```
|
||||
|
||||
箭头函数使得表达更加简洁。
|
||||
|
||||
```javascript
|
||||
|
||||
const isEven = n => n % 2 == 0;
|
||||
const square = n => n * n;
|
||||
|
||||
```
|
||||
|
||||
上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。
|
||||
@ -554,7 +553,6 @@ const square = n => n * n;
|
||||
箭头函数的一个用处是简化回调函数。
|
||||
|
||||
```javascript
|
||||
|
||||
// 正常函数写法
|
||||
[1,2,3].map(function (x) {
|
||||
return x * x;
|
||||
@ -562,13 +560,11 @@ const square = n => n * n;
|
||||
|
||||
// 箭头函数写法
|
||||
[1,2,3].map(x => x * x);
|
||||
|
||||
```
|
||||
|
||||
另一个例子是
|
||||
|
||||
```javascript
|
||||
|
||||
// 正常函数写法
|
||||
var result = values.sort(function(a, b) {
|
||||
return a - b;
|
||||
@ -576,7 +572,6 @@ var result = values.sort(function(a, b) {
|
||||
|
||||
// 箭头函数写法
|
||||
var result = values.sort((a, b) => a - b);
|
||||
|
||||
```
|
||||
|
||||
下面是rest参数与箭头函数结合的例子。
|
||||
@ -646,13 +641,11 @@ addThenMult(5)
|
||||
上面的代码等同于下面的写法。
|
||||
|
||||
```javascript
|
||||
|
||||
const plus1 = a => a + 1;
|
||||
const mult2 = a => a * 2;
|
||||
|
||||
mult2(plus1(5))
|
||||
// 12
|
||||
|
||||
```
|
||||
|
||||
## 函数绑定
|
||||
|
Loading…
x
Reference in New Issue
Block a user