ES6及以上新特性

ES6(ECMAScript 2015)及以上版本引入了许多新特性,每个版本都有不同的增强和改进。以下是 ES6 及以上版本的新特性的详细描述:

ES6(ECMAScript 2015):

  1. let 和 const 声明:引入块级作用域的变量声明,用于替代 var 声明,解决了变量提升的问题。

  2. 箭头函数:用 “=>” 符号定义函数,自动绑定父级上下文的 this,并且没有自己的 this。

  3. 模板字符串:使用反引号(`)定义多行字符串和字符串插值,可以在字符串中插入变量。

  4. 解构赋值:从数组或对象中提取值,赋值给变量,方便处理数据。

  5. 默认参数值:在函数定义中为参数设置默认值,简化函数的调用。

  6. 扩展运算符:用三个点(…)表示,用于将数组或对象展开成多个参数或元素。

  7. 类和继承:引入 class 和 extends 关键字,实现了更加面向对象的编程。

  8. Promise:用于处理异步操作的对象,解决了回调地狱的问题,提供了更加优雅的异步编程方式。

  9. Set 和 Map 数据结构:Set 是一种无重复值的集合,Map 是键值对的集合,提供了更多方便的数据结构。

  10. Symbol:引入了一种新的原始数据类型 Symbol,用于创建唯一的标识符。

ES7(ECMAScript 2016):

  1. Array.prototype.includes:新增了数组的 includes 方法,用于判断数组中是否包含指定的值。

  2. 指数操作符:引入了指数操作符(**),用于计算指数。

ES8(ECMAScript 2017):

  1. async/await:引入了 async 和 await 关键字,用于简化异步编程,使异步代码看起来像同步代码一样。

  2. Object.values 和 Object.entries:新增了 Object.values 和 Object.entries 方法,分别用于获取对象的值和键值对。

ES9(ECMAScript 2018):

  1. 异步迭代器:引入了异步迭代器和 for-await-of 循环,用于异步迭代数据。

  2. Rest/Spread 属性:引入了对象的 Rest 和 Spread 属性,用于简化对象的操作。

ES10(ECMAScript 2019):

  1. Array.prototype.flat 和 Array.prototype.flatMap:新增了数组的 flat 和 flatMap 方法,用于扁平化和映射数组。

  2. String.prototype.trimStart 和 String.prototype.trimEnd:新增了字符串的 trimStart 和 trimEnd 方法,用于去除字符串的开头和结尾空格。

ES11(ECMAScript 2020):

  1. 可选链操作符:引入了可选链操作符(?.),用于简化链式属性访问,防止出现未定义的错误。

  2. 空位合并操作符:引入了空位合并操作符(??),用于提供默认值,当值为 null 或 undefined 时使用默认值。

  3. 动态 import (): import('a').then(module => { console.info(module) });

  4. BigInt:有两种使用方式:(1)在数字字面量的后面添加后缀n;(2)使用其构造函数BigInt

  5. globalThis:window(Window)、self(Worker)、global(node.js)。
    最开始通过const globals = (new Function('return this;'))()拿到全局对象,但 Chrome APP 内容安全策略不允许。
    es6-shim穷举所有可能的全局属性:

    var getGlobal = function () {
    	if (typeof self !== 'undefined') { return self; }
        if (typeof window !== 'undefined') { return window; }
        if (typeof global !== 'undefined') { return global; }
        throw new Error('unable to locate global object');
    };
    var globals = getGlobal();
    if (!globals.Reflect) {
    	defineProperty(globals, 'Reflect', {}, true);
    }
    
  6. Promise.allSettled:新增了 Promise.allSettled 方法,用于处理多个 Promise 对象,返回所有 Promise 的状态。

ES12(ECMAScript 2021):

  1. String.prototype.replaceAll:新增了字符串的 replaceAll 方法,用于替换所有匹配的子字符串。

  2. Promise.any:新增了 Promise.any 方法,用于处理多个 Promise 对象,只要有一个完成即可。

  3. 逻辑赋值操作符 ??=、&&=、 ||=,有了这个新的标准中,逻辑表达式的操作符(&&、||、??)也可以简写了!

  4. WeakRef创建一个对象的弱引用,而不会阻止该对象被垃圾回收器回收。用构造函数来创建一个WeakRef对象ref = new WeakRef(data); 用WeakRef.prototype.deref()来取到原对象的值。 obj = ref.deref();

  5. 下划线分隔符:数字太长会导致可读性很差。使用了数字分隔符 _ (下划线),就可以让数字读的更清晰。let num = 2_3333_3333let num = 233333333等价

  6. Intl.ListFormat:是一个构造函数,处理和多语言相关的对象格式化操作:

//参数属性 style:long|short; type:conjunction|disjunction
const list = ['Apple', 'Orange', 'Banana']// 会根据语言来返回相应的格式化操作
// "Apple, Orange and Banana"
new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);
// "Apple、Orange或Banana"
new Intl.ListFormat('zh-cn', { style: 'short', type: 'disjunction' }).format(list);
  1. Intl.DateTimeFormat API 中的 dateStyle 和 timeStyle 的配置项
    (1) dateStyle 用于指定日期的显示样式,可以设置为以下值:full | long | medium | short
    (2) timeStyle 用于指定时间的显示样式,可以设置为以下值:full | long | medium | short

ES13(ECMAScript 2022):

  1. Array.prototype.at:新增了数组的 at 方法,用于根据索引获取元素,支持负数索引。

以上是 ES6 及以上版本的主要新特性,每个版本都为 JavaScript 提供了更多的功能和语法糖,使得开发更加便捷和高效。随着 ECMAScript 的不断演进,未来的版本还会引入更多的新特性和改进,使得 JavaScript 成为更加强大和灵活的语言。

你可能感兴趣的:(前端,JS,es6,javascript,前端)