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