mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
Merge branch 'gh-pages' of github.com:ruanyf/es6tutorial into gh-pages
This commit is contained in:
ruanyf
commit
b9a5cb16f2
@ -50,7 +50,7 @@ fs.readFile(fileA, function (err, data) {
|
||||
});
|
||||
```
|
||||
|
||||
不难想象，如果依次读取多个文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。这种情况就称为“回调函数噩梦”（callback hell）。
|
||||
不难想象，如果依次读取多个文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。这种情况就称为"回调函数噩梦"（callback hell）。
|
||||
|
||||
Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的横向加载，改成纵向加载。采用Promise，连续读取多个文件，写法如下。
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ import { stat, exists, readFile } from 'fs';
|
||||
|
||||
## 严格模式
|
||||
|
||||
ES6的模块自动采用严格模式，不管你有没有在模块头部加上`"use strict"`。
|
||||
ES6的模块自动采用严格模式，不管你有没有在模块头部加上`"use strict";`。
|
||||
|
||||
严格模式主要有以下限制。
|
||||
|
||||
@ -181,16 +181,16 @@ export default es6;
|
||||
|
||||
```javascript
|
||||
// 提案的写法
|
||||
export v from "mod";
|
||||
export v from 'mod';
|
||||
|
||||
// 现行的写法
|
||||
export {v} from "mod";
|
||||
export {v} from 'mod';
|
||||
```
|
||||
|
||||
`import`语句会执行所加载的模块，因此可以有下面的写法。
|
||||
|
||||
```javascript
|
||||
import 'lodash'
|
||||
import 'lodash';
|
||||
```
|
||||
|
||||
上面代码仅仅执行`lodash`模块，但是不输入任何值。
|
||||
@ -220,8 +220,8 @@ export function circumference(radius) {
|
||||
|
||||
import { area, circumference } from './circle';
|
||||
|
||||
console.log("圆面积：" + area(4));
|
||||
console.log("圆周长：" + circumference(14));
|
||||
console.log('圆面积：' + area(4));
|
||||
console.log('圆周长：' + circumference(14));
|
||||
```
|
||||
|
||||
上面写法是逐一指定要加载的方法，整体加载的写法如下。
|
||||
@ -229,8 +229,8 @@ console.log("圆周长：" + circumference(14));
|
||||
```javascript
|
||||
import * as circle from './circle';
|
||||
|
||||
console.log("圆面积：" + circle.area(4));
|
||||
console.log("圆周长：" + circle.circumference(14));
|
||||
console.log('圆面积：' + circle.area(4));
|
||||
console.log('圆周长：' + circle.circumference(14));
|
||||
```
|
||||
|
||||
## export default命令
|
||||
@ -256,7 +256,7 @@ import customName from './export-default';
|
||||
customName(); // 'foo'
|
||||
```
|
||||
|
||||
上面代码的`impor`t命令，可以用任意名称指向`export-default.js`输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时`import`命令后面，不使用大括号。
|
||||
上面代码的`import`命令，可以用任意名称指向`export-default.js`输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时`import`命令后面，不使用大括号。
|
||||
|
||||
`export default`命令用在非匿名函数前，也是可以的。
|
||||
|
||||
@ -394,8 +394,8 @@ export { area as circleArea } from 'circle';
|
||||
```javascript
|
||||
// main.js
|
||||
|
||||
import * as math from "circleplus";
|
||||
import exp from "circleplus";
|
||||
import * as math from 'circleplus';
|
||||
import exp from 'circleplus';
|
||||
console.log(exp(math.e));
|
||||
```
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
在ES5中，RegExp构造函数只能接受字符串作为参数。
|
||||
|
||||
```javascript
|
||||
var regex = new RegExp("xyz", "i");
|
||||
var regex = new RegExp('xyz', 'i');
|
||||
// 等价于
|
||||
var regex = /xyz/i;
|
||||
```
|
||||
@ -54,7 +54,7 @@ ES6对正则表达式添加了`u`修饰符，含义为“Unicode模式”，用
|
||||
点（.）字符在正则表达式中，含义是除了换行符以外的任意单个字符。对于码点大于`0xFFFF`的Unicode字符，点字符不能识别，必须加上u修饰符。
|
||||
|
||||
```javascript
|
||||
var s = "𠮷";
|
||||
var s = '𠮷';
|
||||
|
||||
/^.$/.test(s) // false
|
||||
/^.$/u.test(s) // true
|
||||
@ -112,7 +112,7 @@ function codePointLength(text) {
|
||||
return result ? result.length : 0;
|
||||
}
|
||||
|
||||
var s = "𠮷𠮷";
|
||||
var s = '𠮷𠮷';
|
||||
|
||||
s.length // 4
|
||||
codePointLength(s) // 2
|
||||
@ -136,7 +136,7 @@ codePointLength(s) // 2
|
||||
y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。
|
||||
|
||||
```javascript
|
||||
var s = "aaa_aa_a";
|
||||
var s = 'aaa_aa_a';
|
||||
var r1 = /a+/g;
|
||||
var r2 = /a+/y;
|
||||
|
||||
@ -207,7 +207,7 @@ REGEX.lastIndex // 4
|
||||
进一步说，`y`修饰符号隐含了头部匹配的标志ˆ。
|
||||
|
||||
```javascript
|
||||
/b/y.exec("aba")
|
||||
/b/y.exec('aba')
|
||||
// null
|
||||
```
|
||||
|
||||
@ -307,7 +307,7 @@ ES6为正则表达式新增了flags属性，会返回正则表达式的修饰符
|
||||
|
||||
```javascript
|
||||
function escapeRegExp(str) {
|
||||
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
||||
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
|
||||
}
|
||||
|
||||
let str = '/path/to/resource.html?search=query';
|
||||
@ -320,13 +320,13 @@ escapeRegExp(str)
|
||||
已经有[提议](https://esdiscuss.org/topic/regexp-escape)将这个需求标准化，作为RegExp对象的静态方法[RegExp.escape()](https://github.com/benjamingr/RexExp.escape)，放入ES7。2015年7月31日，TC39认为，这个方法有安全风险，又不愿这个方法变得过于复杂，没有同意将其列入ES7，但这不失为一个真实的需求。
|
||||
|
||||
```javascript
|
||||
RegExp.escape("The Quick Brown Fox");
|
||||
RegExp.escape('The Quick Brown Fox');
|
||||
// "The Quick Brown Fox"
|
||||
|
||||
RegExp.escape("Buy it. use it. break it. fix it.")
|
||||
RegExp.escape('Buy it. use it. break it. fix it.');
|
||||
// "Buy it\. use it\. break it\. fix it\."
|
||||
|
||||
RegExp.escape("(*.*)");
|
||||
RegExp.escape('(*.*)');
|
||||
// "\(\*\.\*\)"
|
||||
```
|
||||
|
||||
@ -342,8 +342,8 @@ assert.equal(String(regex), '/hello\. how are you\?/g');
|
||||
|
||||
```javascript
|
||||
var escape = require('regexp.escape');
|
||||
escape('hi. how are you?')
|
||||
"hi\\. how are you\\?"
|
||||
escape('hi. how are you?');
|
||||
// "hi\\. how are you\\?"
|
||||
```
|
||||
|
||||
## 后行断言
|
||||
@ -355,22 +355,22 @@ JavaScript语言的正则表达式，只支持先行断言（lookahead）和先
|
||||
”先行断言“指的是，`x`只有在`y`前面才匹配，必须写成`/x(?=y)/`。比如，只匹配百分号之前的数字，要写成`/\d+(?=%)/`。”先行否定断言“指的是，`x`只有不在`y`前面才匹配，必须写成`/x(?!y)/`。比如，只匹配不在百分号之前的数字，要写成`/\d+(?!%)/`。
|
||||
|
||||
```javascript
|
||||
/\d+(?=%)/.exec("100% of US presidents have been male") // ["100"]
|
||||
/\d+(?!%)/.exec("that’s all 44 of them") // ["44"]
|
||||
/\d+(?=%)/.exec('100% of US presidents have been male') // ["100"]
|
||||
/\d+(?!%)/.exec('that’s all 44 of them') // ["44"]
|
||||
```
|
||||
|
||||
上面两个字符串，如果互换正则表达式，就会匹配失败。另外，还可以看到，”先行断言“括号之中的部分（`(?=%)`），是不计入返回结果的。
|
||||
|
||||
”后行断言“正好与”先行断言“相反，`x`只有在`y`后面才匹配，必须写成`/(?<=y)x/`。比如，只匹配美元符号之后的数字，要写成`/(?<=\$)\d+/`。”后行否定断言“则与”先行否定断言“相反，`x`只有不在`y`后面才匹配，必须写成`/(?<!y)x/`。比如，只匹配不在美元符号后面的数字，要写成`/(?<!\$)\d+/`。
|
||||
"后行断言"正好与"先行断言"相反，`x`只有在`y`后面才匹配，必须写成`/(?<=y)x/`。比如，只匹配美元符号之后的数字，要写成`/(?<=\$)\d+/`。”后行否定断言“则与”先行否定断言“相反，`x`只有不在`y`后面才匹配，必须写成`/(?<!y)x/`。比如，只匹配不在美元符号后面的数字，要写成`/(?<!\$)\d+/`。
|
||||
|
||||
```javascript
|
||||
/(?<=\$)\d+/.exec("Benjamin Franklin is on the $100 bill") // ["100"]
|
||||
/(?<!\$)\d+/.exec("it’s is worth about €90") // ["90"]
|
||||
/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill') // ["100"]
|
||||
/(?<!\$)\d+/.exec('it’s is worth about €90') // ["90"]
|
||||
```
|
||||
|
||||
上面的例子中，”后行断言“的括号之中的部分（`(?<=\$)`），也是不计入返回结果。
|
||||
上面的例子中，"后行断言"的括号之中的部分（`(?<=\$)`），也是不计入返回结果。
|
||||
|
||||
”后行断言“的实现，需要先匹配`/(?<=y)x/`的`x`，然后再回到左边，匹配`y`的部分。这种”先右后左“的执行顺序，与所有其他正则操作相反，导致了一些不符合预期的行为。
|
||||
"后行断言"的实现，需要先匹配`/(?<=y)x/`的`x`，然后再回到左边，匹配`y`的部分。这种"先右后左"的执行顺序，与所有其他正则操作相反，导致了一些不符合预期的行为。
|
||||
|
||||
首先，”后行断言“的组匹配，与正常情况下结果是不一样的。
|
||||
|
||||
@ -379,13 +379,13 @@ JavaScript语言的正则表达式，只支持先行断言（lookahead）和先
|
||||
/^(\d+)(\d+)$/.exec('1053') // ["1053", "105", "3"]
|
||||
```
|
||||
|
||||
上面代码中，需要捕捉两个组匹配。没有”后行断言“时，第一个括号是贪婪模式，第二个括号只能捕获一个字符，所以结果是`105`和`3`。而”后行断言“时，由于执行顺序是从右到左，第二个括号是贪婪模式，第一个括号只能捕获一个字符，所以结果是`1`和`053`。
|
||||
上面代码中，需要捕捉两个组匹配。没有"后行断言"时，第一个括号是贪婪模式，第二个括号只能捕获一个字符，所以结果是`105`和`3`。而"后行断言"时，由于执行顺序是从右到左，第二个括号是贪婪模式，第一个括号只能捕获一个字符，所以结果是`1`和`053`。
|
||||
|
||||
其次，”后行断言“的反斜杠引用，也与通常的顺序相反，必须放在对应的那个括号之前。
|
||||
其次，"后行断言"的反斜杠引用，也与通常的顺序相反，必须放在对应的那个括号之前。
|
||||
|
||||
```javascript
|
||||
/(?<=(o)d\1)r/.exec("hodor") // null
|
||||
/(?<=\1d(o))r/.exec("hodor") // ["r", "o"]
|
||||
/(?<=(o)d\1)r/.exec('hodor') // null
|
||||
/(?<=\1d(o))r/.exec('hodor') // ["r", "o"]
|
||||
```
|
||||
|
||||
上面代码中，如果后行断言的反斜杠引用（`\1`）放在括号的后面，就不会得到匹配结果，必须放在前面才可以。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user