es9 新特性——迹忆客-ag捕鱼王app官网
在这里,我们将了解 es9 中的新特性。 让我们从了解异步生成器开始。
异步生成器和迭代
可以使用 async
关键字使异步生成器异步。 定义异步生成器的语法如下:
async function* generator_name() {
//statements
}
示例
以下示例显示了一个异步生成器,它在每次调用生成器的 next()
方法时返回 promise。
async function* load(){
yield await promise.resolve(1);
yield await promise.resolve(2);
yield await promise.resolve(3);
}
let l = load();
l.next().then(r=>console.log(r))
l.next().then(r=>console.log(r))
l.next().then(r=>console.log(r))
l.next().then(r=>console.log(r))
上述代码输出结果如下
{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}
for await of 循环
异步迭代不能使用传统的 for..of
循环语法迭代,因为它们返回 promise 。 es9 引入了 for await of
循环来支持异步迭代。
下面给出了使用 for await of
循环的语法,其中,
- 在每次迭代中,不同属性的值被分配给变量,并且变量可以用
const
、let
或var
声明。 - iterable - 要迭代其可迭代属性的对象。
for await (variable of iterable) {
statement
}
示例
以下示例显示了使用 for await of
循环来迭代异步生成器。
async function* load(){
yield await promise.resolve(1);
yield await promise.resolve(2);
yield await promise.resolve(3);
}
async function test(){
for await (const val of load()){
console.log(val)
}
}
test();
console.log('end of script')
上述代码输出结果如下
end of script
1
2
3
以下示例使用 for await of
循环迭代数组。
async function fntest(){
for await (const val of [10,20,30,40]){
console.log(val)
}
}
fntest();
console.log('end of script')
上述代码输出结果如下
end of script
10
20
30
40
rest/spread 属性
es9 支持对对象使用 rest
和 spread
运算符。
示例:对象和 rest 运算符
以下示例显示了对对象使用 rest
运算符。 student 的 age 属性的值被复制到 age 变量中,而其余属性的值被复制到使用 rest 语法“...”的另一个变量中。
const student = {
age:10,
height:5,
weight:50
}
const {age,...other} = student;
console.log(age)
console.log(other)
上述代码输出结果如下
10
{height: 5, weight: 50}
示例:对象和展开运算符
展开运算符可用于组合多个对象或克隆对象。 这在以下示例中显示
//spread operator
const obj1 = {a:10,b:20}
const obj2={c:30}
//clone obj1
const clone_obj={...obj1}
//combine obj1 and obj2
const obj3 = {...obj1,...obj2}
console.log(clone_obj)
console.log(obj3)
上述代码输出结果如下
{a: 10, b: 20}
{a: 10, b: 20, c: 30}
promise: finally()
finally()
会在 promise 完成时执行,无论其结果如何。 这个函数返回一个承诺。 它可用于避免 promise 的 then()
和 catch()
处理程序中的代码重复。
语法
下面提到的语法是针对函数 finally()
的。
promise.finally(function() {
});
promise.finally(()=> {
});
示例
以下示例声明了一个异步函数,该函数在延迟 3 秒后返回正数的平方。 如果传递负数,该函数将抛出错误。 finally
块中的语句在任何一种情况下都会执行,无论 promise 是被拒绝还是已解决。
let asyncsquarefn = function(n1){
return new promise((resolve,reject)=>{
settimeout(()=>{
if(n1>=0){
resolve(n1*n1)
}
else reject('not_positive_no')
},3000)
})
}
console.log('start')
asyncsquarefn(10)//modify to add -10
.then(result=>{
console.log("result is",result)
}).catch(error=>console.log(error))
.finally(() =>{
console.log("inside finally")
console.log("executes all the time")
})
console.log("end");
上述代码输出结果如下
start
end
//after 3 seconds
result is 100
inside finally
executes all the time
模板文字修订
从 es7 开始,标记模板符合以下转义序列的规则 -
- unicode 转义序列使用“\u”表示,例如 \u2764\ufe0f
- unicode 代码点转义序列使用“\u{}”表示,例如 \u{2f}
- 十六进制转义序列使用“\x”表示,例如\xa8
- 八进制文字转义序列使用“”表示,后跟一位或多位数字,例如 \125
在 es2016 及更早版本中,如果将无效转义序列与标记函数一起使用,将抛出语法错误,如下所示
// 具有无效 unicode 序列的标记函数
mytagfn`\unicode1`
// syntaxerror: malformed unicode character escape sequence
但是,与早期版本不同的是,es9 将无效的 unicode
序列解析为 undefined 并且不会抛出错误。 这在以下示例中显示
function mytagfn(str) {
return { "parsed": str[0] }
}
let result1 =mytagfn`\unicode1` //invalid unicode character
console.log(result1)
let result2 =mytagfn`\u2764\ufe0f`//valid unicode
console.log(result2)
上述代码输出结果如下
{parsed: undefined}
{parsed: "❤️"}
原始字符串
es9 引入了一个特殊的属性 raw,可用于标记函数的第一个参数。 此属性允许我们在输入原始字符串时访问它们,而无需处理转义序列。
function mytagfn(str) {
return { "parsed": str[0], "raw": str.raw[0] }
}
let result1 =mytagfn`\unicode`
console.log(result1)
let result2 =mytagfn`\u2764\ufe0f`
console.log(result2)
上述代码输出结果如下
{parsed: undefined, raw: "\unicode"}
{parsed: "❤️", raw: "\u2764\ufe0f"}
正则表达式功能
在正则表达式中,点运算符或句点用于匹配单个字符。 这 .
点运算符跳过换行符,如 \n
、\r
,如下例所示
console.log(/fql.jiyik/.test('fql_jiyik')); //true
console.log(/fql.jiyik/.test('fql\njiyik')); //false
console.log(/fql.jiyik/.test('fql\rjiyik')); //false
正则表达式模式表示为 /regular_expression/
。 test()
方法接受一个字符串参数并搜索正则表达式模式。 在上面的示例中,test()
方法搜索以 fql 开头的模式,后跟任何单个字符并以 point 结尾。 如果我们在 fql 和 jiyik 之间的输入字符串中使用 \n 或 \r,则 test()
方法将返回 false。
true
false
false
es9 引入了一个新标志 - dotallflag \s
,它可以与 regex 一起使用来匹配行终止符和表情符号。 这在以下示例中显示
console.log(/fql.jiyik/s.test('fql\njiyik'));
console.log(/fql.jiyik/s.test('fql\rjiyik'));
上述代码输出结果如下
true
true
命名捕获组
在 es9 之前,捕获组是通过索引访问的。 es9 允许我们为捕获组分配名称。 下面给出了相同的语法
(?pattern1)
示例
const birthdatepattern = /(?[0-9]{4})-(?[0-9]{2})/;
const birthdate = birthdatepattern.exec('1999-04');
console.log(birthdate.groups.myyear);
console.log(birthdate.groups.mymonth);
上述代码输出结果如下
1999
04