• ES6、ES7、ES8、ES9、ES10 新特性简述


    • Stage 0: strawman——最初想法的提交。
    • Stage 1: proposal(提案)——由TC39至少一名成员倡导的正式提案文件,该文件包括API事例。
    • Stage 2: draft(草案)——功能规范的初始版本,该版本包含功能规范的两个实验实现。
    • Stage 3: candidate(候选)——提案规范通过审查并从厂商那里收集反馈
    • Stage 4: finished(完成)——提案准备加入ECMAScript,但是到浏览器或者Nodejs中可能需要更长的时间。

    查看 TC39 ECMAScript proposals 1、2、3 状态: https://github.com/tc39/proposals

    查看 TC39 ECMAScript proposals 最终完成状态: https://github.com/tc39/proposals/blob/master/finished-proposals.md

    ES6新特性(2015)

    • 类 class
    • 模块化 import && export
    • 箭头函数 =>
    • 函数参数默认值 fn(a = 1) {}
    • 模板字符串 url = ${window.location.href}
    • 解构赋值 let { a, b } = { a: 1, b: 2 }
    • 延展操作符
    • 对象属性简写 let a = 1; let obj = {a}
    • Promise
    • Let与Const

    关于延展操作符,注意 ES2015 有一次更新,ES2018 也有一次更新

    // 把所有参数赋值给 iterableObj 数组
    myFunction(...iterableObj);
    
    // 注意 ES2015 没有此功能。
    // 构造对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性)
    let objClone = { ...obj };
    // 把剩余参数赋值给 iterableObj 数组
    myFunction(a, b, ...iterableObj);
    

    ES7新特性(2016)

    • Array.prototype.includes()
    • 指数操作符

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

    ES8新特性(2017)

    • async/await
    • Object.values()
    • Object.entries()
    • String padding: padStart()和padEnd(),填充字符串达到当前长度
    • 函数参数列表结尾允许逗号
    • Object.getOwnPropertyDescriptors()
    • ShareArrayBuffer 和 Atomics对象,用于从共享内存位置读取和写入

    ES9新特性(2018)

    • 异步迭代
    • Promise.finally()。stage-4
    • Rest/Spread 属性。stage-4
    • 正则表达式命名捕获组(Regular Expression Named Capture Groups)。stage-4
    • 正则表达式反向断言(lookbehind)。stage-4
    • 正则表达式dotAll模式。stage-4
    • 正则表达式 Unicode 转义。stage-4
    • 非转义序列的模板字符串。 详见模版字符串

    异步迭代允许与 for...of 循环一起使用

    // 串行遍历
    async function process(array) {
      for await (let i of array) {
        doSomething(i);
      }
    }
    // 等效于
    async function process(array) {
      for (let i = 0; i < array.length; i++) {
        await doSomething(i);
      }
    }
    

    Rest/Spread 属性

    // 注意 ES2015 没有此功能。
    // 构造对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性)
    let objClone = { ...obj };
    // 把剩余参数赋值给 iterableObj 数组
    myFunction(a, b, ...iterableObj);
    

    ES10新特性(2019)

    • 行分隔符(U + 2028)和段分隔符(U + 2029)符号现在允许在字符串文字中,与JSON匹配
    • Well-formed JSON.stringify。stage-4
    • 新增了Array的flat()方法和flatMap()方法。stage-4
    • 新增了String的trimStart()方法和trimEnd()方法。stage-4
    • Object.fromEntries(),fromEntries() 其实是 entries() 的反转。stage-4
    • Symbol.prototype.description。stage-4
    • String.prototype.matchAll。stage-4
    • Function.prototype.toString() 现在返回精确字符,包括空格和注释。stage-4
    • 修改 catch 绑定,try {} catch {} catch 中不必带 error 对象
    • 新的基本数据类型 BigInt,所以 ES10 后基础数据类型有 7 种。stage-4,参见英文设计文档
    • globalThis。stage-3
    • import()。stage-3
    • Legacy RegEx。stage-3
    • 私有的实例方法和访问器。stage-3

    flat 最为常用的功能就是数组降维

    var arr1 = [1, 2, [3, 4]];
    arr1.flat(); 
    // [1, 2, 3, 4]
    
    var arr2 = [1, 2, [3, 4, [5, 6]]];
    arr2.flat();
    // [1, 2, 3, 4, [5, 6]]
    
    var arr3 = [1, 2, [3, 4, [5, 6]]];
    arr3.flat(2);
    // [1, 2, 3, 4, 5, 6]
    
    //使用 Infinity 作为深度,展开任意深度的嵌套数组
    arr3.flat(Infinity); 
    // [1, 2, 3, 4, 5, 6]
    

    trimStart 和 trimLeft 其实上是同一个函数的两个别名,但 trimLeft 是老版本 ES 所支持的。

  • 相关阅读:
    swiper轮播图在vue项目中使用,报错component lists rendered with v-for should have explicit keys(e积分项目)
    JS获取URL参数(银联二维码用过)
    VUE iscroll(银联二维码,浩哥页面用过)
    js的arguments到底是什么?
    js中arguments的用法
    条形码--JsBarcode(银联二维码用过)
    JS判断客户端是否是iOS或者Android手机移动端
    Web 通信 之 长连接、长轮询(long polling)
    jquery.fn.extend与jquery.extend(一)
    python 推导式
  • 原文地址:https://www.cnblogs.com/everlose/p/12500985.html
Copyright © 2020-2023  润新知