ECMAScript 7~10 新特性

news2025/4/18 19:24:43

ECMAScript 7 新特性

ECMAScript 6 新特性（一）

ECMAScript 6 新特性（二）

ECMAScript 7~10 新特性（本文）

1. 数组方法

Array.prototype.includes() 用来检测数组中是否包含指定元素，返回布尔值（存在返回 true，不存在返回 false）

const mingzhu = ["西游记", "水浒传", "三国演义", "红楼梦"];

console.log(mingzhu.includes("西游记")); // true
console.log(mingzhu.indexOf("西游记"));
console.log(mingzhu.includes("斗破苍穹")); // false

与 indexOf() 方法类似，但是 indexOf() 方法返回的是第一个匹配项的索引，没有则返回 -1。

2. 指数操作符

在 ES7 中引入指数运算符 **，用来实现幂运算，功能与 Math.pow() 结果相同

console.log(2 ** 3);
console.log(Math.pow(2, 3)); // 与上面等价

ECMAScript 8 新特性

1. async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样，解决异步编程的方案。

1.1 async 函数

async 函数的返回值为 promise 对象

  1. 返回的结果不是 Promise 对象，则函数的返回结果就是成功的 Promise 对象

    async function fn() {
  return 1; // 返回值不为 Promise 对象
}
console.log(fn()); // Promise {<resolved>: 1}

  2. 抛出错误，返回结果是一个失败的 Promise 对象。

    async function fn() {
  throw new Error('出错了');
}
console.log(fn());

  3. 返回结果是 Promise 对象，则函数的返回结果就是这个 Promise 对象。

    async function fn() {
  return new Promise((resolve, reject) => {
    // resolve('成功');
    reject("失败");
  });
}
console.log(fn());

1.2 await 表达式

  1. await 必须写在 async 函数中
  2. await 右侧的表达式一般为 promise 对象
  3. await 返回的是 promise 成功的值
  4. await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理
const p = new Promise((resolve, reject) => {
  // resolve('成功');
  reject("失败");
});
async function main() {
  try {
    let result = await p;

    console.log(result);
  } catch (err) {
    console.log(err);
  }
}

1.3 结合使用

async 和 await 结合使用发送 AJAX 请求

function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    // 1. 创建对象
    const xhr = new XMLHttpRequest();
    // 2. 初始化
    xhr.open("GET", url);
    // 3. 发送
    xhr.send();
    // 4. 事件绑定
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
  });
}

// then 方法测试
//   sendAJAX("https://api.oick.cn/dutang/api.php").then(
//     (value) => { console.log(value); },
//     (reason) => { console.error(reason); }
//   );

// async 和 await 方法测试
async function main() {
  let result = await sendAJAX("https://api.oick.cn/dutang/api.php");
  console.log(result);
}
main();

2. 对象方法扩展

2.1 Object.values 和 Object.entries

  1. Object.values() 方法返回一个给定对象的所有可枚举属性值的数组

  2. Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组

    将对象转换为数组

const school = {
  name: "学院",
  address: "河南省郑州市",
};

// 获取对象所有的键
console.log(Object.keys(school)); // ["name", "address"]

// 获取对象所有的值
console.log(Object.values(school)); // ["学院", "河南省郑州市"]

// entries 方法返回一个数组，数组的每一项是一个键值对数组
console.log(Object.entries(school)); // [["name", "学院"], ["address", "河南省郑州市"]]

2.2 Object.getOwnPropertyDescriptors

描述对象所有属性的详细信息

对象中属性值的基本配置信息有

配置值说明
value属性的值
writabletrue/false是否可写
enumerabletrue/false是否可枚举
configurabletrue/false是否可配置
const obj = Object.create(null, {
  name: {
    value: "张三",
    writable: true,
    enumerable: true,
    configurable: true,
  },
});

ECMAScript 9 新特性

1. Rest/spread 参数

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符。

  1. Rest 参数

    function connect({ host, port, ...user }) {
  console.log(host);
  console.log(port);
  console.log(user);
  // { username: 'admin', password: '123456', type: 'admin' }
}

connect({
  host: "localhost",
  port: 8080,
  username: "admin",
  password: "123456",
  type: "admin",
});

  2. 扩展运算符

    const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { d: 4, e: 5 };

const newObj = { ...obj1, ...obj2 };

console.log(newObj);
// { a: 1, b: 2, c: 3, d: 4, e: 5 }

2. 正则表达式

2.1 命名捕获分组

ES9 允许命名捕获组使用符号 ? ，这样获取捕获结果可读性更强

let str = "<a href='http://www.baidu.com'>百度</a>";

// 需求：提取 url 与 文本内容

// 1. 使用正则匹配
// let reg = /<a href='(.*)'>(.*)<\/a>/;
// const result = reg.exec(str);
// console.log(result);

// 2. 使用命名捕获分组
let reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);

exec 方法是 JavaScript 中正则表达式对象的一个方法，用于在字符串中执行搜索匹配操作。它的作用是根据正则表达式查找字符串中的匹配项，并返回一个结果数组或 null。

在使用正则表达式进行匹配时，括号 () 在正则表达式中被称为捕获组（capturing group）。捕获组的作用是将其括号内的内容作为一个整体进行匹配，并且在匹配成功后，可以将这部分内容单独提取出来。

2.2 反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

let str = "helloworld啊吧啊吧4545啦啦啦";

// 正向断言
// const reg = /\d+(?=啦)/;
// const result = reg.exec(str);

// 反向断言
const reg = /(?<=吧)\d+/;
const result = reg.exec(str);

console.log(result);

2.3 dotAll 模式

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

let str = `<ul>
                <li>
                    <a>肖申克的救赎</a>
                    <p>上映时间：1994-09-10</p>
                </li>
                <li>
                    <a>阿甘正传</a>
                    <p>上映时间：1994-06-05</p>
                </li>
            </ul>`;

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;

let result;
let data = [];
while ((result = reg.exec(str))) {
  // console.log(result);
  data.push({ title: result[1], time: result[2] });
}
console.log(data);

ECMAScript 10 新特性

1. 对象扩展方法

Object.fromEntries() 方法，将键值对数组转换为对象，与 ES8 中 [Object.entries](#2.1 Object.values 和 Object.entries) 方法相互为逆运算

const result = Object.fromEntries([ ["name", "Tom"], ["age", 25] ]);

console.log(result); // { name: 'Tom', age: 25 }

// Map 对象
const m = new Map();
m.set("name", "Tom");
m.set("age", 18);

const result = Object.fromEntries(m);
console.log(result); // { name: 'Tom', age: 18 }

2. 字符串方法扩展

trimStart() 方法用于去除字符串开头的空白字符

trimEnd() 方法用于去除字符串结尾的空白字符

let str = "  hello world  ";
console.log(str);
console.log(str.trimStart());
console.log(str.trimEnd());

3. 数组方法扩展

3.1 flat

Array.prototype.flat(depth) 方法将多维数组转换为低维数组

  • depth 参数：指定要提取嵌套数组的结构深度，默认值为 1，若将值设为 Infinity 则提取到最大深度。
// 示例1：默认深度为1
const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]

// 示例2：深度为2
const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat(2)); // [1, 2, 3, 4, 5, 6]

// 示例3：使用 Infinity 展平所有嵌套数组
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr3.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 示例4：处理空项
const arr4 = [1, 2, , 4, 5];
console.log(arr4.flat()); // [1, 2, 4, 5]

3.2 flatMap

Array.flatMap(callback(currentValue[, index[, array]])[, thisArg]) 类似于 map 和 flat 方法的结合体，如果 map 方法的回调函数返回的是数组，则会展开返回的数组（降低维度）

  • callback：生成新数组元素的函数，使用三个参数：
    • currentValue：当前正在数组中处理的元素。
    • index（可选）：数组中正在处理的当前元素的索引。
    • array（可选）：被调用的 map 数组。
  • thisArg（可选）：执行 callback 函数时，用于 this 的值。
const arr = [1, 2, 3, 4, 5];
const result = arr.flatMap((item) => [item * 10]);
console.log(result); // [10, 20, 30, 40, 50]

4. Symbol 扩展

Symbol.prototype.description 用来描述 Symbol 的用途，可以用来在控制台中显示 Symbol 的信息。

let s = Symbol("学院");
console.log(s.description); // 学院

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

银河麒麟v10（arm架构）部署Embedding模型bge-m3【简单版本】

银河麒麟v10（arm架构）部署Embedding模型bge-m3【简单版本】

硬件 服务器配置&#xff1a;鲲鹏2 * 920&#xff08;32c&#xff09; 4 * Atlas300I duo卡 参考文章 https://www.hiascend.com/developer/ascendhub/detail/07a016975cc341f3a5ae131f2b52399d 鲲鹏昇腾Atlas300Iduo部署Embedding模型和Rerank模型并连接Dify&#xff08;自…
阅读更多...
轻量级碎片化笔记memos本地NAS部署与跨平台跨网络同步笔记实战

轻量级碎片化笔记memos本地NAS部署与跨平台跨网络同步笔记实战

文章目录 前言1. 使用Docker部署memos2. 注册账号与简单操作演示3. 安装cpolar内网穿透4. 创建公网地址5. 创建固定公网地址 推荐 ​ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站 前言…
阅读更多...
【C++算法】54.链表_合并 K 个升序链表

【C++算法】54.链表_合并 K 个升序链表

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a; 题目链接&#xff1a; 23. 合并 K 个升序链表 题目描述&#xff1a; 解法 解法一&#xff1a;暴力解法 每个链表的平均长度为n&#xff0c;有k个链表&#xff0c;时间复杂度O(nk^2) 合并两个有序…
阅读更多...
EG8200Mini-104边缘计算网关！聚焦IEC104协议的工业数据转换与远程运维平台

EG8200Mini-104边缘计算网关！聚焦IEC104协议的工业数据转换与远程运维平台

在工业自动化和信息化融合不断深化的背景下&#xff0c;现场设备的数据采集与协议转换能力对系统集成效率与运维成本产生着直接影响。EG8200Mini-104边缘计算网关正是基于此需求场景设计&#xff0c;具备IEC104主从站双向支持能力&#xff0c;并配套远程运维与多网络接入方案&a…
阅读更多...
python多线程+异步编程让你的程序运行更快

python多线程+异步编程让你的程序运行更快

多线程简介 多线程是Python中实现并发编程的重要方式之一&#xff0c;它允许程序在同一时间内执行多个任务。在某些环境中使用多线程可以加快我们代码的执行速度&#xff0c;例如我们通过爬虫获得了一个图片的url数组&#xff0c;但是如果我们一个一个存储很明显会非常缓慢&…
阅读更多...
各种场景的ARP攻击描述笔记(超详细)

各种场景的ARP攻击描述笔记(超详细)

1、ARP报文限速 上一章我们说过ARP报文也是需要上送CPU进行处理的协议报文,如果设备对收到的大量ARP报文全部进行处理,可能导致CPU负荷过重而无法处理其他业务。因此,在处理之前需要对ARP报文进行限速,以保护CPU资源。 1.根据源MAC地址或源IP地址进行ARP限速 当设备检测到某一…
阅读更多...
庙算兵推：使用Streamlit框架构建了一个智能作战推演系统。

庙算兵推：使用Streamlit框架构建了一个智能作战推演系统。

这段代码是一个完整的军事模拟应用&#xff0c;使用Streamlit框架构建了一个智能作战推演系统。该系统包括了三维地图显示、作战单位管理、应急事件处理等功能。用户可以通过界面控制推演的开始和暂停&#xff0c;调整时间加速倍率&#xff0c;并查看实时的战斗情况和系统状态。…
阅读更多...
HDCP（四）

HDCP（四）

HDCP驱动开发实战深度解析 以下从协议栈架构、核心模块实现、安全设计到硬件集成&#xff0c;结合HDCP 2.x规范与主流硬件平台&#xff08;如ARM、FPGA&#xff09;特性&#xff0c;系统拆解驱动开发关键环节&#xff1a; 1. 协议栈架构与模块划分 驱动分层设计 硬件抽象层&…
阅读更多...
Docker MySQL的主从同步 数据备份 数据同步 配置文件

Docker MySQL的主从同步 数据备份 数据同步 配置文件

创建主库 docker run \--namemysql_1 \-e MYSQL_ROOT_PASSWORD123456 \-p 3306:3306 \-v mysql_main_data:/var/lib/mysql \--restart unless-stopped \-d \mysql:8.0进入容器内部 docker exec -it mysql_1 bash查找配置文件 find / -name my.cnf复制出主机 docker cp mysql…
阅读更多...
996引擎-疑难杂症：Ctrl + F9 编辑好的UI进入游戏查看却是歪的

996引擎-疑难杂症：Ctrl + F9 编辑好的UI进入游戏查看却是歪的

Ctrl F9 编辑好UI后&#xff0c;进入游戏查看却是歪的。 检查Ctrl F10 是否有做过编辑。可以找到对应界面执行【清空】
阅读更多...
JQuery初步学习

JQuery初步学习

文章目录 一、前言二、概述2.1 介绍2.2 安装 三、语法3.1 文档就绪3.2 选择器 四、事件4.1 概述4.2 事件绑定/解绑4.3 一次性事件4.4 事件委托4.5 自定义事件 五、效果5.1 隐藏/显示5.2 淡入淡出5.3 滑动5.4 动画 六、链七、HTML7.1 内容/属性7.2 元素操作7.3 类属性7.4 样式属…
阅读更多...
基于 Spring Boot 瑞吉外卖系统开发（三）

基于 Spring Boot 瑞吉外卖系统开发（三）

基于 Spring Boot 瑞吉外卖系统开发&#xff08;三&#xff09; 分类列表 静态页面 实现功能所需要的接口 定义Mapper接口 Mapper public interface CategoryMapper extends BaseMapper<Category> {}定义Service接口 public interface CategoryService extends ISe…
阅读更多...
winserver2022备份

winserver2022备份

安装备份&#xff0c;然后等待安装完成即可 然后可以在这里看到安装好的win server2022备份 一直下一步然后到这里 不要用本地文件夹备份 备份到远程服务器&#xff0c;远程服务器路径 然后确定备份即可 如何恢复呢&#xff1f; 点击右侧的恢复就可以了 打开任务计划程序 这…
阅读更多...
GAT-GRAPH ATTENTION NETWORKS（论文笔记）

GAT-GRAPH ATTENTION NETWORKS（论文笔记）

CCF等级&#xff1a;A 发布时间&#xff1a;2018年 代码位置 25年4月21日交 目录 一、简介 二、原理 1.注意力系数 2.归一化 3.特征组合与非线性变换 4.多头注意力 4.1特征拼接操作 4.2平均池化操作 三、实验性能 四、结论和未来工作 一、简介 图注意力网络&…
阅读更多...
PDFBox/Itext5渲染生成pdf文档

PDFBox/Itext5渲染生成pdf文档

目录 PDFBox最终效果实现代码 Itext5最终效果实现代码 PDFBox 使用PDFBox可以渲染生成pdf文档&#xff0c;并且自定义程度高&#xff0c;只是比较麻烦&#xff0c;pdf的内容位置都需要手动设置x&#xff08;横向&#xff09;和y&#xff08;纵向&#xff09;绝对位置&#xff…
阅读更多...
PyTorch Tensor维度变换实战：view/squeeze/expand/repeat全解析

PyTorch Tensor维度变换实战：view/squeeze/expand/repeat全解析

本文从图像数据处理、模型输入适配等实际场景出发&#xff0c;系统讲解PyTorch中view、squeeze、expand和repeat四大维度变换方法。通过代码演示对比不同方法的适用性&#xff0c;助您掌握数据维度调整的核心技巧。 一、基础维度操作方法 1. view&#xff1a;内存连续的形状重…
阅读更多...
【NLP 面经 9、逐层分解Transformer】

【NLP 面经 9、逐层分解Transformer】

目录 一、Transformer 整体结构 1.Tranformer的整体结构 2.Transformer的工作流程 二、Transformer的输入 1.单词 Embedding 2.位置 Embedding 计算公式&#xff1a; 三、Self-Attention 自注意力机制 1.Self-Attention 结构 ​编辑 2.Q、K、V的计算 代码实现 3.Self-Attenti…
阅读更多...
这是一个文章标题

这是一个文章标题

# Markdown 全语法示例手册本文档将全面演示 Markdown 的语法元素&#xff0c;包含 **标题**、**列表**、**代码块**、**表格**、**数学公式** 等 18 种核心功能。所有示例均附带实际应用场景说明。---## 一、基础文本格式### 1.1 标题层级 markdown # H1 (使用 #) ## H2 (使用…
阅读更多...
xtrabackup备份

xtrabackup备份

安装&#xff1a; https://downloads.percona.com/downloads/Percona-XtraBackup-8.0/Percona-XtraBackup-8.0.35-30/binary/tarball/percona-xtrabackup-8.0.35-30-Linux-x86_64.glibc2.17.tar.gz?_gl1*1ud2oby*_gcl_au*MTMyODM4NTk1NS4xNzM3MjUwNjQ2https://downloads.perc…
阅读更多...
（51单片机）串口通讯（串口通讯教程）（串口接收发送教程）

（51单片机）串口通讯（串口通讯教程）（串口接收发送教程）

前言&#xff1a; 今天有两个项目&#xff0c;分别为&#xff1a; 串口接收: 串口发送&#xff1a; 如上图将文件放在Keli5 中即可&#xff0c;然后烧录在单片机中就行了 烧录软件用的是STC-ISP&#xff0c;不知道怎么安装的可以去看江科大的视频&#xff1a; 【51单片机入门…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023