ES6(2015)-ES13(2022)新增特性大总结

通常所说的ES6泛指ES6及ES6以后的版本。

今年叫ES13,跟苹果13香一样的名字,看看文章末尾,预计会新增10个新特性。很香的感觉。

一、ES6(ES2015)改动最多,主要是让JS工程化,构建化

新增了如下:

  1. 变量
  2. 箭头函数
  3. 新增了数组的方法,比如map、filter等
  4. 解构赋值
  5. 函数默认值和rest参数
  6. 对象的简洁表示法
  7. 快速深复制数组和对象
  8. 模板字符串
  9. 新增了JS模块化,但是大部分浏览器都不支持,只能通过webpack等工具构建
  10. 面向对象:Class类用来代替之前的prototype实现继承
  11. Promise 。这个主要是让异步操作同步化。方法有all,race,它的实例有then和catch方法,让异步可链式操作
二、ES7(ES2016)

主要是新增了:

  1. 幂操作

    //ES5求幂
    math.pow(3,2)//ES7求幂
    let a=3**2; //结果:9
    
    
  2. 给数组添加了Array.includes(要检测的数据) 方法

    含义:有点类似于indexof方法,但是这里不是查找下标,而是看是否包含有,如果有,则返回true

三、ES8(ES2017)

主要新增了:

asyncawait

作用是让异步操作同步化更加到位。

也就是Promise在某些场景下可以使用async和await代替,比如需要通过if语句来确定加载哪个json的情况,如果用Promise则会陷入嵌套,这时可以用async和await来实现。

注意:await关键词只能在async函数中出现

示例:

//使用fetch完成数据请求,注意,fetch发明之处是用来代替XMLHttpRequest对象的。
//fetch会返回一个Promise实例
fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json')
    .then(res => res.json())
    .then(json => console.log(json))
//解释,res.json()会格式化JSON数据,并且它会返回一个Promise对象,所以才可以用2次then

//以上改为 async如下:
(async () => {
    const res = await fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json');
    const json = await res.json();
    console.log(json);
    // [{ name: "张三", age: 18 }, { name: "李四", age: 20 }, { name: "王五", age: 22 }]
})();
//以上表示先等待第一个fetch完成,然后等等待第二个完成
四、ES9(ES2018)

主要新增了:

  1. rest参数和spread 扩展运算符

  2. 异步迭代

    指的是异步操作时使用循环

  3. Promise新增了一个 finally方法

    意思是当所有的请求都完事了(不管是否成功)都会触发

  4. 对正则表达式进行了一些增强

    比如将字符串的那4个可用正则的方法归属到了正则对象中,新增了/u修饰符和y修饰符等

五、ES10(ES2019)

主要新增特性:

  1. Array的新方法flat和flatMapflat

flat表示扁平化数组,即将嵌套的数组分离出来变成一维数组。

这个曾经出现在腾讯的面试题中。

语法:Array.flat(层级);

[1,2,[3,4]].flat(0);//不变
[1,2,[3,4]].flat(1);//变成  一维数组,这个1表示往外提取一层,即二维变成1维

flatMap是map和flat的结合,下面的两个操作是等价的:

arr.flatMap(func)
arr.map(func).flat(1)

2.String的新方法trimStart和trimEnd
3.JSON 被归为ECMAScript的子集,原先是独立于JS的

六、ES11(ES2020)

主要新增特性:

  1. 动态 import ()

    注意区别于ES6的import属性,因为这是静态的

    使用场景如下:

    //vue router中动态导入一个组件(动态方法)
    component: () => import(/* webpackChunkName: "index" */ '../views/index.vue')
    
    //ES6的import属性(静态属性)
    import Vue from 'vue'
    
  2. 新增BigIntBigInt

    是一个内置的对象,它提供了一种方法来表示大于 2⁵³-1 的整数,BigInt 可用于任意大整数。

    注意:并不是新增了一个数据类型,只是让原本的整数可容纳的值更多。

七、ES12(ES2021)

主要新增特性:

  1. String.prototype.replaceAll

    有了这个 API,替换字符不用写正则了

    const str = "hello world";
    // 之前
    str.replace(/o/g, "a")// "hella warld"
    // 现在
    str.replaceAll("o", "a")// "hella warld"
    
  2. 新增Promise的any方法

    作用:返回第一个fullfilled 的 promise ,若全部 reject,则返回一个带有失败原因的 AggregateError。

    即与race差不多,与 Promise.race 不同,当其中一个 promises是fail 时,它不会 reject。

    请看官方提供例子-检查哪个网站更快

    Promise.any([ 
      fetch('https://v8.dev/').then(() => 'home'), 
      fetch('https://v8.dev/blog').then(() => 'blog'), 
      fetch('https://v8.dev/docs').then(() => 'docs')])
    .then((first) => { 
      // Any of the promises was fulfilled. 
      console.log(first); 
      // → 'home'
    })
    .catch((error) => { 
      // All of the promises were rejected. 
      console.log(error);
    });
    
  3. 新增逻辑赋值操作符: ??=, &&=, ||=

八、ES13(ES2022)

预计6月发布,敬请期待。目前总共有10 个提案进入 Stage 4 ,它们可能会被吸纳进 ECMAScript 2022。

这里列举几个分别如下:

  1. Class Fields

    声明类的字段。

  2. Private Fields, Methods

    该提案属于 Class Fields 系列提案的一部分,其使用#前缀定义类的私有方法和字段。

  3. Object.hasOwn

    简单来说,该提案就是使用Object.hasOwn替代Object.prototype.hasOwnProperty.call,是一种更简洁、更可靠地检查属性是否直接设置在对象上的方法。

  4. Error Cause

    Error Cause 是阿里巴巴提出的提案,据称也是中国首个进入 Stage 4 的 TC39 提案。

  5. Top-Level Await

    原先await只能在async内使用,新的提案 Top-Level await则允许在 Async functions 之外使用await(例如 CLI 脚本,以及动态导入和数据加载)。

    要获取更多ES13信息,请访问:https://github.com/tc39

注意事项:
  1. 如果要将ES6转为兼容的代码就需要使用babel转
  2. ESLint、JSLint等带lint单词的都是代码检测和代码编写风格的辅助性工具
  3. 如果你还不知道ES,不知道ES和JS的关系,赶紧关注我吧!

以上由WEB前端全栈圈公众号(imqdcn)整理和首发,未经授权禁止转载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值