【JavaScript】ES7(ECMAScript 2016)到ES9(ECMAScript 2018)总结

  • Post author:
  • Post category:java




ES7(ECMAScript 2016)



1.Array.prototype.includes()

数组includes()方法,用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。includes 函数与 indexOf 函数很相似

list.includes(x) === list.indexOf(x) >= 0



2.指数操作符 **

在ES7中引入了指数运算符**,**具有与Math.pow(…)等效的计算结果。

console.log(2**10);// 输出1024 2的十次幂



ES8(ECMAScript 2017)



1.async/await: 异步终极解决方案

async/await可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码,使得异步代码看起来像同步代码。

async fetchData(query) =>{  
  try {      
    const response = await axios.get(`/query?query=${query}`); 
    const data = response.data;     
    return data;    
 }catch (error)    {      
   console.log(error)   
 }} 
fetchData(query).then(data =>{    
     this.processfetchedData(data)
})



2.Object.values()

Object.values()是一个与Object.keys()类似的新函数,但返回的是Object自身属性的所有值,不包括继承的值。

const obj = {a: 1, b: 2, c: 3};
// ES7
const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]
// ES8
const values=Object.values(obj1);
console.log(values);//[1, 2, 3]



3.Object.entries()

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

// ES7
Object.keys(obj).forEach(key=>{
    console.log('key:'+key+' value:'+obj[key]);
})
// ES8
for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}



4.String padding

允许将空字符串或其他字符串添加到原始字符串的开头或结尾



String.prototype.padStart

String.padStart(targetLength,[padString])

console.log('0.0'.padStart(4,'10')) //10.0
console.log('0.0'.padStart(20))// 0.00   



String.prototype.padEnd

String.padEnd(targetLength,padString])
console.log('0.0'.padEnd(4,'0')) //0.00    
console.log('0.0'.padEnd(10,'0'))//0.00000000


targetLength

: 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。


padString

: (可选) 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 ” “;



5.函数参数列表结尾允许逗号

方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更



6.Object.getOwnPropertyDescriptors()

获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象

在这里插入图片描述



7.SharedArrayBuffer 对象

用来表示一个通用的,固定长度的原始二进制数据缓冲区



8.Atomics 对象

提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作



ES9(ECMAScript 2018)



1. 异步迭代

ES2018引入异步迭代器(asynchronous iterators),await可以和for…of循环一起使用,以串行的方式运行异步操作


五种在循环中使用 async/await 的方法


两种形式:

  1. 表示只借助循环执行所有异步请求,不保证次序,我们简称为 “并行”
  2. 表示在循环中每个异步请求是按照次序来执行的,我们简称为 “串行”


并行的循环方法:

Array.forEach、Promise.all

串行的循环方法:

for…of…、reduce、generator

  • generator
//function*关键字可以在表达式内部定义一个生成器函数。
async function* generateSequence(items) {
for (const i of items) {
  await new Promise(resolve => setTimeout(resolve, i));
  yield i;
}
}

(async () => {
let generator = generateSequence(['3000','8000','1000','4000']);
for await (let value of generator) {
  console.log(value);
}
})();



2. Promise.finally()

一个Promise调用链要么成功到达最后一个.then(),要么失败触发.catch()。在某些情况下,你想要在无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。.finally()允许你指定最终的逻辑。

function doSomething() {
  doSomething1()
  .then(doSomething2)
  .then(doSomething3)
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    // finish here!
  });
}



3. Rest/Spread(扩展运算符) 属性

Rest 参数与 spread 扩展运算符在ES6中已经引入,不过ES6只针对于数组。

在ES9中为对象提供了像数组一样的 rest 参数和 扩展运算符



Rest参数

  • es6 (只应用于数组)

    剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

    restParam(1, 2, 3, 4, 5);
    
    function restParam(p1, p2, ...p3) {
      // p1 = 1
      // p2 = 2
      // p3 = [3, 4, 5]
    }
    
  • es9(应用于对象)


    跟数组一样,Rest参数只能在声明的结尾处使用。此外,它只适用于每个对象的顶层,如果对象中嵌套对象则无法适用。

    	const myObject = {
    	  a: 1,
    	  b: 2,
    	  c: 3
    	};
    	const { a, ...x } = myObject;
    	// a = 1
    	// x = { b: 2, c: 3 }
    	
    	// 或可以使用它给函数传递参数
    	restParam({
    	  a: 1,
    	  b: 2,
    	  c: 3
    	});
    	
    	function restParam({ a, ...x }) {
    	  // a = 1
    	  // x = { b: 2, c: 3 }
    	}
    



展开操作符

同Rest参数的逆运算。展开操作符以相反的方式工作,将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值

  • es6 (只应用于数组)

    const values = [99, 100, -1, 48, 16];
    console.log( Math.max(...values) ); // 100
    
  • es9(应用于对象)

    可以使用扩展运算符拷贝一个对象,像是这样obj2 = {…obj1},但是这只是一个对象的浅拷贝。扩展运算符可以在其他对象内使用,例如:

    const obj1 = { a: 1, b: 2, c: 3 };
    const obj2 = { ...obj1, z: 26 };
    // obj2 is { a: 1, b: 2, c: 3, z: 26 }
    

正则部分,需要去复习一下,先总结大概意思



正则表达式命名捕获组



之前

JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组

例如:以YYYY-MM-DD的格式解析日期:



es9

代码很难读懂,并且改变正则表达式的结构有可能改变匹配对象的索引。ES2018允许命名捕获组使用符号?<name>,在打开捕获括号**(**后立即命名,示例如下:

const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match.groups.year,  // 2018
  month  = match.groups.month, // 04
  day    = match.groups.day;   // 30

  • 任何匹配失败的命名组都将返回undefined
  • 命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式:

    在这里插入图片描述



正则表达式反向断言(lookbehind)



正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现,例如:

在这里插入图片描述



正则表达式 Unicode 转义

到目前为止,在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为\p{…}和\P{…},在正则表达式中使用标记 u (unicode) 设置,在\p块儿内,可以以键值对的方式设置需要匹配的属性而非具体内容。例如:

在这里插入图片描述

这个特性可以避免使用特定 Unicode 区间来进行内容类型判断,提升可读性和可维护性。



非转义序列的模板字符串

ES2018 移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制。

之前,\u开始一个 unicode 转义,\x开始一个十六进制转义,\后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能,例如Windows文件路径 C:\uuu\xxx\111。