From 08aa66f0216a17c76e2f9e69f9d0779d21eb2b4f Mon Sep 17 00:00:00 2001 From: ruanyf Date: Fri, 29 Aug 2014 01:51:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/class.md | 29 ++++++++++++++++++++++++++++- docs/destructuring.md | 24 ++++++++++++++++++++---- docs/function.md | 2 ++ docs/generator.md | 25 +++++++++++++++++++++++++ docs/iterator.md | 6 +++++- docs/object.md | 21 ++++++++++++++++++--- docs/reference.md | 1 + docs/set-map.md | 4 +++- docs/string.md | 11 +++++++++++ 9 files changed, 113 insertions(+), 10 deletions(-) diff --git a/docs/class.md b/docs/class.md index 93bcf13..6f09938 100644 --- a/docs/class.md +++ b/docs/class.md @@ -2,7 +2,22 @@ ## 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 @@ -207,6 +222,18 @@ export default 42; ``` +export default也可以用来输出类。 + +```javascript + +// MyClass.js +export default class { ... } + +// main.js +import MyClass from 'MyClass' + +``` + ## 模块的继承 模块之间也可以继承。 diff --git a/docs/destructuring.md b/docs/destructuring.md index 3fd5e5e..20a0aba 100644 --- a/docs/destructuring.md +++ b/docs/destructuring.md @@ -51,10 +51,21 @@ var [foo] = 1; var [foo] = 'Hello'; var [foo] = false; 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 @@ -73,6 +84,9 @@ var [foo] = null; var [foo = true] = []; foo // true +[x, y='b'] = ['a'] // x=3, y='b' +[x, y='b'] = ['a', undefined] // x=3, y='b' + ``` 解构赋值不仅适用于var命令，也适用于let和const命令。 @@ -215,9 +229,11 @@ var { foo, bar } = example(); ```javascript -function f({x, y, z}) { - // ... -} +function f([x]) { ... } + +f(['a']) + +function f({x, y, z}) { ... } f({x:1, y:2, z:3}) diff --git a/docs/function.md b/docs/function.md index 0625d73..6487adf 100644 --- a/docs/function.md +++ b/docs/function.md @@ -186,6 +186,8 @@ add(...numbers) // 42 ``` +上面代码中，`array.push(...items)`和`add(...numbers)`这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。 + 扩展运算符可以简化求出一个数组最大元素的写法。 ```javascript diff --git a/docs/generator.md b/docs/generator.md index c3b25a2..7e035c5 100644 --- a/docs/generator.md +++ b/docs/generator.md @@ -74,6 +74,31 @@ setTimeout(function () { 上面代码中，只有调用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方法的参数 yield语句本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值。 diff --git a/docs/iterator.md b/docs/iterator.md index 00029b0..ab21026 100644 --- a/docs/iterator.md +++ b/docs/iterator.md @@ -54,6 +54,8 @@ it.next().value // '2' ``` +在ES6中，数组、类似数组的对象、Set和Map结构，都原生具备iterator接口，可以被for...of循环遍历。 + ## for...of循环 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 @@ -114,7 +118,7 @@ for (a of arr) { ``` -上面代码表明，for...in循环读取键名，for...of循环读取键值。 +上面代码表明，for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法，参见《数组的扩展》章节。 对于Set和Map结构的数据，可以直接使用for...of循环。 diff --git a/docs/object.md b/docs/object.md index 0ee089e..09dd214 100644 --- a/docs/object.md +++ b/docs/object.md @@ -52,11 +52,18 @@ __proto__属性，用来读取或设置当前对象的prototype对象。该属 ```javascript +// es6的写法 + var obj = { __proto__: someOtherObj, method: function() { ... } } +// es5的写法 + +var obj = Object.create(someOtherObj); +obj.method = function() { ... } + ``` 有了这个属性，实际上已经不需要通过Object.create()来生成新对象了。 @@ -260,15 +267,23 @@ a.size // 1 let specialMethod = Symbol(); let obj = { - [specialMethod]: function (arg) { - ... - } + [specialMethod]: function (arg) { ... } }; obj[specialMethod](123); ``` +采用增强的对象写法，上面代码的obj对象可以写得更简洁一些。 + +```javascript + +let obj = { + [specialMethod](arg) { ... } +}; + +``` + Symbol类型作为属性名，不会出现在for...in循环中，也不会被Object.getOwnPropertyNames方法返回，但是有一个对应的Object.getOwnPropertySymbols方法，以及Object.getOwnPropertyKeys方法都可以获取Symbol属性名。 ```javascript diff --git a/docs/reference.md b/docs/reference.md index 6cd535f..e0a009d 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -16,6 +16,7 @@ - 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) - Traceur-compiler, [Language Features](https://github.com/google/traceur-compiler/wiki/LanguageFeatures): Traceur文档列出的一些ES6例子 +- Axel Rauschmayer, [ECMAScript 6: what’s next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 关于ES6新增语法的综合介绍，有很多例子 ## 语法点 diff --git a/docs/set-map.md b/docs/set-map.md index 3333442..15cccda 100644 --- a/docs/set-map.md +++ b/docs/set-map.md @@ -62,7 +62,7 @@ s.has(2) // false ``` -下面是一个对比，看看在判断是否包括一个键上面，对象和Set的写法不同。 +下面是一个对比，看看在判断是否包括一个键上面，对象结构和Set结构的写法不同。 ```javascript @@ -109,6 +109,8 @@ function dedupe(array) { ``` +Set的遍历，可以借助for...of循环完成，参见《Iterator和for...of循环》章节。 + ## WeakSet WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set有两个区别。 diff --git a/docs/string.md b/docs/string.md index 52e7fca..89b7ca8 100644 --- a/docs/string.md +++ b/docs/string.md @@ -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+'!' +} + +```