diff --git a/docs/class.md b/docs/class.md new file mode 100644 index 0000000..5d539d0 --- /dev/null +++ b/docs/class.md @@ -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。 diff --git a/docs/arrow.md b/docs/function.md similarity index 52% rename from docs/arrow.md rename to docs/function.md index 0e086bf..49694d3 100644 --- a/docs/arrow.md +++ b/docs/function.md @@ -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允许使用“箭头”（=>）定义函数。 @@ -51,9 +150,6 @@ var sum = (num1, num2) => { return num1 + num2; } var getTempItem = id => ({ id: id, name: "Temp" }); ``` - -##实例：回调函数 - 箭头函数的一个用处是简化回调函数。 ```javascript @@ -82,8 +178,6 @@ var result = values.sort((a, b) => a - b); ``` -## 注意点 - 箭头函数有几个使用注意点。 - 函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。 diff --git a/docs/object.md b/docs/object.md index 0de8acb..4a8691f 100644 --- a/docs/object.md +++ b/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允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 @@ -71,101 +86,77 @@ a["last word"] // "world" ``` -## 函数参数的默认值 +## symbols -ES6允许为函数的参数设置默认值。 +ES6引入了一种新的原始数据类型symbol。它通过Symbol函数生成。 ```javascript -function Point(x = 0, y = 0) { - this.x = x; - this.y = y; -} +var mySymbol = Symbol('Test'); -var p = new Point(); -// p = { x:0, y:0 } +mySymbol.name +// Test + +typeof mySymbol +// "symbol" ``` -任何带有默认值的参数，被视为可选参数。不带默认值的参数，则被视为必需参数。 +上面代码表示，Symbol函数接受一个字符串作为参数，用来指定生成的symbol的名称，可以通过name属性读取。typeof运算符的结果，表明Symbol是一种单独的数据类型。 -## rest（...）运算符 +注意，Symbol函数前不能使用new命令，否则会报错。这是因为生成的symbol是一个原始类型的值，不是对象。 -ES6引入rest运算符（...），用于获取函数的多余参数，这样就不需要使用arguments.length了。rest运算符后面是一个数组变量，该变量将多余的参数放入数组中。 +symbol的最大特点，就是每一个symbol都是不相等的，保证产生一个独一无二的值。 ```javascript -function add(...values) { - let sum = 0; +let red = Symbol(); +let green = Symbol(); +let blue = Symbol(); - for (var val of values) { - sum += val; - } - - return sum; -} - -add(2, 5, 3) // 10 +function handleColor(color) { + switch (color) { + case red: + ... + case green: + ... + case blue: + ... + } +} ``` -上面代码的add函数是一个求和函数，利用rest运算符，可以向该函数传入任意数目的参数。 +上面代码中，red、green、blue三个变量都是Symbol类型，它们的值是不相等的。 -下面是一个利用rest运算符改写数组push方法的例子。 +由于这种特点，Symbol类型适合作为标识符，用于对象的属性名，保证了属性名之间不会发生冲突。如果一个对象由多个模块构成，不会出现同名的属性。 ```javascript -function push(array, ...items) { - items.forEach(function(item) { - array.push(item); - console.log(item); - }); -} - -var a = []; -push(a, "a1", "a2", "a3", "a4"); +var a = {}; +var mySymbol = Symbol(); + +a[mySymbol] = 'Hello!'; + +//另一种写法 +Object.defineProperty(a, mySymbol, { value: 'Hello!' }); ``` -注意，rest参数不能再有其他参数，否则会报错。 +上面代码通过点结构和Object.defineProperty两种方法，为对象增加一个属性。 + +如果要在对象内部使用symbol属性名，必须采用属性名表达式。 ```javascript -// 报错 -function f(a, ...b, c) { - // ... -} +let specialMethod = Symbol(); + +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了。 diff --git a/docs/reference.md b/docs/reference.md index 63c831c..20012ea 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -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/) - 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) +- 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) ## 语法点 diff --git a/sidebar.md b/sidebar.md index 3d955c9..e8cfa68 100644 --- a/sidebar.md +++ b/sidebar.md @@ -10,11 +10,12 @@ - [let和const命令](#docs/let) - [字符串的扩展](#docs/string) - [数值的扩展](#docs/number) -- [对象和函数的扩展](#docs/object) -- [箭头函数](#docs/arrow) +- [对象的扩展](#docs/object) +- [函数的扩展](#docs/function) - [Iterator和for...of循环](#docs/iterator) - [Generator函数](#docs/generator) - [Promise对象](#docs/promise) +- [Class](#docs/class) - [参考链接](#docs/reference) ## 其他