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

增加内容

This commit is contained in:
ruanyf 2014-08-29 01:51:37 +08:00
parent d814b273c8
commit 08aa66f021
9 changed files with 113 additions and 10 deletions

View File

@ -2,7 +2,22 @@
## Class ## Class
ES6引入了Class这个概念作为对象的模板。通过class关键字可以定义类。 ES5通过构造函数定义并生成新对象。下面是一个例子。
```javascript
function Point(x,y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '('+this.x+', '+this.y+')';
}
```
ES6引入了Class这个概念作为对象的模板。通过class关键字可以定义类。上面的代码用“类”改写就是下面这样。
```javascript ```javascript
@ -207,6 +222,18 @@ export default 42;
``` ```
export default也可以用来输出类。
```javascript
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass'
```
## 模块的继承 ## 模块的继承
模块之间也可以继承。 模块之间也可以继承。

View File

@ -51,10 +51,21 @@ 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];
``` ```
以上几种情况都属于解构不成功foo的值都会等于undefined。但是如果对undefined或null进行解构就会报错。 以上几种情况都属于解构不成功foo的值都会等于undefined。另一种情况是不完全解构。
```javascript
var [x, y] = [1, 2, 3];
```
上面代码中x和y可以顺利取到值。
如果对undefined或null进行解构会报错。
```javascript ```javascript
@ -73,6 +84,9 @@ var [foo] = null;
var [foo = true] = []; var [foo = true] = [];
foo // true foo // true
[x, y='b'] = ['a'] // x=3, y='b'
[x, y='b'] = ['a', undefined] // x=3, y='b'
``` ```
解构赋值不仅适用于var命令也适用于let和const命令。 解构赋值不仅适用于var命令也适用于let和const命令。
@ -215,9 +229,11 @@ var { foo, bar } = example();
```javascript ```javascript
function f({x, y, z}) { function f([x]) { ... }
// ...
} f(['a'])
function f({x, y, z}) { ... }
f({x:1, y:2, z:3}) f({x:1, y:2, z:3})

View File

@ -186,6 +186,8 @@ add(...numbers) // 42
``` ```
上面代码中,`array.push(...items)``add(...numbers)`这两行,都是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。
扩展运算符可以简化求出一个数组最大元素的写法。 扩展运算符可以简化求出一个数组最大元素的写法。
```javascript ```javascript

View File

@ -74,6 +74,31 @@ setTimeout(function () {
上面代码中只有调用next方法时函数f才会执行。 上面代码中只有调用next方法时函数f才会执行。
利用Generator函数可以在任意对象上部署iterator接口。
```javascript
function* iterEntries(obj) {
let keys = Object.keys(obj);
for (let i=0; i < keys.length; i++) {
let key = keys[i];
yield [key, obj[key]];
}
}
let myObj = { foo: 3, bar: 7 };
for (let [key, value] of iterEntries(myObj)) {
console.log(key, value);
}
// foo 3
// bar 7
```
上述代码中由于Generator函数返回一个具有iterator接口的对象所以只要让yield语句每次返回一个参数对象的成员就可以在任意对象上部署next方法。
## next方法的参数 ## next方法的参数
yield语句本身没有返回值或者说总是返回undefined。next方法可以带一个参数该参数就会被当作上一个yield语句的返回值。 yield语句本身没有返回值或者说总是返回undefined。next方法可以带一个参数该参数就会被当作上一个yield语句的返回值。

View File

@ -54,6 +54,8 @@ it.next().value // '2'
``` ```
在ES6中数组、类似数组的对象、Set和Map结构都原生具备iterator接口可以被for...of循环遍历。
## for...of循环 ## for...of循环
ES6中一个对象只要部署了next方法就被视为具有iterator接口就可以用for...of循环遍历它的值。下面用上一节的idMaker函数生成的it遍历器作为例子。 ES6中一个对象只要部署了next方法就被视为具有iterator接口就可以用for...of循环遍历它的值。下面用上一节的idMaker函数生成的it遍历器作为例子。
@ -91,6 +93,8 @@ for(let v of arr) {
``` ```
for...of循环完全可以取代数组实例的forEach方法。
JavaScript原有的for...in循环只能获得对象的键名不能直接获取键值。ES6提供for...of循环允许遍历获得键值。 JavaScript原有的for...in循环只能获得对象的键名不能直接获取键值。ES6提供for...of循环允许遍历获得键值。
```javascript ```javascript
@ -114,7 +118,7 @@ for (a of arr) {
``` ```
上面代码表明for...in循环读取键名for...of循环读取键值。 上面代码表明for...in循环读取键名for...of循环读取键值。如果要通过for...of循环获取数组的索引可以借助数组实例的entries方法和keys方法参见《数组的扩展》章节。
对于Set和Map结构的数据可以直接使用for...of循环。 对于Set和Map结构的数据可以直接使用for...of循环。

View File

@ -52,11 +52,18 @@ __proto__属性用来读取或设置当前对象的prototype对象。该属
```javascript ```javascript
// es6的写法
var obj = { var obj = {
__proto__: someOtherObj, __proto__: someOtherObj,
method: function() { ... } method: function() { ... }
} }
// es5的写法
var obj = Object.create(someOtherObj);
obj.method = function() { ... }
``` ```
有了这个属性实际上已经不需要通过Object.create()来生成新对象了。 有了这个属性实际上已经不需要通过Object.create()来生成新对象了。
@ -260,15 +267,23 @@ a.size // 1
let specialMethod = Symbol(); let specialMethod = Symbol();
let obj = { let obj = {
[specialMethod]: function (arg) { [specialMethod]: function (arg) { ... }
...
}
}; };
obj[specialMethod](123); obj[specialMethod](123);
``` ```
采用增强的对象写法上面代码的obj对象可以写得更简洁一些。
```javascript
let obj = {
[specialMethod](arg) { ... }
};
```
Symbol类型作为属性名不会出现在for...in循环中也不会被Object.getOwnPropertyNames方法返回但是有一个对应的Object.getOwnPropertySymbols方法以及Object.getOwnPropertyKeys方法都可以获取Symbol属性名。 Symbol类型作为属性名不会出现在for...in循环中也不会被Object.getOwnPropertyNames方法返回但是有一个对应的Object.getOwnPropertySymbols方法以及Object.getOwnPropertyKeys方法都可以获取Symbol属性名。
```javascript ```javascript

View File

@ -16,6 +16,7 @@
- Ryan Dao, [Summary of ECMAScript 6 major features](http://ryandao.net/portal/content/summary-ecmascript-6-major-features) - Ryan Dao, [Summary of ECMAScript 6 major features](http://ryandao.net/portal/content/summary-ecmascript-6-major-features)
- Luke Hoban, [ES6 features](https://github.com/lukehoban/es6features) - Luke Hoban, [ES6 features](https://github.com/lukehoban/es6features)
- Traceur-compiler, [Language Features](https://github.com/google/traceur-compiler/wiki/LanguageFeatures): Traceur文档列出的一些ES6例子 - Traceur-compiler, [Language Features](https://github.com/google/traceur-compiler/wiki/LanguageFeatures): Traceur文档列出的一些ES6例子
- Axel Rauschmayer, [ECMAScript 6: whats next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 关于ES6新增语法的综合介绍有很多例子
## 语法点 ## 语法点

View File

@ -62,7 +62,7 @@ s.has(2) // false
``` ```
下面是一个对比看看在判断是否包括一个键上面对象和Set的写法不同。 下面是一个对比,看看在判断是否包括一个键上面,对象结构和Set结构的写法不同。
```javascript ```javascript
@ -109,6 +109,8 @@ function dedupe(array) {
``` ```
Set的遍历可以借助for...of循环完成参见《Iterator和for...of循环》章节。
## WeakSet ## WeakSet
WeakSet结构与Set类似也是不重复的值的集合。但是它与Set有两个区别。 WeakSet结构与Set类似也是不重复的值的集合。但是它与Set有两个区别。

View File

@ -247,3 +247,14 @@ console.log(`${ x } + ${ y } = ${ x + y}`)
``` ```
上面代码表示,在模板字符串中嵌入变量,需要将变量名写在${}之中。 上面代码表示,在模板字符串中嵌入变量,需要将变量名写在${}之中。
模板字符串使得字符串与变量的结合,变得容易。下面是一个例子。
```javascript
if (x > MAX) {
throw new Error(`Most ${MAX} allowed: ${x}!`);
// 传统写法为'Most '+MAX+' allowed: '+x+'!'
}
```