mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
增加内容
This commit is contained in:
parent
d814b273c8
commit
08aa66f021
@ -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'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## 模块的继承
|
## 模块的继承
|
||||||
|
|
||||||
模块之间也可以继承。
|
模块之间也可以继承。
|
||||||
|
@ -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})
|
||||||
|
|
||||||
|
@ -186,6 +186,8 @@ add(...numbers) // 42
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
上面代码中,`array.push(...items)`和`add(...numbers)`这两行,都是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。
|
||||||
|
|
||||||
扩展运算符可以简化求出一个数组最大元素的写法。
|
扩展运算符可以简化求出一个数组最大元素的写法。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
@ -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语句的返回值。
|
||||||
|
@ -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循环。
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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: what’s next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 关于ES6新增语法的综合介绍,有很多例子
|
||||||
|
|
||||||
## 语法点
|
## 语法点
|
||||||
|
|
||||||
|
@ -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有两个区别。
|
||||||
|
@ -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+'!'
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user