1
0
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:
Ruan Yifeng 2015-06-13 19:06:27 +08:00
parent 68b98678af
commit 5c7390cd0b
2 changed files with 30 additions and 32 deletions

View File

@ -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
```
## 对象的解构赋值
解构不仅可以用于数组,还可以用于对象。

View File

@ -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
```
## 函数绑定