ES6+对比

ES6+对比

es7~es12的新特性

  • es7(2016)

    • Array.includes()

      • 语法:arr.includes(valueToFind[, fromIndex])

      • 功能:判断一个基本类型一维数组是否包含指定值

      • 特点:相比indexOf()能够识别NaN

    • 幂运算符**

  • es8(es2017)

    • Object键值

      • Object.values 返回对象可遍历属性值

      • Object.entries 返回对象键值对数组

    • Object属性

      • Object.getOwnPropertyDescriptors 获得对象所有属性的描述符

      • Object.defineProperty(obj,key,config) es5设置对象属性

    • 字符串填充(目标长度,填充用字符串)

      • String.padStart(targetLength [, padString])

      • String.padEnd(targetLength [, padString])

    • 尾逗号

      • ES8允许函数的最后一个参数有尾逗号(Trailing comma),从而与数组和对象规则统一

      • function func(param1, param2,)

    • async/await

      • 作用:改进链式调用代码观感😅

      • 使用:添加async的函数会自动返回一个promise对象,async函数中在调用Promise前加await,之后的代码会等await内的Promise执行完才进行(转异步为同步)

  • ES9(2018)

    • Object spread & rest

      • spread:使用...展开对象。如果属性值是对象,则是浅拷贝

      • rest:用一个变量收敛对象的部分数据(方法可参考数组结构)进行理解 rest属性必须始终出现在对象的末尾

    • for await of(异步迭代器)

      • 功能:循环等待每个Promise对象变为resolved状态才进入下一步

      • 使用:for await (let item of arr)

    • Promise.finally()

      • 功能:promise执行结束,无论结果是fulfilled或者是rejected,在then()和catch()后总会进入finally回调
    • 模板字符串扩展

      • 移除转义序列的限制,允许嵌套支持常见转义序列,如unicode字符。

      • 遇到不合法转义字符串不再会将整个模板字符串返回空,但会抛出错误

  • ES10(2019)

    • Object.formEntries()

      • 把键值对转换为对象,与Object.entries()相对

      • 使用例

        • 将map转换为对象:const obj = Object.formEntries(map)

        • 过滤:const res = Object.entries(course).filter(([key, val]) => val > 0)

    • Array.flat([depth])

      • url参数转换:const paramObj = Object.fromEntries(URLSearchParams(“?name=jimmy&age=18&height=1.88”));

      • 提取嵌套数组,depth指定要提取嵌套数组的结构深度,默认值为 1,array.flat(Infinity)

      • flat会去除数组中的空值

    • Array.flatMap(func):map+flat

    • String.trimStart()/trimLeft();String.trimEnd()/trimEnd()

    • catch允许省略参数e

    • Symbol.description()

    • JSON.stringfy()修复超出范围的Unicode字符,使用转义字符处理替换编码

    • Function.toString():新增返回注释、空格和语法等信息

  • ES11(2020)

    • ??空值合并操作符

      • 作用:左侧为null或undefined时,返回右侧操作数,否则返回左侧

      • 区别:||左侧为假是就返回右侧,例如'',0,NaN,false

      • 注意:不能与其他逻辑运算符组合使用

    • ?.可选链操作符

      • 作用:尝试访问并不一定存在的对象属性,不会引起错误
    • globalThis:通用安全的全局对象,全局作用域中的this

    • BigInt:任意大的整数(比Number大的整数)

      • 使用

        • 在数字后面尾缀n const bigInt = 9007199254740993n

        • 使用BigInt函数 const bigIntNum = BigInt(9007199254740993n)

      • 注意:不能用于Math对象的方法,不能和任何Number实例混合运算,向下转换会丢失精度

    • String.marchAll():方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器

      1
      2
      array = [...'test1test2'.matchAll(/t(e)(st(\d?))/g)]; 
      // array = [["test1", "e", "st1", "1"], ["test2", "e", "st2", "2"]]
    • Promise.allSettled():改进Promise.all()

      • 功能:并发执行异步任务,任意任务正常或异常,都会返回对应状态,而非抛出错误
    • 动态import:import语句可以放在事件监听函数中执行

  • ES12(2021)

    • 逻辑运算符

      • x &&= y 等价于 x && (x=y) 当x为真时,x=y

      • x ||= y 等价于 x || (x=y) 当x为假时,x=y

      • x ??= y 等价于 x ??(x=y) 当x为nullish时,x=y

    • String.replaceAll(pattern,replacement)

      • 注意:pattern可以为字符串或正则表达式,正则表达式必须为全局的(尾缀g)
    • 长数字允许使用下划线_作为百分位/千分位等分隔符

    • Promise.any():参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例才会变成rejected状态

      • Promise.race()
    • 避免使用

      • WeakRef 允许保留对另一个对象的弱引用,而不会阻止被弱引用对象被GC回收

      • Finalizers 当一个在注册表中注册的对象被回收时,请求在某个时间点上调用一个清理回调。(清理回调有时被称为 finalizer )

title:ES6+对比

author:Anne416wu

link:https://www.annewqx.top/posts/37733/

publish time:2022-01-24

update time:2022-07-27


评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×