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 方法,分别用于获取对象的值和键值对。

  3. String padding:String.prototype.padStart、String.prototype.padEnd

  4. 函数参数列表结尾允许逗号:方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。

  5. Object.getOwnPropertyDescriptors():用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

const obj = {
	name: 'lxm',
	get age() { return '28' }
};
Object.getOwnPropertyDescriptors(obj)

在这里插入图片描述

  1. SharedArrayBuffer 对象:用来表示一个通用的,固定长度的原始二进制数据缓冲区

  2. Atomics 对象:提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作

ES9(ECMAScript 2018):

  1. 异步迭代器:引入了异步迭代器和 for-await-of 循环,用于异步迭代数据。
//before
async function process(array) {
  for (let i of array) {
    await doSomething(i);
  }
}

async function process(array) {
  array.forEach(async i => {
    await doSomething(i);
  });
}

//after ES9
async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}
  1. Promise.finally():无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。promise.then().catch().finally(()=>console.log("finish here!"));

  2. Rest/Spread 属性:引入了对象的 Rest 和 Spread 属性,即Rest参数和扩展运算符,用于简化对象的操作。

  3. 正则表达式命名捕获组

	const reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
	match  = reDate.exec('2018-04-30'),
	year   = match[1], // 2018
	month  = match[2], // 04
	day    = match[3]; // 30
	//使用符号?<name>,任何匹配失败的命名组都将返回undefined。
	const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
	match  = reDate.exec('2018-04-30'),
	year   = match.groups.year,  // 2018
	month  = match.groups.month, // 04
	day    = match.groups.day;   // 30
  1. 正则表达式反向断言(lookbehind)

  2. 正则表达式dotAll模式
    正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现,例如:

    /hello.world/.test('hello\nworld');  // false	
    
    /hello.world/s.test('hello\nworld'); // true
    

ES10(ECMAScript 2019):

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

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

  3. String.prototype.matchAll:为所有匹配的匹配对象返回一个迭代器

  4. Symbol.prototype.description:只读属性,回 Symbol 对象的可选描述的字符串。typeof a.description === "string"

  5. Object.fromEntries():返回一个给定对象自身可枚举属性的键值对数组

  6. 可选 Catch参数:从try{}catch(e){} 变为 try{}catch{}

  7. JSON Superset 超集:主要解决了JSON字符串中包含有行分隔符 (\u2028) 和段落分隔符 (\u2029) 的问题,这些字符在之前的ECMAScript中会导致解析错误。JSON.parse('"\u2028"');//“”

  8. JSON.stringify() 加强格式转化,使其能够正确处理一些超出范围的Unicode字符。

  9. Array.prototype.sort() 更加稳定

  10. Function.prototype.toString() 重新修订:之前,Function.prototype.toString()只会返回了函数的主体,但没有注释和空格。现在,函数返回的结果与编写的一致:

//函数定义
function /* a comment */ foo() {}
//ES10之前
foo.toString(); // 'function foo() {}'
//ES10之后
foo.toString(); // 'function /* a comment  */ foo () {}'

ES11(ECMAScript 2020):

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

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

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

  4. BigInt:有两种使用方式:(1)在数字字面量的后面添加后缀n;(2)使用其构造函数BigInt。
    支持位运算符(不支持无符号位移)、BigInt 无法直接和 Number运算、一些内置模块如 Math 也不支持 BigInt,如Math.pow(2n, 64n)、BigInt 和 Number 相等,但并不严格相等、Bigint支持和Number通过符号 >< 比较大小

  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 的状态。

  7. for in 结构:用于规范for-in语句的遍历顺序。

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 成为更加强大和灵活的语言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/58785.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

瑞吉外卖实战-笔记

软件开发的流程 角色分工 软件环境 开发环境的搭建 数据库环境 maven环境 1.创建完成后&#xff0c;需要检查一下编码、maven仓库、jdk等 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</a…

pytorch 中 view 和reshape的区别

在 PyTorch&#xff08;一个流行的深度学习框架&#xff09;中&#xff0c; reshape 和 view 都是用于改变张量&#xff08;tensor&#xff09;形状的方法&#xff0c;但它们在实现方式和使用上有一些区别。下面是它们之间的主要区别&#xff1a; 实现方式&#xff1a; reshap…

机器学习--课后作业--hw1

机器学习(课后作业–hw1) 本篇文章全文参考这篇blog 网上找了很多教程&#xff0c;这个是相对来说清楚的&#xff0c;代码可能是一模一样&#xff0c;只是进行了一些微调&#xff0c;但是一定要理解这个模型具体的处理方法&#xff0c;这个模型我认为最巧妙的它对于数据的处理…

HTTP(超文本传输协议)学习

关于HTTP补学 一、HTTP能干什么 通过下图能够直观的看出&#xff1a;“交换数据 ” 二、HTTP请求例子 一个 HTTP 方法&#xff0c;通常是由一个动词&#xff0c;像 GET、POST 等&#xff0c;或者一个名词&#xff0c;像 OPTIONS、HEAD 等&#xff0c;来定义客户端执行的动作。…

Django之JWT库与SimpleJWT库的使用

Django之JWT库与SimpleJWT库的使用 JWTJWT概述头部(header)载荷(payload)签名(signature) Django使用JWT说明jwt库的使用安装依赖库配置settings.py文件配置urls.py文件创建视图配置权限 SimpleJWT库的使用安装SimpleJWT库配置Django项目配置路由创建用户接口测试身份认证自定义…

MP的开发流程-2

RESTful的实现等级 0级&#xff1a;传统的RPC&#xff0c;基于SOAP的WS&#xff0c;调用的服务名&#xff0c;参数放在HTTP协议的body里面&#xff0c;同时必须以POST方式提交&#xff0c;问题在于你必须清楚的知道所有服务&#xff0c;子服务&#xff0c;及其参数的信息&…

FileZilla Server同时共享多个目录(手把手教你使用FileZilla Server同时设置多个目录)

网上的基本全是一句话带过怎么共享多个目录&#xff0c;没图很烦&#xff0c;所以我自己就写一个过程 目录 1、创建ftp用户并设置密码 1.1、进入用户管理 1.2、新建用户 1.3、设置密码 2、添加共享的目录 2.1、选择用户添加目录 2.2、给予用户访问权限 2.2.1、客户端访…

长相思·罚站墙Vue

优化前 看效果图 Vue长相思 刚学Vue&#xff0c;正好在追剧&#xff0c;看到这个小案例觉得挺好玩的&#xff0c;第一天学&#xff0c;代码太简陋了 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta…

windows环境下安装elasticsearch、kibana

通过本文可以快速在windows系统上安装elasticsearch、kibana环境。 当你用Integer类型的时候&#xff0c;要非常小心&#xff0c;因为100等于100、但是200不等于200&#xff0c;当然&#xff0c;如果你会一点小花招&#xff0c;也可以让100不等于100、让200等于200。(运算符比较…

全球十大知名看黄金即时行情的软件名单(综合榜单)

在当今的数字化时代&#xff0c;黄金投资已成为一种受欢迎的投资方式。为了获取即时的黄金行情信息&#xff0c;许多投资者开始使用黄金即时行情软件。然而&#xff0c;选择一款合适的软件并不是一件容易的事情。那么&#xff0c;如何选适合自己需求的软件呢&#xff1f;首先&a…

LeetCode344.反转字符串

344.反转字符串 题目描述 解题思路 这是字符串专题的第一题 在之前反转链表的题目中&#xff0c;我们使用了双指针法来进行反转链表 这道题同样的&#xff0c;也使用双指针&#xff0c;对于字符串的反转&#xff0c;比链表更为简单 因为字符串本质上是一种数组&#xff0c…

【嵌入式学习笔记】嵌入式入门5——窗口看门狗WWDG

1.WWDG简介 WWDG的全称&#xff1a;Window watchdog&#xff0c;即窗口看门狗WWDG的本质&#xff1a;能产生系统复位信号和提前唤醒中断的计数器WWDG的特性&#xff1a;递减的计数器&#xff0c;当递减计数器值从 0x40减到0x3F时复位&#xff08;即T6位跳变到0&#xff09;&am…

性能优化-react路由懒加载和组件懒加载

背景 随着项目越来越大&#xff0c;打包后的包体积也越来越大&#xff0c;严重影响了首屏加载速度&#xff0c;需要对路由和组件做懒加载处理 主要用到了react中的lazy和Suspense。 废话不多说&#xff0c;直接上干货 路由懒加载 核心代码 import React, { lazy, Suspens…

三款AI写作宝介绍,教你玩转AI写作

AI写作宝是一款利用人工智能技术自动生成文章的工具。它采用先进的自然语言处理算法&#xff0c;可以在短时间内生成高质量的文章。与传统的写作方式相比&#xff0c;AI写作宝有着更快的速度、更高的准确性和更低的成本&#xff0c;成为了许多人工智能爱好者和写作从业者的首选…

写字楼门禁如何管理?最最新方法来了!

在现代社会&#xff0c;随着城市化和商务发展的蓬勃推进&#xff0c;大厦写字楼作为繁忙的商业中心和办公场所&#xff0c;其安全管理和员工考勤变得尤为重要。为了应对这一挑战&#xff0c;人脸门禁考勤机应运而生&#xff0c;成为大厦写字楼的安全保障和工时管理的关键工具。…

【数模】聚类模型

分类和聚类 分类&#xff1a;最终类别是确认的&#xff0c;把各样本分到已有的类别中聚类&#xff1a;最终类别是未知的&#xff0c;把所有样本划分出最终类别 一、K-means聚类算法 1.1 K-means算法了解 算法流程&#xff08;推荐使用流程图&#xff1a;更简洁&#xff0c;且…

Mybatis引出的一系列问题-JDBC 的探究

1 引入对JDBC的理解-1 一般来说&#xff0c;Java应用程序访问数据库的过程是&#xff1a; 装载数据库驱动程序&#xff1b;通过jdbc建立数据库连接&#xff1b;访问数据库&#xff0c;执行sql语句&#xff1b;断开数据库连接。 Public void FindAllUsers(){//1、装载sqlserve…

synchronized总结

目录 一、synchronized的特性 1.1 原子性 1.2 可见性 1.3 有序性 1.4 可重入性 二、synchronized的使用 2.1 修饰普通方法 2.2 修饰静态方法 2.3 修饰代码块 三、synchronized的锁机制 3.1 偏向锁 3.2 轻量级锁 3.3 重量级锁 一、synchronized的特性 1.1 原子性 原子性是指一…

Eclipse进行debug

目录 基本步骤三种执行方式 -- 键盘快捷键variables面板移除debug过的项目通过eclipse调用具有软件界面的项目进行debug各个variable颜色具有的意义 基本步骤 点击eclipse右上角debug按钮 调出debug面板 点击小蜘蛛图标&#xff08;不是点绿色三角的Run&#xff09; 此时会进…

华为流程体系:流程架构「OES方法」

目录 内容简介 OES方法 端到端的流程 专栏列表 CSDN学院 作者简介 内容简介 今天继续来谈谈华为流程体系中的流程架构。 在前期的内容已经介绍过 POS 流程架构的方法。 这里就先回顾一下 POS 方法的相关内容&#xff1a; 关于 POS&#xff0c;大家可以参看上面的这张图…