mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
edit object
This commit is contained in:
parent
6fae5b1d8b
commit
a6ec140c7f
@ -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);
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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修饰符的提取结果是一样的。但是,一旦出现非法字符,两者的行为就不一样了。
|
||||
|
Loading…
x
Reference in New Issue
Block a user