mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
add docs/function
This commit is contained in:
parent
1e33cd5159
commit
e89a116463
43
docs/class.md
Normal file
43
docs/class.md
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
# class
|
||||||
|
|
||||||
|
ES6引入了Class(类)这个概念,可以定义class,作为对象的模板。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
class Point {
|
||||||
|
|
||||||
|
constructor(x, y) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
toString() {
|
||||||
|
return '('+this.x+', '+this.y+')';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码定义了一个class类,可以看到里面有一个constructor函数,这就是构造函数。而this关键字则代表实例对象。
|
||||||
|
|
||||||
|
class之间可以通过extends关键字,实现继承。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
class ColorPoint extends Point {
|
||||||
|
|
||||||
|
constructor(x, y, color) {
|
||||||
|
super(x, y); // same as super.constructor(x, y)
|
||||||
|
this.color = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
toString() {
|
||||||
|
return this.color+' '+super();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。在constructor方法内,super就指代父类Point。
|
@ -1,6 +1,105 @@
|
|||||||
# 箭头函数
|
# 函数的扩展
|
||||||
|
|
||||||
## 定义
|
## 函数参数的默认值
|
||||||
|
|
||||||
|
ES6允许为函数的参数设置默认值。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function Point(x = 0, y = 0) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
var p = new Point();
|
||||||
|
// p = { x:0, y:0 }
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
任何带有默认值的参数,被视为可选参数。不带默认值的参数,则被视为必需参数。
|
||||||
|
|
||||||
|
## rest(...)运算符
|
||||||
|
|
||||||
|
ES6引入rest运算符(...),用于获取函数的多余参数,这样就不需要使用arguments.length了。rest运算符后面是一个数组变量,该变量将多余的参数放入数组中。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function add(...values) {
|
||||||
|
let sum = 0;
|
||||||
|
|
||||||
|
for (var val of values) {
|
||||||
|
sum += val;
|
||||||
|
}
|
||||||
|
|
||||||
|
return sum;
|
||||||
|
}
|
||||||
|
|
||||||
|
add(2, 5, 3) // 10
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码的add函数是一个求和函数,利用rest运算符,可以向该函数传入任意数目的参数。
|
||||||
|
|
||||||
|
下面是一个利用rest运算符改写数组push方法的例子。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function push(array, ...items) {
|
||||||
|
items.forEach(function(item) {
|
||||||
|
array.push(item);
|
||||||
|
console.log(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var a = [];
|
||||||
|
push(a, "a1", "a2", "a3", "a4");
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
注意,rest参数不能再有其他参数,否则会报错。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
// 报错
|
||||||
|
function f(a, ...b, c) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
rest运算符不仅可以用于函数定义,还可以用于函数调用。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function f(s1, s2, s3, s4, s5) {
|
||||||
|
console.log(s1 + s2 + s3 + s4 +s5);
|
||||||
|
}
|
||||||
|
|
||||||
|
var a = ["a2", "a3", "a4", "a5"];
|
||||||
|
|
||||||
|
f("a1", ...a)
|
||||||
|
// a1a2a3a4a5
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
从上面的例子可以看出,rest运算符的另一个重要作用是,可以将数组转变成正常的参数序列。利用这一点,可以简化求出一个数组最大元素的写法。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
// ES5
|
||||||
|
Math.max.apply(null, [14, 3, 77])
|
||||||
|
|
||||||
|
// ES6
|
||||||
|
Math.max(...[14, 3, 77])
|
||||||
|
|
||||||
|
// 等同于
|
||||||
|
Math.max(14, 3, 77);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码表示,由于JavaScript不提供求数组最大元素的函数,所以只能套用Math.max函数,将数组转为一个参数序列,然后求最大值。有了rest运算符以后,就可以直接用Math.max了。
|
||||||
|
|
||||||
|
## 箭头函数
|
||||||
|
|
||||||
ES6允许使用“箭头”(=>)定义函数。
|
ES6允许使用“箭头”(=>)定义函数。
|
||||||
|
|
||||||
@ -51,9 +150,6 @@ var sum = (num1, num2) => { return num1 + num2; }
|
|||||||
var getTempItem = id => ({ id: id, name: "Temp" });
|
var getTempItem = id => ({ id: id, name: "Temp" });
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
##实例:回调函数
|
|
||||||
|
|
||||||
箭头函数的一个用处是简化回调函数。
|
箭头函数的一个用处是简化回调函数。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -82,8 +178,6 @@ var result = values.sort((a, b) => a - b);
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 注意点
|
|
||||||
|
|
||||||
箭头函数有几个使用注意点。
|
箭头函数有几个使用注意点。
|
||||||
|
|
||||||
- 函数体内的this对象,绑定定义时所在的对象,而不是使用时所在的对象。
|
- 函数体内的this对象,绑定定义时所在的对象,而不是使用时所在的对象。
|
129
docs/object.md
129
docs/object.md
@ -14,6 +14,21 @@ Object.is(NaN, NaN) // true
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## __proto__属性
|
||||||
|
|
||||||
|
ES6正式将__proto__属性写入了标准,用来指定对象的prototype对象。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
var obj = {
|
||||||
|
__proto__: someOtherObj,
|
||||||
|
method: function() { ... }
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
有了这个属性,实际上已经不需要通过Object.create()来生成新对象了。
|
||||||
|
|
||||||
## 增强的对象写法
|
## 增强的对象写法
|
||||||
|
|
||||||
ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
|
ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
|
||||||
@ -71,101 +86,77 @@ a["last word"] // "world"
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 函数参数的默认值
|
## symbols
|
||||||
|
|
||||||
ES6允许为函数的参数设置默认值。
|
ES6引入了一种新的原始数据类型symbol。它通过Symbol函数生成。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
function Point(x = 0, y = 0) {
|
var mySymbol = Symbol('Test');
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
}
|
|
||||||
|
|
||||||
var p = new Point();
|
mySymbol.name
|
||||||
// p = { x:0, y:0 }
|
// Test
|
||||||
|
|
||||||
|
typeof mySymbol
|
||||||
|
// "symbol"
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
任何带有默认值的参数,被视为可选参数。不带默认值的参数,则被视为必需参数。
|
上面代码表示,Symbol函数接受一个字符串作为参数,用来指定生成的symbol的名称,可以通过name属性读取。typeof运算符的结果,表明Symbol是一种单独的数据类型。
|
||||||
|
|
||||||
## rest(...)运算符
|
注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的symbol是一个原始类型的值,不是对象。
|
||||||
|
|
||||||
ES6引入rest运算符(...),用于获取函数的多余参数,这样就不需要使用arguments.length了。rest运算符后面是一个数组变量,该变量将多余的参数放入数组中。
|
symbol的最大特点,就是每一个symbol都是不相等的,保证产生一个独一无二的值。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
function add(...values) {
|
let red = Symbol();
|
||||||
let sum = 0;
|
let green = Symbol();
|
||||||
|
let blue = Symbol();
|
||||||
|
|
||||||
for (var val of values) {
|
function handleColor(color) {
|
||||||
sum += val;
|
switch (color) {
|
||||||
}
|
case red:
|
||||||
|
...
|
||||||
return sum;
|
case green:
|
||||||
}
|
...
|
||||||
|
case blue:
|
||||||
add(2, 5, 3) // 10
|
...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码的add函数是一个求和函数,利用rest运算符,可以向该函数传入任意数目的参数。
|
上面代码中,red、green、blue三个变量都是Symbol类型,它们的值是不相等的。
|
||||||
|
|
||||||
下面是一个利用rest运算符改写数组push方法的例子。
|
由于这种特点,Symbol类型适合作为标识符,用于对象的属性名,保证了属性名之间不会发生冲突。如果一个对象由多个模块构成,不会出现同名的属性。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
function push(array, ...items) {
|
var a = {};
|
||||||
items.forEach(function(item) {
|
var mySymbol = Symbol();
|
||||||
array.push(item);
|
|
||||||
console.log(item);
|
a[mySymbol] = 'Hello!';
|
||||||
});
|
|
||||||
}
|
//另一种写法
|
||||||
|
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
|
||||||
var a = [];
|
|
||||||
push(a, "a1", "a2", "a3", "a4");
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
注意,rest参数不能再有其他参数,否则会报错。
|
上面代码通过点结构和Object.defineProperty两种方法,为对象增加一个属性。
|
||||||
|
|
||||||
|
如果要在对象内部使用symbol属性名,必须采用属性名表达式。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
// 报错
|
let specialMethod = Symbol();
|
||||||
function f(a, ...b, c) {
|
|
||||||
// ...
|
let obj = {
|
||||||
}
|
[specialMethod]: function (arg) {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
obj[specialMethod](123);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
rest运算符不仅可以用于函数定义,还可以用于函数调用。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
|
|
||||||
function f(s1, s2, s3, s4, s5) {
|
|
||||||
console.log(s1 + s2 + s3 + s4 +s5);
|
|
||||||
}
|
|
||||||
|
|
||||||
var a = ["a2", "a3", "a4", "a5"];
|
|
||||||
|
|
||||||
f("a1", ...a)
|
|
||||||
// a1a2a3a4a5
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
从上面的例子可以看出,rest运算符的另一个重要作用是,可以将数组转变成正常的参数序列。利用这一点,可以简化求出一个数组最大元素的写法。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
|
|
||||||
// ES5
|
|
||||||
Math.max.apply(null, [14, 3, 77])
|
|
||||||
|
|
||||||
// ES6
|
|
||||||
Math.max(...[14, 3, 77])
|
|
||||||
|
|
||||||
// 等同于
|
|
||||||
Math.max(14, 3, 77);
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
上面代码表示,由于JavaScript不提供求数组最大元素的函数,所以只能套用Math.max函数,将数组转为一个参数序列,然后求最大值。有了rest运算符以后,就可以直接用Math.max了。
|
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
- Dale Schouten, [10 Ecmascript-6 tricks you can perform right now](http://html5hub.com/10-ecmascript-6-tricks-you-can-perform-right-now/)
|
- Dale Schouten, [10 Ecmascript-6 tricks you can perform right now](http://html5hub.com/10-ecmascript-6-tricks-you-can-perform-right-now/)
|
||||||
- Domenic Denicola, [ES6: The Awesome Parts](http://www.slideshare.net/domenicdenicola/es6-the-awesome-parts)
|
- Domenic Denicola, [ES6: The Awesome Parts](http://www.slideshare.net/domenicdenicola/es6-the-awesome-parts)
|
||||||
- Nicholas C. Zakas, [Understanding ECMAScript 6](https://github.com/nzakas/understandinges6)
|
- Nicholas C. Zakas, [Understanding ECMAScript 6](https://github.com/nzakas/understandinges6)
|
||||||
|
- 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)
|
||||||
|
|
||||||
## 语法点
|
## 语法点
|
||||||
|
@ -10,11 +10,12 @@
|
|||||||
- [let和const命令](#docs/let)
|
- [let和const命令](#docs/let)
|
||||||
- [字符串的扩展](#docs/string)
|
- [字符串的扩展](#docs/string)
|
||||||
- [数值的扩展](#docs/number)
|
- [数值的扩展](#docs/number)
|
||||||
- [对象和函数的扩展](#docs/object)
|
- [对象的扩展](#docs/object)
|
||||||
- [箭头函数](#docs/arrow)
|
- [函数的扩展](#docs/function)
|
||||||
- [Iterator和for...of循环](#docs/iterator)
|
- [Iterator和for...of循环](#docs/iterator)
|
||||||
- [Generator函数](#docs/generator)
|
- [Generator函数](#docs/generator)
|
||||||
- [Promise对象](#docs/promise)
|
- [Promise对象](#docs/promise)
|
||||||
|
- [Class](#docs/class)
|
||||||
- [参考链接](#docs/reference)
|
- [参考链接](#docs/reference)
|
||||||
|
|
||||||
## 其他
|
## 其他
|
||||||
|
Loading…
x
Reference in New Issue
Block a user