ES2018指南

ECMAScript是JavaScript所基于的标准,并且通常缩写为ES。探索有关ECMAScript的所有内容以及ES2018(又名ES9)中添加的功能

ES2018是该版本的最新版本ECMAScript标准。

它引入了哪些新东西?

剩余/价差属性

ES6介绍了一个概念休息元素与...一起工作时阵列解构

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

传播元素

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018引入了相同的内容,但对象是相同的。

休息属性

const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

价差属性允许通过组合在之后传递的对象的属性来创建新对象点差算子

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

异步迭代

新构造for-await-of允许您使用异步可迭代对象作为循环迭代:

for await (const line of readLines(filePath)) {
  console.log(line)
}

由于这使用await,您只能在内部使用async功能,像普通的await(看异步/等待

Promise.prototype.finally()

兑现诺言后,成功调用then()方法,一个接一个。

如果在此期间发生故障,则then()方法被跳过,catch()方法被执行。

finally()允许您运行某些代码,而不管承诺是否成功执行:

fetch('file.json')
  .then(data => data.json())
  .catch(error => console.error(error))
  .finally(() => console.log('finished'))

正则表达式的改进

RegExp后置断言:根据其前面的字符串进行匹配

这是一个前瞻:您使用?=匹配后跟特定子字符串的字符串:

/Roger(?=Waters)/

/Roger(?= Waters)/.test(‘Roger is my dog’) //false /Roger(?= Waters)/.test(‘Roger is my dog and Roger Waters is a famous musician’) //true

?!执行逆运算,如果字符串是不是后跟一个特定的子字符串:

/Roger(?!Waters)/

/Roger(?! Waters)/.test(‘Roger is my dog’) //true /Roger(?! Waters)/.test(‘Roger Waters is a famous musician’) //false

先行者使用?=象征。它们已经可用。

向后看,一项新功能,使用?<=

/(?<=Roger) Waters/

/(?<=Roger) Waters/.test(‘Pink Waters is my dog’) //false /(?<=Roger) Waters/.test(‘Roger is my dog and Roger Waters is a famous musician’) //true

向后看是使用否定的?<!

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test(‘Pink Waters is my dog’) //true /(?<!Roger) Waters/.test(‘Roger is my dog and Roger Waters is a famous musician’) //false

Unicode属性转义\p{…}\P{…}

在正则表达式模式中,您可以使用\d匹配任何数字,\s匹配任何不是空格的字符,\w匹配任何字母数字字符,依此类推。

这项新功能将这一概念扩展到了所有引入的Unicode字符中\p{}及其否定\P{}

任何统一码字符具有一组属性。例如Script决定语言的种类ASCII是一个布尔值,对于ASCII字符是正确的,依此类推。您可以将此属性放在图形括号中,正则表达式将检查该属性是否为真:

/^\p{ASCII}+$/u.test('abc')   //✅
/^\p{ASCII}+$/u.test('[email protected]')  //✅
/^\p{ASCII}+$/u.test('ABC🙃') //❌

ASCII_Hex_Digit是另一个布尔属性,用于检查字符串是否仅包含有效的十六进制数字:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') //✅
/^\p{ASCII_Hex_Digit}+$/u.test('h')                //❌

还有许多其他布尔属性,您可以通过在图形括号中添加它们的名称来进行检查,包括UppercaseLowercaseWhite_SpaceAlphabeticEmoji和更多:

/^\p{Lowercase}$/u.test('h') //✅
/^\p{Uppercase}$/u.test('H') //✅

/^\p{Emoji}+$/u.test('H')   //❌
/^\p{Emoji}+$/u.test('🙃🙃') //✅

除了这些二进制属性外,您还可以检查任何unicode字符属性以匹配特定值。在此示例中,我检查字符串是否以希腊字母或拉丁字母书写:

/^\p{Script=Greek}+$/u.test('ελληνικά') //✅
/^\p{Script=Latin}+$/u.test('hey') //✅

阅读有关可以使用的所有属性的更多信息直接在提案上

命名捕获组

在ES2018中捕获小组可以分配一个名称,而不仅仅是在结果数组中分配一个插槽:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')

// result.groups.year === ‘2015’; // result.groups.month === ‘01’; // result.groups.day === ‘02’;

s正则表达式的标志

s标志,简称单线,导致.以匹配换行符。没有它,该点将匹配常规字符,但不匹配新行:

/hi.welcome/.test('hi\nwelcome') // false
/hi.welcome/s.test('hi\nwelcome') // true

免费下载我的JavaScript初学者手册


更多js教程: