1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-29 05:42:20 +00:00

edit destruring

This commit is contained in:
ruanyf 2015-10-20 11:08:03 +08:00
parent c6d6fa358b
commit 22afca322c
4 changed files with 29 additions and 19 deletions

View File

@ -108,8 +108,8 @@ const [v1, v2, ..., vN ] = array;
对于Set结构也可以使用数组的解构赋值。 对于Set结构也可以使用数组的解构赋值。
```javascript ```javascript
[a, b, c] = new Set(["a", "b", "c"]) let [x, y, z] = new Set(["a", "b", "c"])
a // "a" x // "a"
``` ```
事实上只要某种数据结构具有Iterator接口都可以采用数组形式的解构赋值。 事实上只要某种数据结构具有Iterator接口都可以采用数组形式的解构赋值。
@ -128,7 +128,7 @@ var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5 sixth // 5
``` ```
上面代码中fibs是一个Generator函数原生具有Iterator接口。解构赋值会依次从这个接口获取值。 上面代码中,`fibs`是一个Generator函数原生具有Iterator接口。解构赋值会依次从这个接口获取值。
## 对象的解构赋值 ## 对象的解构赋值
@ -165,6 +165,14 @@ f // 'hello'
l // 'world' l // 'world'
``` ```
这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。
```javascript
var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
```
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。
和数组一样,解构也可以用于嵌套结构的对象。 和数组一样,解构也可以用于嵌套结构的对象。
```javascript ```javascript
@ -203,9 +211,9 @@ var {x = 3} = {x: null};
x // null x // null
``` ```
上面代码中如果x属性等于null就不严格相等于undefined导致默认值不会生效。 上面代码中,如果`x`属性等于`null`,就不严格相等于`undefined`,导致默认值不会生效。
如果解构失败变量的值等于undefined。 如果解构失败,变量的值等于`undefined`
```javascript ```javascript
var {foo} = {bar: 'baz'} var {foo} = {bar: 'baz'}
@ -219,7 +227,7 @@ foo // undefined
var {foo: {bar}} = {baz: 'baz'} var {foo: {bar}} = {baz: 'baz'}
``` ```
上面代码中等号左边对象的foo属性对应一个子对象。该子对象的bar属性解构时会报错。原因很简单因为foo这时等于undefined再取子属性就会报错请看下面的代码。 上面代码中,等号左边对象的`foo`属性,对应一个子对象。该子对象的`bar`属性,解构时会报错。原因很简单,因为`foo`这时等于`undefined`,再取子属性就会报错,请看下面的代码。
```javascript ```javascript
var _tmp = {baz: 'baz'}; var _tmp = {baz: 'baz'};
@ -232,7 +240,7 @@ _tmp.foo.bar // 报错
// 错误的写法 // 错误的写法
var x; var x;
{x} = {x:1}; {x} = {x: 1};
// SyntaxError: syntax error // SyntaxError: syntax error
``` ```
@ -266,7 +274,7 @@ d // "l"
e // "o" e // "o"
``` ```
类似数组的对象都有一个length属性因此还可以对这个属性解构赋值。 类似数组的对象都有一个`length`属性,因此还可以对这个属性解构赋值。
```javascript ```javascript
let {length : len} = 'hello'; let {length : len} = 'hello';

View File

@ -2,7 +2,7 @@
ECMAScript 6以下简称ES6是JavaScript语言的下一代标准已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序成为企业级开发语言。 ECMAScript 6以下简称ES6是JavaScript语言的下一代标准已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序成为企业级开发语言。
标准的制定者有计划以后每年发布一次标准使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的所以又称ECMAScript 2015。也就是说ES6就是ES2015。 标准的制定者有计划以后每年发布一次标准使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的所以又称ECMAScript 2015。也就是说ES6就是ES2015下一年应该会发布小幅修订的ES2016
## ECMAScript和JavaScript的关系 ## ECMAScript和JavaScript的关系
@ -146,7 +146,7 @@ $ babel-node es6.js
[1, 4, 9] [1, 4, 9]
``` ```
babel命令可以将ES6代码转为ES5代码。 `babel`命令可以将ES6代码转为ES5代码。
```bash ```bash
$ babel es6.js $ babel es6.js
@ -403,7 +403,7 @@ fs.writeFileSync('out.js.map', result.sourceMap);
2013年3月ES6的草案封闭不再接受新功能了。新的功能将被加入ES7。 2013年3月ES6的草案封闭不再接受新功能了。新的功能将被加入ES7。
任何人都可以向ES7提案从提案到变成正式标准需要经历五个阶段。每个阶段的变动都需要由TC39委员会批准。 任何人都可以向TC39提案从提案到变成正式标准需要经历五个阶段。每个阶段的变动都需要由TC39委员会批准。
- Stage 0 - Strawman展示阶段 - Stage 0 - Strawman展示阶段
- Stage 1 - Proposal征求意见阶段 - Stage 1 - Proposal征求意见阶段
@ -435,6 +435,8 @@ fs.writeFileSync('out.js.map', result.sourceMap);
- es7.asyncFunctionsasync函数 - es7.asyncFunctionsasync函数
- es7.objectRestSpread对象的Rest参数和扩展运算符 - es7.objectRestSpread对象的Rest参数和扩展运算符
ECMAScript当前的所有提案可以在TC39的官方网站[Github.com/tc39/ecma262](https://github.com/tc39/ecma262)查看。
Babel转码器对Stage 2及以上阶段的功能是默认支持的。对于那些默认没有打开的功能需要手动打开。 Babel转码器对Stage 2及以上阶段的功能是默认支持的。对于那些默认没有打开的功能需要手动打开。
```bash ```bash

View File

@ -44,13 +44,13 @@ ES6的模块自动采用严格模式不管你有没有在模块头部加上`"
- 不能使用`fn.caller``fn.arguments`获取函数调用的堆栈 - 不能使用`fn.caller``fn.arguments`获取函数调用的堆栈
- 增加了保留字(比如`protected``static``interface` - 增加了保留字(比如`protected``static``interface`
上面这些限制,模块都必须遵守。 上面这些限制,模块都必须遵守。由于严格模式是ES5引入的不属于ES6所以请参阅相关ES5书籍本书不再详细介绍了。
## export命令 ## export命令
模块功能主要由两个命令构成export和import。export命令用于规定模块的对外接口import命令用于输入其他模块提供的功能。 模块功能主要由两个命令构成:`export``import``export`命令用于规定模块的对外接口,`import`命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量外部无法获取。如果你希望外部能够读取模块内部的某个变量就必须使用export关键字输出该变量。下面是一个JS文件里面使用export命令输出变量。 一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用`export`关键字输出该变量。下面是一个JS文件里面使用`export`命令输出变量。
```javascript ```javascript
// profile.js // profile.js
@ -59,7 +59,7 @@ export var lastName = 'Jackson';
export var year = 1958; export var year = 1958;
``` ```
上面代码是profile.js文件保存了用户信息。ES6将其视为一个模块里面用export命令对外部输出了三个变量。 上面代码是`profile.js`文件保存了用户信息。ES6将其视为一个模块里面用export命令对外部输出了三个变量。
export的写法除了像上面这样还有另外一种。 export的写法除了像上面这样还有另外一种。
@ -72,7 +72,7 @@ var year = 1958;
export {firstName, lastName, year}; export {firstName, lastName, year};
``` ```
上面代码在export命令后面使用大括号指定所要输出的一组变量。它与前一种写法直接放置在var语句前是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清楚输出了哪些变量。 上面代码在`export`命令后面使用大括号指定所要输出的一组变量。它与前一种写法直接放置在var语句前是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清楚输出了哪些变量。
export命令除了输出变量还可以输出函数或类class export命令除了输出变量还可以输出函数或类class

View File

@ -2,9 +2,9 @@
## 官方文件 ## 官方文件
- [ECMAScript 6 Language Specification](http://people.mozilla.org/~jorendorff/es6-draft.html): 语言规格草案 - [ECMAScript® 2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/index.html): ES6语言规格
- [harmony:proposals](http://wiki.ecmascript.org/doku.php?id=harmony:proposals): ES6的各种提案 - [ECMAScript Current Proposals](https://github.com/tc39/ecma262): ECMAScript当前的各种提案
- [Draft Specification for ES.next (Ecma-262 Edition 6)](http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts): ES6草案各版本之间的变动 - [ECMAScript® 2016 Language Specification](http://tc39.github.io/ecma262/): ECMAScript 2016草案
## 综合介绍 ## 综合介绍