ES7、ES8、ES9、ES10新特性大盘点

前言

https://mp.weixin.qq.com/s?__biz=Mzg5NDEyMzA2NQ==&mid=2247485281&idx=1&sn=43fdce67cee84ee122e1c72216dc85a8&chksm=c0252a37f752a321cff72808eb1e974826b27e16334fb2d3d4dedf3a9fb88cc51f333e3b554f&mpshare=1&scene=1&srcid=&sharer_sharetime=1591187835534&sharer_shareid=1b3fec889f336f42cbf3a621a215dfa9&key=05cf80b74e2f0d3af2fa5df492cad2b056a5767966d1ee4e13f17de1aff962022d8bb189e61f56dda05d123e5fb39280eeaa4d6c85b4fc8df4697e0df13c7b759a71d2d50bd1e65a30f23525302677cb&ascene=1&uin=ODg4NzQyMzQx&devicetype=Windows+10+x64&version=62090529&lang=zh_CN&exportkey=ASTWQrroCoKYIylPeexsxl4%3D&pass_ticket=vIxkLhhzGCV3NT4c1ByDF1YsucxO%2F159KUkR0GeO%2FGHA7z9n7JXIx6YN5m2kE%2B7T

ES7新特性

1.Array.prototype.includes()方法

const arr = [1, 3, 5, 2, ‘8‘, NaN, -0]arr.includes(1) // truearr.includes(1, 2) // false 该方法的第二个参数表示搜索的起始位置，默认为0arr.includes(‘1‘) // falsearr.includes(NaN) // truearr.includes(+0) // true

• indexOf()

if (arr.indexOf(el) !== -1) {  // ...}

[NaN].indexOf(NaN)// -1

• find() 和 findIndex()

[1, 4, -5, 10].find((n) => n < 0) // -5[1, 5, 10, 15].findIndex(function(value) {  return value > 9;}) // 2[NaN].findIndex(y => Object.is(NaN, y)) // 0

2.求幂运算符**

console.log(2**10);// 输出1024zhiccconsole.log(Math.pow(2, 10)) // 输出1024

ES8新特性

1.Async/Await

fetch(‘https://blog.csdn.net/‘)  .then(response => {    console.log(response)    return fetch(‘https://juejin.im/‘)  })  .then(response => {    console.log(response)  })  .catch(error => {    console.log(error)  })

async function foo () {  try {    let response1 = await fetch(‘https://blog.csdn.net/‘)    console.log(response1)    let response2 = await fetch(‘https://juejin.im/‘)    console.log(response2)  } catch (err) {    console.error(err)  }}foo()

async function foo () {  return ‘浪里行舟‘}foo().then(val => {  console.log(val) // 浪里行舟})

async function foo () {  return Promise.resolve(‘浪里行舟‘)}foo().then(val => {  console.log(val) // 浪里行舟})

2.Object.values()，Object.entries()

const obj = { foo: ‘bar‘, baz: 42 };Object.values(obj) // ["bar", 42]const obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };Object.values(obj) // ["b", "c", "a"]

const obj = { foo: ‘bar‘, baz: 42 };Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]const obj = { 10: ‘xxx‘, 1: ‘yyy‘, 3: ‘zzz‘ };Object.entries(obj); // [[‘1‘, ‘yyy‘], [‘3‘, ‘zzz‘], [‘10‘: ‘xxx‘]]

3.String padding

String.padStart(targetLength,[padString])

• targetLength(必填):当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
• padString(可选):填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "。

‘x‘.padStart(4, ‘ab‘) // ‘abax‘‘x‘.padEnd(5, ‘ab‘) // ‘xabab‘

‘12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-MM-12"‘09-12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-09-12"

4.Object.getOwnPropertyDescriptors()

const obj = {  name: ‘浪里行舟‘,  get bar () {    return ‘abc‘  }}console.log(Object.getOwnPropertyDescriptors(obj))

const source = {  set foo (value) {    console.log(value)  },  get bar () {    return ‘浪里行舟‘  }}const target1 = {}Object.assign(target1, source)console.log(Object.getOwnPropertyDescriptor(target1, ‘foo‘))

const source = {  set foo (value) {    console.log(value)  },  get bar () {    return ‘浪里行舟‘  }}const target2 = {}Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source))console.log(Object.getOwnPropertyDescriptor(target2, ‘foo‘))

ES9新特性

1.for await of

// for of遍历function Gen (time) {  return new Promise(function (resolve, reject) {    setTimeout(function () {      resolve(time)    }, time)  })}async function test () {  let arr = [Gen(2000), Gen(100), Gen(3000)]  for (let item of arr) {    console.log(Date.now(), item.then(console.log))  }}test()

function Gen (time) {  return new Promise(function (resolve, reject) {    setTimeout(function () {      resolve(time)    }, time)  })}async function test () {  let arr = [Gen(2000), Gen(100), Gen(3000)]  for await (let item of arr) {    console.log(Date.now(), item)  }}test()// 1575536194608 2000// 1575536194608 100// 1575536195608 3000

2.Object Rest Spread

const arr1 = [10, 20, 30];const copy = [...arr1]; // 复制console.log(copy);    // [10, 20, 30]const arr2 = [40, 50];const merge = [...arr1, ...arr2]; // 合并console.log(merge);    // [10, 20, 30, 40, 50]console.log(Math.max(...arr));    // 30 拆解

const input = {  a: 1,  b: 2,  c: 1}const output = {  ...input,  c: 3}console.log(output) // {a: 1, b: 2, c: 3}

const input = {  a: 1,  b: 2}const output = {  ...input,  c: 3}input.a=‘浪里行舟‘console.log(input,output) // {a: "浪里行舟", b: 2} {a: 1, b: 2, c: 3}

const obj = {x: {y: 10}};const copy1 = {...obj};    const copy2 = {...obj}; obj.x.y=‘浪里行舟‘console.log(copy1,copy2) // x: {y: "浪里行舟"} x: {y: "浪里行舟"}console.log(copy1.x === copy2.x);    // → true

const input = {  a: 1,  b: 2,  c: 3}let { a, ...rest } = inputconsole.log(a, rest) // 1 {b: 2, c: 3}

3.Promise.prototype.finally()

fetch(‘https://www.google.com‘)  .then((response) => {    console.log(response.status);  })  .catch((error) => {     console.log(error);  })  .finally(() => {     document.querySelector(‘#spinner‘).style.display = ‘none‘;  });

4.新的正则表达式特性

• s (dotAll) 标志
• 命名捕获组
• Lookbehind 后行断言
• Unicode属性转义

（1）s(dotAll)flag

console.log(/foo.bar/.test(‘foo\nbar‘)) // falseconsole.log(/foo.bar/s.test(‘foo\nbar‘)) // true

const re = /foo.bar/s // Or, `const re = new RegExp(‘foo.bar‘, ‘s‘);`.console.log(re.test(‘foo\nbar‘)) // trueconsole.log(re.dotAll) // trueconsole.log(re.flags) // ‘s‘

（2）命名捕获组

const re = /(\d{4})-(\d{2})-(\d{2})/;const match= re.exec(‘2019-01-01‘);console.log(match[0]);    // → 2019-01-01console.log(match[1]);    // → 2019console.log(match[2]);    // → 01console.log(match[3]);    // → 01

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;const match = re.exec(‘2019-01-01‘);console.log(match.groups);          // → {year: "2019", month: "01", day: "01"}console.log(match.groups.year);     // → 2019console.log(match.groups.month);    // → 01console.log(match.groups.day);      // → 01

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/const usDate = ‘2018-04-30‘.replace(re, ‘$<month>-$<day>-$<year>‘)console.log(usDate) // 04-30-2018

（3）Lookbehind 后行断言

let test = ‘hello world‘console.log(test.match(/hello(?=\sworld)/))// ["hello", index: 0, input: "hello world", groups: undefined]

let test = ‘world hello‘console.log(test.match(/(?<=world\s)hello/))// ["hello", index: 6, input: "world hello", groups: undefined]

（4）Unicode属性转义

const str = ‘?‘;console.log(/\d/u.test(str));    // → falseconsole.log(/\p{Number}/u.test(str));     // → true

const str = ‘?‘;console.log(/\p{Alphabetic}/u.test(str));     // → true// the \w shorthand cannot match ?console.log(/\w/u.test(str));    // → false

console.log(/\P{Number}/u.test(‘?‘));    // → falseconsole.log(/\P{Number}/u.test(‘?‘));    // → trueconsole.log(/\P{Alphabetic}/u.test(‘?‘));    // → trueconsole.log(/\P{Alphabetic}/u.test(‘?‘));    // → false

ES10新特性

1.Array.prototype.flat()

newArray = arr.flat(depth) // depth是指定要提取嵌套数组的结构深度，默认值为 1	

const numbers1 = [1, 2, [3, 4, [5, 6]]]console.log(numbers1.flat())// [1, 2, 3, 4, [5, 6]]const numbers2 = [1, 2, [3, 4, [5, 6]]]console.log(numbers2.flat(2))// [1, 2, 3, 4, 5, 6]

2.Array.prototype.flatMap()

let arr = [1, 2, 3]console.log(arr.map(item => [item * 2]).flat()) // [2, 4, 6]console.log(arr.flatMap(item => [item * 2])) // [2, 4, 6]

3.Object.fromEntries()

const object = { x: 23, y:24 };const entries = Object.entries(object); // [[‘x‘, 23], [‘y‘, 24]]const result = Object.fromEntries(entries); // { x: 23, y: 24 }

// ES10之前const obj = {  a: 21,  b: 22,  c: 23}console.log(Object.entries(obj)) // [[‘a‘,21],["b", 22],["c", 23]]let arr = Object.entries(obj).filter(([a, b]) => b > 21) // [["b", 22],["c", 23]]let obj1 = {}for (let [name, age] of arr) {  obj1[name] = age}console.log(obj1) // {b: 22, c: 23}

// 用Object.fromEntries()来实现const obj = {  a: 21,  b: 22,  c: 23}let res = Object.fromEntries(Object.entries(obj).filter(([a, b]) => b > 21))console.log(111, res) // {b: 22, c: 23}

4.String.trimStart 和 String.trimEnd

let str = ‘ 前端工匠 ‘console.log(str.length) // 6str = str.trimStart()console.log(str.length) // 5let str1 = str.trim() // 清除前后的空格console.log(str1.length) // 4str.replace(/^\s+/g, ‘‘) // 也可以用正则实现开头删除空格

let str = ‘ 浪里行舟 ‘console.log(str.length) // 6str = str.trimEnd()console.log(str.length) // 5let str1 = str.trim() //清除前后的空格console.log(str1.length) // 4str.replace(/\s+$/g, ‘‘) // 也可以用正则实现右端移除空白字符

5.String.prototype.matchAll

function collectGroup1 (regExp, str) {  const matches = []  while (true) {    const match = regExp.exec(str)    if (match === null) break    matches.push(match[1])  }  return matches}console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))// [ ‘foo‘, ‘bar‘, ‘baz‘ ]

function collectGroup1 (regExp, str) {  let results = []  for (const match of str.matchAll(regExp)) {    results.push(match[1])  }  return results}console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))// ["foo", "bar", "baz"]

6.try…catch

// ES10之前try {  // tryCode} catch (err) {  // catchCode}

// ES10try {  console.log(‘Foobar‘)} catch {  console.error(‘Bar‘)}

7.BigInt

// 超过 53 个二进制位的数值，无法保持精度Math.pow(2, 53) === Math.pow(2, 53) + 1 // true// 超过 2 的 1024 次方的数值，无法表示Math.pow(2, 1024) // Infinity

const aNumber = 111;const aBigInt = BigInt(aNumber);aBigInt === 111n // truetypeof aBigInt === ‘bigint‘ // truetypeof 111 // "number"typeof 111n // "bigint"

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (new in ECMAScript 2015)
• BigInt (new in ECMAScript 2019)

8.Symbol.prototype.description

Symbol(‘desc‘).description;  // "desc"Symbol(‘‘).description;      // ""Symbol().description;        // undefined

9.Function.prototype.toString()

function sum(a, b) {  return a + b;}console.log(sum.toString());// function sum(a, b) {//  return a + b;// }

参考资料

• 再学JavaScript ES（6-10）全版本语法大全
• ECMAScript 6 入门
• MDN文档
• ES2019新特性你知道哪些？
• ES2018新特性——每个JS开发者都需要了解
• 细解JavaScript ES7 ES8 ES9 新特性 

ES7、ES8、ES9、ES10新特性大盘点

原文：https://www.cnblogs.com/maxiag/p/13381949.html