Skip to content

Commit 08aa66f

Browse files
ruanyfruanyf
committed
增加内容
1 parent d814b27 commit 08aa66f

File tree

9 files changed

+113
-10
lines changed

9 files changed

+113
-10
lines changed

‎docs/class.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,22 @@
22

33
## Class
44

5-
ES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
5+
ES5通过构造函数，定义并生成新对象。下面是一个例子。
6+
7+
```javascript
8+
9+
function Point(x,y){
10+
this.x = x;
11+
this.y = y;
12+
}
13+
14+
Point.prototype.toString = function () {
15+
return '('+this.x+', '+this.y+')';
16+
}
17+
18+
```
19+
20+
ES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。上面的代码用“类”改写，就是下面这样。
621

722
```javascript
823

@@ -207,6 +222,18 @@ export default 42;
207222

208223
```
209224

225+
export default也可以用来输出类。
226+
227+
```javascript
228+
229+
// MyClass.js
230+
export default class { ... }
231+
232+
// main.js
233+
import MyClass from 'MyClass'
234+
235+
```
236+
210237
## 模块的继承
211238

212239
模块之间也可以继承。

‎docs/destructuring.md

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,21 @@ var [foo] = 1;
5151
var [foo] = 'Hello';
5252
var [foo] = false;
5353
var [foo] = NaN;
54+
var [bar, foo] = [1];
5455

5556
```
5657

57-
以上几种情况都属于解构不成功，foo的值都会等于undefined。但是，如果对undefined或null进行解构，就会报错。
58+
以上几种情况都属于解构不成功，foo的值都会等于undefined。另一种情况是不完全解构。
59+
60+
```javascript
61+
62+
var [x, y] = [1, 2, 3];
63+
64+
```
65+
66+
上面代码中，x和y可以顺利取到值。
67+
68+
如果对undefined或null进行解构，会报错。
5869

5970
```javascript
6071

@@ -73,6 +84,9 @@ var [foo] = null;
7384
var [foo = true] = [];
7485
foo // true
7586

87+
[x, y='b'] = ['a'] // x=3, y='b'
88+
[x, y='b'] = ['a', undefined] // x=3, y='b'
89+
7690
```
7791

7892
解构赋值不仅适用于var命令，也适用于let和const命令。
@@ -215,9 +229,11 @@ var { foo, bar } = example();
215229

216230
```javascript
217231

218-
function f({x, y, z}) {
219-
// ...
220-
}
232+
function f([x]) { ... }
233+
234+
f(['a'])
235+
236+
function f({x, y, z}) { ... }
221237

222238
f({x:1, y:2, z:3})
223239

‎docs/function.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,8 @@ add(...numbers) // 42
186186

187187
```
188188

189+
上面代码中，`array.push(...items)`和`add(...numbers)`这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。
190+
189191
扩展运算符可以简化求出一个数组最大元素的写法。
190192

191193
```javascript

‎docs/generator.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,31 @@ setTimeout(function () {
7474

7575
上面代码中，只有调用next方法时，函数f才会执行。
7676

77+
利用Generator函数，可以在任意对象上部署iterator接口。
78+
79+
```javascript
80+
81+
function* iterEntries(obj) {
82+
let keys = Object.keys(obj);
83+
for (let i=0; i < keys.length; i++) {
84+
let key = keys[i];
85+
yield [key, obj[key]];
86+
}
87+
}
88+
89+
let myObj = { foo: 3, bar: 7 };
90+
91+
for (let [key, value] of iterEntries(myObj)) {
92+
console.log(key, value);
93+
}
94+
95+
// foo 3
96+
// bar 7
97+
98+
```
99+
100+
上述代码中，由于Generator函数返回一个具有iterator接口的对象，所以只要让yield语句每次返回一个参数对象的成员，就可以在任意对象上部署next方法。
101+
77102
## next方法的参数
78103

79104
yield语句本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值。

‎docs/iterator.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ it.next().value // '2'
5454

5555
```
5656

57+
在ES6中，数组、类似数组的对象、Set和Map结构，都原生具备iterator接口，可以被for...of循环遍历。
58+
5759
## for...of循环
5860

5961
ES6中，一个对象只要部署了next方法，就被视为具有iterator接口，就可以用for...of循环遍历它的值。下面用上一节的idMaker函数生成的it遍历器作为例子。
@@ -91,6 +93,8 @@ for(let v of arr) {
9193

9294
```
9395

96+
for...of循环完全可以取代数组实例的forEach方法。
97+
9498
JavaScript原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6提供for...of循环，允许遍历获得键值。
9599

96100
```javascript
@@ -114,7 +118,7 @@ for (a of arr) {
114118

115119
```
116120

117-
上面代码表明，for...in循环读取键名，for...of循环读取键值。
121+
上面代码表明，for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法，参见《数组的扩展》章节。
118122

119123
对于Set和Map结构的数据，可以直接使用for...of循环。
120124

‎docs/object.md

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,18 @@ __proto__属性，用来读取或设置当前对象的prototype对象。该属
5252

5353
```javascript
5454

55+
// es6的写法
56+
5557
var obj = {
5658
__proto__: someOtherObj,
5759
method: function() { ... }
5860
}
5961

62+
// es5的写法
63+
64+
var obj = Object.create(someOtherObj);
65+
obj.method = function() { ... }
66+
6067
```
6168

6269
有了这个属性，实际上已经不需要通过Object.create()来生成新对象了。
@@ -260,15 +267,23 @@ a.size // 1
260267
let specialMethod = Symbol();
261268

262269
let obj = {
263-
[specialMethod]: function (arg) {
264-
...
265-
}
270+
[specialMethod]: function (arg) { ... }
266271
};
267272

268273
obj[specialMethod](123);
269274

270275
```
271276

277+
采用增强的对象写法，上面代码的obj对象可以写得更简洁一些。
278+
279+
```javascript
280+
281+
let obj = {
282+
[specialMethod](arg) { ... }
283+
};
284+
285+
```
286+
272287
Symbol类型作为属性名，不会出现在for...in循环中，也不会被Object.getOwnPropertyNames方法返回，但是有一个对应的Object.getOwnPropertySymbols方法，以及Object.getOwnPropertyKeys方法都可以获取Symbol属性名。
273288

274289
```javascript

‎docs/reference.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
- Ryan Dao, [Summary of ECMAScript 6 major features](http://ryandao.net/portal/content/summary-ecmascript-6-major-features)
1717
- Luke Hoban, [ES6 features](https://github.com/lukehoban/es6features)
1818
- Traceur-compiler, [Language Features](https://github.com/google/traceur-compiler/wiki/LanguageFeatures): Traceur文档列出的一些ES6例子
19+
- Axel Rauschmayer, [ECMAScript 6: what’s next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 关于ES6新增语法的综合介绍，有很多例子
1920

2021
## 语法点
2122

‎docs/set-map.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ s.has(2) // false
6262

6363
```
6464

65-
下面是一个对比，看看在判断是否包括一个键上面，对象和Set的写法不同。
65+
下面是一个对比，看看在判断是否包括一个键上面，对象结构和Set结构的写法不同。
6666

6767
```javascript
6868

@@ -109,6 +109,8 @@ function dedupe(array) {
109109

110110
```
111111

112+
Set的遍历，可以借助for...of循环完成，参见《Iterator和for...of循环》章节。
113+
112114
## WeakSet
113115

114116
WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set有两个区别。

‎docs/string.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,3 +247,14 @@ console.log(`${ x } + ${ y } = ${ x + y}`)
247247
```
248248

249249
上面代码表示，在模板字符串中嵌入变量，需要将变量名写在${}之中。
250+
251+
模板字符串使得字符串与变量的结合，变得容易。下面是一个例子。
252+
253+
```javascript
254+
255+
if (x > MAX) {
256+
throw new Error(`Most ${MAX} allowed: ${x}!`);
257+
// 传统写法为'Most '+MAX+' allowed: '+x+'!'
258+
}
259+
260+
```

0 commit comments

Comments
 (0)