【JavaScript】ES7（ECMAScript 2016）到ES9（ECMAScript 2018）总结

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。