1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

docs(destructuring): edit object destructuring

This commit is contained in:
ruanyf 2016-07-12 08:56:00 +08:00
parent c73b7b6f69
commit 18b98ed3d2
2 changed files with 30 additions and 12 deletions

View File

@ -200,7 +200,7 @@ baz // undefined
如果变量名与属性名不一致,必须写成下面这样。 如果变量名与属性名不一致,必须写成下面这样。
```javascript ```javascript
var { foo: baz } = { foo: "aaa", bar: "bbb" }; var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa" baz // "aaa"
let obj = { first: 'hello', last: 'world' }; let obj = { first: 'hello', last: 'world' };
@ -225,7 +225,7 @@ foo // error: foo is not defined
上面代码中,真正被赋值的是变量`baz`,而不是模式`foo` 上面代码中,真正被赋值的是变量`baz`,而不是模式`foo`
注意采用这种写法时变量的声明和赋值是一体的。对于let和const来说变量不能重新声明所以一旦赋值的变量以前声明过就会报错。 注意,采用这种写法时,变量的声明和赋值是一体的。对于`let``const`来说,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。
```javascript ```javascript
let foo; let foo;
@ -235,7 +235,7 @@ let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz" let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"
``` ```
上面代码中,解构赋值的变量都会重新声明,所以报错了。不过,因为`var`命令允许重新声明,所以这个错误只会在使用`let``const`命令时出现。如果没有第二个let命令上面的代码就不会报错。 上面代码中,解构赋值的变量都会重新声明,所以报错了。不过,因为`var`命令允许重新声明,所以这个错误只会在使用`let``const`命令时出现。如果没有第二个`let`命令,上面的代码就不会报错。
```javascript ```javascript
let foo; let foo;
@ -245,13 +245,15 @@ let baz;
({bar: baz} = {bar: 1}); // 成功 ({bar: baz} = {bar: 1}); // 成功
``` ```
上面代码中,`let`命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。
和数组一样,解构也可以用于嵌套结构的对象。 和数组一样,解构也可以用于嵌套结构的对象。
```javascript ```javascript
var obj = { var obj = {
p: [ p: [
"Hello", 'Hello',
{ y: "World" } { y: 'World' }
] ]
}; };
@ -302,7 +304,13 @@ var {x, y = 5} = {x: 1};
x // 1 x // 1
y // 5 y // 5
var { message: msg = "Something went wrong" } = {}; var {x:y = 3} = {};
y // 3
var {x:y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong" msg // "Something went wrong"
``` ```
@ -343,7 +351,6 @@ _tmp.foo.bar // 报错
```javascript ```javascript
// 错误的写法 // 错误的写法
var x; var x;
{x} = {x: 1}; {x} = {x: 1};
// SyntaxError: syntax error // SyntaxError: syntax error
@ -376,6 +383,17 @@ let { log, sin, cos } = Math;
上面代码将`Math`对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。 上面代码将`Math`对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
```javascript
var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
```
上面代码对数组进行对象结构。数组`arr``0`键对应的值是`1``[arr.length - 1]`就是`2`键,对应的值是`3`。方括号这种写法,属于“属性名表达式”,参见《对象的扩展》一章。
## 字符串的解构赋值 ## 字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
@ -551,7 +569,7 @@ function f([(z)]) { return z; }
[x, y] = [y, x]; [x, y] = [y, x];
``` ```
上面代码交换变量x和y的值这样的写法不仅简洁而且易读语义非常清晰。 上面代码交换变量`x``y`的值,这样的写法不仅简洁,而且易读,语义非常清晰。
**2从函数返回多个值** **2从函数返回多个值**
@ -612,7 +630,6 @@ console.log(id, status, number);
**5函数参数的默认值** **5函数参数的默认值**
```javascript ```javascript
jQuery.ajax = function (url, { jQuery.ajax = function (url, {
async = true, async = true,
beforeSend = function () {}, beforeSend = function () {},
@ -624,7 +641,6 @@ jQuery.ajax = function (url, {
}) { }) {
// ... do stuff // ... do stuff
}; };
``` ```
指定参数的默认值,就避免了在函数体内部再写`var foo = config.foo || 'default foo';`这样的语句。 指定参数的默认值,就避免了在函数体内部再写`var foo = config.foo || 'default foo';`这样的语句。
@ -664,7 +680,5 @@ for (let [,value] of map) {
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
```javascript ```javascript
const { SourceMapConsumer, SourceNode } = require("source-map"); const { SourceMapConsumer, SourceNode } = require("source-map");
``` ```

View File

@ -644,11 +644,15 @@ alert(123)
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。 标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
```javascript ```javascript
var a = 5; var a = 5;
var b = 10; var b = 10;
tag`Hello ${ a + b } world ${ a * b }`; tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', '''], 15, 50);
``` ```
上面代码中,模板字符串前面有一个标识名`tag`,它是一个函数。整个表达式的返回值,就是`tag`函数处理模板字符串后的返回值。 上面代码中,模板字符串前面有一个标识名`tag`,它是一个函数。整个表达式的返回值,就是`tag`函数处理模板字符串后的返回值。