1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

edit object

This commit is contained in:
ruanyf 2015-11-05 11:23:07 +08:00
parent 6fae5b1d8b
commit a6ec140c7f
4 changed files with 70 additions and 35 deletions

View File

@ -877,6 +877,17 @@ foo( 2, 4, 6, 8 );
另外,由于箭头函数没有自己的`this`,所以当然也就不能用`call()``apply()``bind()`这些方法去改变`this`的指向。
```javascript
(function() {
return [
(() => this.x).bind({ x: 'inner' })()
]
}).call({ x: 'outer' });
// ['outer']
```
上面代码中,箭头函数没有自己的`this`,所以`bind`方法无效,内部的`this`指向外部的`this`
长期以来JavaScript语言的`this`对象一直是一个令人头痛的问题,在对象方法中使用`this`,必须非常小心。箭头函数”绑定”`this`,很大程度上解决了这个困扰。
### 嵌套的箭头函数
@ -1152,7 +1163,6 @@ factorial(5) // 120
函数式编程有一个概念叫做柯里化currying意思是将多参数的函数转换成单参数的形式。这里也可以使用柯里化。
```javascript
function currying(fn, n) {
return function (m) {
return fn.call(this, m, n);

View File

@ -76,7 +76,7 @@ getPoint()
// {x:1, y:10}
```
模块输出变量,就非常合适使用简洁写法。
CommonJS模块输出变量,就非常合适使用简洁写法。
```javascript
var ms = {};
@ -121,6 +121,22 @@ var cart = {
}
```
注意,简洁写法的属性名总是字符串,这会导致一些看上去比较奇怪的结果。
```javascript
var obj = {
class () {}
};
// 等同于
var obj = {
'class': function() {}
};
```
上面代码中,`class`是字符串,所以不会因为它属于关键字,而导致语法解析报错。
如果某个方法的值是一个Generator函数前面需要加上星号。
```javascript

View File

@ -8,6 +8,7 @@
## 综合介绍
- Axel Rauschmayer, [Exploring ES6: Upgrade to the next version of JavaScript](http://exploringjs.com/es6/): ES6的专著本书的许多代码实例来自该书
- Sayanee Basu, [Use ECMAScript 6 Today](http://net.tutsplus.com/articles/news/ecmascript-6-today/)
- Ariya Hidayat, [Toward Modern Web Apps with ECMAScript 6](http://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/)
- Dale Schouten, [10 Ecmascript-6 tricks you can perform right now](http://html5hub.com/10-ecmascript-6-tricks-you-can-perform-right-now/)
@ -25,6 +26,7 @@
- Charles King, [The power of ECMAScript 6](http://charlesbking.com/power_of_es6/#/)
- Benjamin De Cock, [Frontend Guidelines](https://github.com/bendc/frontend-guidelines): ES6最佳实践
- Jani Hartikainen, [ES6: What are the benefits of the new features in practice?](http://codeutopia.net/blog/2015/01/06/es6-what-are-the-benefits-of-the-new-features-in-practice/)
- kangax, [Javascript quiz. ES6 edition](http://perfectionkills.com/javascript-quiz-es6/): ES6小测试
## let和const

View File

@ -29,14 +29,14 @@ new RegExp(/abc/ig, 'i').flags
ES6将这4个方法在语言内部全部调用RegExp的实例方法从而做到所有与正则相关的方法全都定义在RegExp对象上。
- String.prototype.match 调用 RegExp.prototype[Symbol.match]
- String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
- String.prototype.search 调用 RegExp.prototype[Symbol.search]
- String.prototype.split 调用 RegExp.prototype[Symbol.split]
- `String.prototype.match` 调用 `RegExp.prototype[Symbol.match]`
- `String.prototype.replace` 调用 `RegExp.prototype[Symbol.replace]`
- `String.prototype.search` 调用 `RegExp.prototype[Symbol.search]`
- `String.prototype.split` 调用 `RegExp.prototype[Symbol.split]`
## u修饰符
ES6对正则表达式添加了u修饰符含义为“Unicode模式”用来正确处理大于`\uFFFF`的Unicode字符。也就是说会正确处理四个字节的UTF-16编码。
ES6对正则表达式添加了`u`修饰符含义为“Unicode模式”用来正确处理大于`\uFFFF`的Unicode字符。也就是说会正确处理四个字节的UTF-16编码。
```javascript
/^\uD83D/u.test('\uD83D\uDC2A')
@ -45,7 +45,7 @@ ES6对正则表达式添加了u修饰符含义为“Unicode模式”用来
// true
```
上面代码中,“\uD83D\uDC2A”是一个四个字节的UTF-16编码代表一个字符。但是ES5不支持四个字节的UTF-16编码会将其识别为两个字符导致第二行代码结果为true。加了u修饰符以后ES6就会识别其为一个字符所以第一行代码结果为false。
上面代码中,“\uD83D\uDC2A”是一个四个字节的UTF-16编码代表一个字符。但是ES5不支持四个字节的UTF-16编码会将其识别为两个字符导致第二行代码结果为true。加了u修饰符以后ES6就会识别其为一个字符所以第一行代码结果为`false`
一旦加上u修饰符号就会修改下面这些正则表达式的行为。
@ -127,11 +127,11 @@ codePointLength(s) // 2
/[a-z]/iu.test('\u212A') // true
```
上面代码中不加u修饰符就无法识别非规范的K字符。
上面代码中,不加`u`修饰符就无法识别非规范的K字符。
## y修饰符
除了u修饰符ES6还为正则表达式添加了y修饰符叫做“粘连”sticky修饰符。
除了`u`修饰符ES6还为正则表达式添加了`y`修饰符叫做“粘连”sticky修饰符。
y修饰符的作用与g修饰符类似也是全局匹配后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于g修饰符只要剩余位置中存在匹配就可而y修饰符确保匹配必须从剩余的第一个位置开始这也就是“粘连”的涵义。
@ -161,41 +161,50 @@ r.exec(s) // ["aa_"]
上面代码每次匹配,都是从剩余字符串的头部开始。
使用lastIndex属性可以更好地说明y修饰符。
使用`lastIndex`属性,可以更好地说明`y`修饰符。
```javascript
const REGEX = /a/g;
REGEX.lastIndex = 2; // 指定从第三个位置y开始搜索
// 指定从2号位置y开始匹配
REGEX.lastIndex = 2;
// 匹配成功
const match = REGEX.exec('xaya');
match.index
// 3
REGEX.lastIndex
// 4
REGEX.exec('xaxa')
// null
// 在3号位置匹配成功
match.index // 3
// 下一次匹配从4号位开始
REGEX.lastIndex // 4
// 4号位开始匹配失败
REGEX.exec('xaxa') // null
```
上面代码中lastIndex属性指定每次搜索的开始位置g修饰符从这个位置开始向后搜索直到发现匹配为止。
上面代码中,`lastIndex`属性指定每次搜索的开始位置,`g`修饰符从这个位置开始向后搜索,直到发现匹配为止。
y修饰符同样遵守lastIndex属性但是要求必须在lastIndex指定的位置发现匹配。
y修饰符同样遵守`lastIndex`属性,但是要求必须在`lastIndex`指定的位置发现匹配。
```javascript
const REGEX = /a/y;
// 第三个位置y不匹配
// 指定从2号位置开始匹配
REGEX.lastIndex = 2;
console.log(REGEX.exec('xaya')); // null
// 第四个位置出现匹配
// 不是粘连,匹配失败
REGEX.exec('xaya') // null
// 指定从3号位置开始匹配
REGEX.lastIndex = 3;
// 3号位置是粘连匹配成功
const match = REGEX.exec('xaxa');
match.index // 3
REGEX.lastIndex // 4
```
进一步说y修饰符号隐含了头部匹配的标志ˆ
进一步说,`y`修饰符号隐含了头部匹配的标志ˆ
```javascript
/b/y.exec("aba")
@ -235,11 +244,17 @@ const REGEX = /a/gy;
上面代码中最后一个a因为不是出现下一次匹配的头部所以不会被替换。
如果同时使用g修饰符和y修饰符则y修饰符覆盖g修饰符。
y修饰符的主要作用是从字符串提取token词元y修饰符确保了匹配之间不会有漏掉的字符。
`y`修饰符的一个应用是从字符串提取token词元`y`修饰符确保了匹配之间不会有漏掉的字符。
```javascript
const TOKEN_Y = /\s*(\+|[0-9]+)\s*/y;
const TOKEN_G = /\s*(\+|[0-9]+)\s*/g;
tokenize(TOKEN_Y, '3 + 4')
// [ '3', '+', '4' ]
tokenize(TOKEN_G, '3 + 4')
// [ '3', '+', '4' ]
function tokenize(TOKEN_REGEX, str) {
let result = [];
let match;
@ -248,14 +263,6 @@ function tokenize(TOKEN_REGEX, str) {
}
return result;
}
const TOKEN_Y = /\s*(\+|[0-9]+)\s*/y;
const TOKEN_G = /\s*(\+|[0-9]+)\s*/g;
tokenize(TOKEN_Y, '3 + 4')
// [ '3', '+', '4' ]
tokenize(TOKEN_G, '3 + 4')
// [ '3', '+', '4' ]
```
上面代码中如果字符串里面没有非法字符y修饰符与g修饰符的提取结果是一样的。但是一旦出现非法字符两者的行为就不一样了。