es新特性

1.es2015的主要新特性

1.let 和const ，用于申明块级作用域的变量和常量

2.引入箭头函数，可以更加简介的定义函数

3.模板字符串，可以更加方便地拼接字符串

4.解构赋值，可以更加方便地从数组或对象中提取值，赋值给变量

let obj = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing',
    street: 'Chaoyang'
  }
};

let { name, age, address: { city, street }, job = 'engineer' } = obj;

5.对象字面量扩展语法，可以更加方便地创建和操作对象。

6.promise，可以更加方便的处理异步操作

7.class，可以更加方便的创建面向对象的代码

8.export import 模块化，可以更加方便的管理代码

// myModule.js
export const myVAlue = "nihao";
export function myFunction(param) {
  // ...
}

// main.js
import { myVAlue, myFunction } from "./myModule.js";

2.es2016的主要新特性

1.新增了数组方法includes()，用于判断数组中是否包含某个元素，返回一个布尔值

2.新增了指数操作符，用于计算一个数的幂次方，例如2**3等于8

3.promise引入finally方法，不管promise对象最终状态如何，度会执行finally里的回调

4.async/await，使异步的代码看起来更加同步化和简洁

async function getFunction() {
  let list = await getListInfo();
  let listData = await getListInfoDatas(list.id);
  return { list, listData };
}

getFunction().then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

5.函数参数默认值，函数定义中给参数指定默认值，当函数调用时没有传入对应的参数时，会使用默认值

3.es2017的主要新特性

1. Object.values()和Object.entries()方法，用于返回对象的属性的数组和属性值的数组

2.新增了字符串的方法 padStart()和padEnd()方法，用于在字符串的前面或者后面添加指定的字符，达到想要的长度

let str = '123';
console.log(str.padStart(5, '0')); // '00123'
console.log(str.padEnd(5, '0')); // '12300'

3.async和await中添加try...catch语句，来捕获异步代码中的错误

4.es2018的主要新特性

1.正则表达式 Unicode 转义

Unicode property escapes - JavaScript | MDN

2.非转义序列的模板字符串，模板字符串中可以嵌入非转义序列的Unicode码

let s = '\u{1F60D}';
console.log(`smile: ${s}`); // smile: 😍

3.防止对象扩展操作,Object对象新增了Object.preventExtensions()和Object.isExtensible()方法

let data = { a: 1 };
Object.preventExtensions(data);
data.b = 2; //报错
console.log(Object.isExtensible(data)); // false

5.es2019的主要新特性

1.数组的方法中新增flat()和flatMap()

var arr = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var newArr = arr.flat(Infinity);
// newArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const a = [
  { id: 1, name: 'zhangSan', tags: ['tag1', 'tag2'] },
  { id: 2, name: 'liSi', tags: ['tag3', 'tag4'] },
  { id: 3, name: 'wangWu', tags: [] },
];

const newA = a
  .flatMap(item => {
    if (item.tags.length) {
      return item.tags.map(tag => ({ id: item.id, tag }));
    }
    return { id: item.id, tag: 'no tag' };
  })
  .filter(ele => ele.tag !== 'no tag');

console.log(newA);
// Output: [{id: 1, tag: "tag1"}, {id: 1, tag: "tag2"}, {id: 2, tag: "tag3"}, {id: 2, tag: "tag4"}]

const arr = [{id: 1, name: 'liSi', tags:'tag1'}, {id: 2, name: 'wangWu', tags: 'tag3'}];
const flatArr = arr.flatMap(obj => obj.tags);
console.log(flatArr); //['tag1','tag3']

const newArr = [{id: 1, name: 'liSi'}, {id: 2, name: 'wangWu'}, {id: 3, name: 'zhangSan'}];
const flatArr = newArr.flatMap(obj => [obj.id, obj.name]);
console.log(flatArr); // [1, "liSi", 2, "wangWu", 3, "zhangSan"]

2. 字符串新增了两种方法trimStart() 和trimEnd()，用于去除字符串前后的空格

let str = '  hello world  ';
console.log(str.trimStart()); // 'hello world  '
console.log(str.trimEnd()); // '  hello world'

3.对象新增了Object.fromEntries()方法，用于将键值对的数组转换成对象

const newArr = ['A', 'B', 'C', 'B', 'A', 'A', 'D', 'C', 'A'];

const newEntries = [...new Set(newArr)].map((item) => [item, newArr.filter((i) => i === item).length]);

const obj = Object.fromEntries(newEntries);

console.log(obj);
// Output: { A: 4, B: 2, C: 2, D: 1 }

const newData = [['a', 1], ['b', 2], ['c', 3]];
const objData = Object.fromEntries(newData);
console.log(objData);
// 输出: { a: 1, b: 2, c: 3 }

6.es2020的主要新特性

1.可选链运算符（?.）, (挺好用的，用的也比较多)

可选链运算符（?.） - JavaScript | MDN

2.空值合并（??）,检查一个值是否为null或undefined，如果是，则使用默认值 

（width?? 50 ）//如果宽度是null或undefined的时候，会默认是50

3.Promise.allSettled()，并行处理多个Promise对象，不论它们是否成功执行，会返回所有的结果组成的数组

Promise.allSettled() - JavaScript | MDN

//并行执行多个异步操作
function runPromisesWithTimer(promises, delay = 0) {
  const delayedPromises = promises.map(p => new Promise(resolve => setTimeout(() => resolve(p), delay)));
  return Promise.allSettled(delayedPromises);
}
//使用
const promises = [
  Promise.resolve('第一个结果'),
  Promise.reject(new Error('失败的结果')),
  Promise.resolve('第三个结果')
];

runPromisesWithTimer(promises, 2000)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(`成功：${result.value}`);
      } else {
        console.log(`失败：${result.reason}`);
      }
    });
  });

4.matchAll()，在字符串中匹配所有的正则表达式，返回一个迭代器对象，该对象包含每个匹配的结果

6. 正则的扩展 - String.prototype.matchAll() - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack 

5.BigInt，处理超出JavaScript Number类型所能表示的大整数

7.es2021的主要新特性

1.字符串新增replaceAll()，可以在字符串中替换所有匹配的字符

2.逻辑赋值运算符（&&=， ||=， ??=）

// 如果 x 为真值，则将 y 赋值给 x， 否则返回 x
let x = 1
const y = 100
x &&= y // x 为 100

// 如果 x 为真值，返回 x，否则将 y 赋值给 x
let x = NaN
const y = 100
x ||= y // x 为 100

//（x ??= y）仅在 x 是空值（null 或 undefined）时对其赋值

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration);
// Expected output: 50

a.speed ??= 25;
console.log(a.speed);
// Expected output: 25

3.下划线（_）来分割数字， 使其更容易阅读

4.Promise.any()方法，Promise只有一个静态方法Promise.all()用于并行执行多个异步操作并等待所有操作都完成后返回结果。ES2021中新增了Promise.any()方法，它与Promise.all()不同的是，只要其中一个Promise实例成功，Promise.any()就会立即返回一个新的Promise实例。

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));

// Expected output: "quick"

8. es2022的主要新特性

 待定....

想要详细了解的，可以点击下面的链接

ECMAScript 6 入门 - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack