ECMAScript日常总结--ES2019(ES10)

ECMAScript日常总结–ES2019(ES10)

文章目录

  • ECMAScript日常总结--ES2019(ES10)
      • 1. Object.fromEntries() -- 将键值对的列表转换为对象
      • 2. Array.prototype.flat() -- 用于将嵌套数组（多维数组）扁平化为一维数组
      • 3. String.prototype.trimStart() 和 String.prototype.trimEnd() -- 用于删除字符串的开头或结尾的空格。
        • 3.1 String.prototype.trimStart()
        • 3.2 String.prototype.trimEnd()
      • 4.Symbol.prototype.description -- 允许检索Symbol的描述字符串
      • 5.Optional Catch Binding -- 允许在try-catch语句中省略catch块的绑定参数
      • 6.Array.prototype.flatMap() -- 将嵌套数组映射为新数组后进行扁平化

1. Object.fromEntries() – 将键值对的列表转换为对象

Object.fromEntries()主要功能是将键值对的列表转换为对象。对于从数组或类似数据结构中创建对象非常方便，特别是在使用 Object.entries() 将对象转换为键值对数组后。

  • 允许将键值对的列表转换为对象。这对于将Map转换为对象很有用。

语法

Object.fromEntries(iterable)
  • iterable: 一个可迭代对象，通常是包含键值对的数组或其他类似结构。
const abc = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(abc);
// obj: { a: 1, b: 2, c: 3 }

用途

  1. 从键值对数组创建对象

    const abc = [['name', 'wb'], ['age', 25], ['city', 'xian']];
const person = Object.fromEntries(abc);
// person: { name: 'wb', age: 25, city: 'xian' }

  2. 从Map对象创建对象

    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const objFromMap = Object.fromEntries(map);
// objFromMap: { a: 1, b: 2, c: 3 }

  3. 与Object.entries()结合使用

    const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
const newObj = Object.fromEntries(entries);
// newObj: { a: 1, b: 2, c: 3 }

  4. 处理类似数组的对象

    const abc = { 0: ['a', 1], 1: ['b', 2], length: 2 };
const obj = Object.fromEntries(abc);
// obj: { 0: ['a', 1], 1: ['b', 2], length: 2 }

如果键值对的数组中有重复的键，后面的键值对会覆盖前面的键值对，因为对象中不能有重复的键

2. Array.prototype.flat() – 用于将嵌套数组（多维数组）扁平化为一维数组

Array.prototype.flat() 用于将嵌套数组（多维数组）扁平化为一维数组。该方法通过指定扁平化的深度来控制展开的层级。如果没有提供深度参数，该方法默认只会扁平化一层。

  • 用于将嵌套的数组扁平化。

语法

arr.flat([depth])
  • arr: 要扁平化的数组。
  • depth（可选）: 指定扁平化的深度，默认为 1。
const A = [1, [2, [3, [4]]]];
const flatArray = A.flat(Infinity);
// flatArray: [1, 2, 3, 4]

用途

  1. 扁平化一层

    const A = [1, [2, [3, [4]]]];
const flatArray = A.flat();
// flatArray: [1, 2, [3, [4]]]

  2. 指定深度扁平化

    const deeplyA = [1, [2, [3, [4]]]];
const flatArrayDepth2 = deeplyA.flat(2);
// flatArrayDepth2: [1, 2, 3, [4]]

  3. 移除空元素

    const EmptyElements = [1, 2, [3, , 4], , 5];
const flatEmpty = EmptyElements.flat();
// flatEmpty: [1, 2, 3, 4, 5]

  4. 与 map 结合使用

    const A = [[1], [2], [3]];
const mapFlat = A.flatMap(arr => arr.map(num => num * 2));
// mapFlat: [2, 4, 6]

  5. 处理异步操作

    const APromises = [Promise.resolve(1), [Promise.resolve(2), Promise.resolve(3)]];
const flatPromises = APromises.flat();
// flatPromises: [Promise, 2, 3]

如果不提供深度参数或深度参数设置为 1，flat() 只会扁平化一层。为了完全扁平化嵌套数组，使用 flat(Infinity)，注意潜在的性能影响。

3. String.prototype.trimStart() 和 String.prototype.trimEnd() – 用于删除字符串的开头或结尾的空格。

String.prototype.trimStart() 和 String.prototype.trimEnd()用于移除字符串的开头和结尾的空格（空白字符）。在之前的 ECMAScript 版本中，这两个方法分别被称为 String.prototype.trimLeft() 和 String.prototype.trimRight()。这两个方法不会修改原始字符串，而是返回一个新的字符串。

  • 用于删除字符串的开头或结尾的空格。
3.1 String.prototype.trimStart()

语法

str.trimStart()
  • str: 要处理的字符串。
const ASpaces = "   Hello!   ";
const Start = ASpaces.trimStart();
// Start: "Hello!   "
3.2 String.prototype.trimEnd()

语法

str.trimEnd()
  • str: 要处理的字符串。
const stringWithSpaces = "   Hello, World!   ";
const trimmedEnd = stringWithSpaces.trimEnd();
// trimmedEnd: "   Hello, World!"

用途

  1. 移除开头或结尾的空格

    const ASpaces = "   Hello!   ";
const Start = ASpaces.trimStart();
const End = ASpaces.trimEnd();
// Start: "Hello!   "
// End: "   Hello!"

  2. 处理用户输入

    const Input = document.getElementById('user').value;
const trimInput = Input.trimStart().trimEnd();

  3. 与其他字符串方法链式使用

    const ASpaces = "   Hello, World!   ";
const B = ASpaces.trimStart().toUpperCase().substring(0, 5);
// B: "HELLO"

  4. 处理文件路径

    const filePath = "/user/documents/file.txt";
const trimPath = filePath.trimEnd('/');
// trimPath: "/user/documents/file.txt"

4.Symbol.prototype.description – 允许检索Symbol的描述字符串

Symbol.prototype.description属性是 Symbol 类型实例方法，允许获取 Symbol 创建时传递的可选描述字符串。提供了一种更方便的方式来获取 Symbol 的描述字符串，这在某些场景下（如调试和动态属性设置）可能会很有用。

  • 允许检索Symbol的描述字符串。

语法

Symbol.prototype.description

const A = Symbol('ABC');
console.log(A.description); // 输出 'ABC'

用途

  1. 获取 Symbol 的描述字符串

    const A = Symbol('ABC');
console.log(A.description); // 输出 'ABC'

  2. 在对象字面量中使用

    const key = Symbol('uniqueKey');
const obj = {[key.description]: 'abc'
};
console.log(obj['uniqueKey']); // 输出 'abc'

  3. 遍历 Symbol 属性时获取描述字符串

    const obj = {[Symbol('a')]: 'A',[Symbol('b')]: 'B',[Symbol('c')]: 'C'
};Object.getOwnSymbols(obj).forEach(item => {console.log(item.description);
});
// 输出 'a', 'b', 'c'

如果 Symbol 创建时没有提供描述字符串，description 属性返回 undefined。在使用该属性之前需检查一下。

const A = Symbol();
console.log(A.description); // 输出 undefined

5.Optional Catch Binding – 允许在try-catch语句中省略catch块的绑定参数

允许在 try-catch 语句中省略 catch 块的绑定参数。在之前的 ECMAScript 版本中，catch 块总是需要包含一个参数，即捕获的异常对象。Optional Catch Binding 的引入使得可以在不需要捕获异常对象的情况下使用 catch 块。这对于只关心是否发生异常，而不需要异常对象的情况很有用。

“Optional Catch Binding” 提供了更简洁的语法，使得在一些场景下处理异常更加方便和清晰。省略 catch 块的参数意味着你无法在 catch 块中访问异常对象，所以只有在确实不需要访问异常对象的情况下才使用这个特性。

  • 允许在try-catch语句中省略catch块的绑定参数。

语法

try {// 代码可能抛出异常的区域
} catch {// 处理异常的代码块，没有参数
}

try {// 可能抛出异常的代码throw new Error('异常的代码');
} catch {// 不需要捕获异常对象的处理代码console.log('不需要捕获异常对象的处理代码');
}

用途

  1. 只关心是否有异常，而不关心异常对象

    function ABC(input) {try {// 处理输入的代码} catch {// 处理异常的代码，不需要关心异常对象console.log('处理异常的代码，不需要关心异常对象');}
}

  2. 简化代码，避免未使用的异常对象参数

    try {// 一些可能抛出异常的代码
} catch (error) {// 不使用异常对象，但在代码中需要声明一个未使用的参数console.log('不使用异常对象，但在代码中需要声明一个未使用的参数');
}

    使用 Optional Catch Binding：

    try {// 一些可能抛出异常的代码
} catch {// 不需要声明未使用的异常对象参数console.log('不需要声明未使用的异常对象参数');
}

  3. 更清晰的异步代码处理

    在异步代码中，catch 块可能用于处理 Promise 的 rejection。使用 Optional Catch Binding 可以简化处理，尤其是在只关心是否有异常的情况下。

    async function ABC() {try {// 异步操作，可能抛出异常const data = await fetchData();return data;} catch {// 不需要异常对象console.log('不需要异常对象');}
}

6.Array.prototype.flatMap() – 将嵌套数组映射为新数组后进行扁平化

Array.prototype.flatMap()它结合了 map() 和 flat() 的功能，用于将数组的每个元素通过映射函数处理后得到的结果扁平化成一个新数组。Array.prototype.flatMap() 提供了一种简便的方式来映射并扁平化数组，使得在处理嵌套结构或异步操作时更加方便。

  • 结合map和flat两个方法，将嵌套数组映射为新数组后进行扁平化。

语法

array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
  • callback: 对每个元素执行的函数，该函数返回一个数组，数组的元素将被扁平化。
  • currentValue: 当前被处理的数组元素。
  • index（可选）: 当前被处理的数组元素的索引。
  • array（可选）: 调用 flatMap 的数组。
  • thisArg（可选）: 执行 callback 函数时的 this 值。
const arr = [1, 2, 3];
const A = arr.flatMap(x => [x * 2]);
// A: [2, 4, 6]

用途

  1. 映射并扁平化数组

    const arr = [1, 2, 3];
const A = arr.flatMap(x => [x * 2]);
// A: [2, 4, 6]

  2. 移除空元素

    const arr = [1, 2, , 3, , 4];
const A = arr.flatMap(x => x ? [x] : []);
// A: [1, 2, 3, 4]

  3. 处理嵌套数组

    const arr = [1, [2, 3], [4, 5]];
const A = arr.flatMap(x => x);
// A: [1, 2, 3, 4, 5]

  4. 将字符串拆分为字符

    const words = ['hello', 'world'];
const A = words.flatMap(word => word.split(''));
// A: ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

  5. 处理异步操作

    const data = [1, 2, 3];
const fetchData = async (x) => {return new Promise(resolve => setTimeout(() => resolve(x * 2), 1000));
};const result = await Promise.all(data.map(async x => fetchData(x)));
// result: [2, 4, 6]const A = data.flatMap(async x => await fetchData(x));
// A: [2, 4, 6]

    在异步操作中，flatMap 可以用于处理异步的映射操作，并得到一个扁平化的结果数组。

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

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

相关文章

蓝桥杯备战——3.定时器前后台

蓝桥杯备战——3.定时器前后台

1.STC15F2k61S2的定时器 阅读STC15系列的手册，我们可以看到跟STC89C52RC的定时器还是有不同之处的： 由上图可以看到我们可以通过AUXR寄存器直接设置定时器的1T/12T模式了 在定时器0/1模式上也可以设置为16位自动重装载。 另外需要注意IAP15F2K61S2只有…
阅读更多...
使用 SpringBoot 读取 YAML 文件并将数据转为 Map，在嵌套 Map 中递归获取指定层级下的所有数据

使用 SpringBoot 读取 YAML 文件并将数据转为 Map，在嵌套 Map 中递归获取指定层级下的所有数据

文章目录 引入认识 YAML 格式规范定义脱敏规则格式主要逻辑实现优化方法完整工具类 引入 在项目中遇到一个需求，需要对交易接口返回结果中的指定字段进行脱敏操作，但又不能使用AOP注解的形式，于是决定使用一种比较笨的方法： 首先…
阅读更多...
nvm安装的node，脚手架安装 vue 项目时报错

nvm安装的node，脚手架安装 vue 项目时报错

npm install -g vue/cli 时报错 解决办法 //修改npm的资源镜像: npm config set registry http://registry.npm.taobao.org重新脚手架安装 npm install -g vue/cli成功到下一步，当执行：vue create my-vue-demo时又报新的错 原因：【HTTPS …
阅读更多...
part2. jdk9/10/11/12/16新特性详解

part2. jdk9/10/11/12/16新特性详解

1.jdk9 1.1 模块化机制 定义模块：module-info.java module com.newfeature.test {requires java.se;requires lombok;requires junit; }package com.newfeature.test;import java.lang.reflect.Field;public class Main {public static void main(String[] args) …
阅读更多...
mysql字符集

mysql字符集

一、查看字符集 //查看数据库字符集 SHOW CREATE DATABASE database; //查看表字符集 SHOW CREATE DATABASE table; //查看指定表全部字段字符集 show full columns from table; 二、修改字符集 将超出utf8字符集范围的字符比如𪨧插入到utf8字符集的字段上会…
阅读更多...
Element UI样式修改之NavMenu导航菜单箭头样式修改

Element UI样式修改之NavMenu导航菜单箭头样式修改

UI设计稿给的菜单箭头样式可能与我们饿了么组件NavMenu的菜单箭头样式不一致，目前我们侧边导航菜单的上下翻转箭头如下所示： 希望得到如下的结果： 找到饿了么Icon里我们想要向下箭头，F12后复制content内容content: “\e790”; content: "\e790";然后将默认的c…
阅读更多...
C语言基本概念

C语言基本概念

目录 2.1 编写一个简单的C程序 2.1.1 编译和链接 2.1.2 集成开发环境 2.2 简单程序的一般形式 2.2.1 指令 2.2.2 函数 2.2.3 语句 2.3 注释 2.4 变量和赋值 2.4.1 类型 2.4.2 声明 2.4.3 赋值 2.4.4 显示变量的值 2.4.5 初始化 2.4.6 显示表达式的值 2.5 读入…
阅读更多...
网络通信(15)-C#TCP客户端掉线重连实例

网络通信(15)-C#TCP客户端掉线重连实例

本文上接前面的文章使用Socket在C#语言环境下完成TCP客户端的掉线重连实例。 掉线重连需要使用心跳包发送测试网络的状态，进而进入重连循环线程。 前面实例完成的功能： 客户端与服务器连接，实现实时刷新状态。 客户端接收服务器的数据。 客户端发送给服务器的数据。 客…
阅读更多...
pytorch代码实现注意力机制之MLCA

pytorch代码实现注意力机制之MLCA

MLCA注意力机制 简要：注意力机制是计算机视觉中使用最广泛的组件之一，可以帮助神经网络强调重要元素并抑制不相关的元素。然而，绝大多数信道注意力机制仅包含信道特征信息而忽略了空间特征信息，导致模型表示效果或目标检测性能较…
阅读更多...
docker之部署青龙面板

docker之部署青龙面板

青龙面板是一个用于管理和监控 Linux 服务器的工具，具有定时运行脚本任务的功能。在实际情况下也可以用于一些定期自动签到等任务脚本的运行。 本次记录下简单的安装与使用，请提前安装好docker，参考之前的文章。 一、安装部署 1、拉取镜像 # …
阅读更多...
weak_ptr 与 一个难发现的错误（循环依赖问题）笔记

weak_ptr 与 一个难发现的错误（循环依赖问题）笔记

推荐B站视频：7.weak_ptr与一个非常难发现的错误_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL/?p7&spm_id_frompageDriver&vd_sourcea934d7fc6f47698a29dac90a922ba5a3一、weak_ptr weak_ptr并不拥有所有权并不能调用 -> 和 解引…
阅读更多...
ACL--访问控制列表概述、组成、分类、应用

ACL--访问控制列表概述、组成、分类、应用

目录 一、ACL概述 二、ACL的组成 三、ACL分类 四、举例说明 1、基于标准ACL和基础的高级ACL应用 2、基于端口的ACL 一、ACL概述 访问控制列表ACL（Access Control List）是由一条或多条规则组成的集合。所谓规则，是指描述报文匹配条件的…
阅读更多...
热门免费API集合收藏

热门免费API集合收藏

IP归属地-IPv4区县级：根据IP地址查询归属地信息，包含43亿全量IPv4，支持到中国地区（不含港台地区）区县级别，含运营商数据。 IP归属地-IPv6区县级：根据IP地址（IPv6版本）查…
阅读更多...
黑马程序员——javase进阶——day02——关键字,接口,代码块,枚举

黑马程序员——javase进阶——day02——关键字,接口,代码块,枚举

目录： Java中的关键字 static关键字final关键字Java中的权限修饰符代码块 构造代码块静态代码块接口 接口的介绍接口的定义和特点接口的成员特点接口的案例接口中成员方法的特点枚举随堂小记 继承方法重写抽象类模板设计模式staticfinal权限修饰符接口回顾上午内容…
阅读更多...
大数据开发之Spark（完整版）

大数据开发之Spark（完整版）

第 1 章：Spark概述 1.1 什么是spark 回顾：hadoop主要解决，海量数据的存储和海量数据的分析计算。 spark是一种基于内存的快速、通用、可扩展的大数据分析计算引擎。 1.2 hadoop与spark历史 hadoop的yarn框架比spark框架诞生的晚&#xff…
阅读更多...
Objective-C方法的声明实现及调用

Objective-C方法的声明实现及调用

1.无参数的方法 1)声明 a.位置：在interface括弧的外面 b.语法： - (返回值类型)方法名称; interface Person : NSObject -(void) run; end 2)实现 a.位置：在implementation中实现 b.语法：加大括弧将方法实现的代码写在大括孤之中 …
阅读更多...
mybatisPlus apply作用及代码示例

mybatisPlus apply作用及代码示例

MyBatis Plus 的 apply 方法可以帮助我们在查询条件中使用自定义的 SQL 片段，它允许我们将任意的 SQL 代码片段作为查询条件添加到 SQL 语句中。当我们需要通过 SQL 函数或表达式来构建复杂的查询条件时，就可以使用 apply 方法。 apply 方法的使用方法比…
阅读更多...
KernelGPT: LLM for Kernel Fuzzing

KernelGPT: LLM for Kernel Fuzzing

KernelGPT: Enhanced Kernel Fuzzing via Large Language Models 1.Introduction2.Background2.1.Kernel and Device Drivers2.2.Kernel Fuzzing2.2.1.Syzkaller规约2.2.2.规约生成 3.Approach3.1.Driver Detection3.2.Specification Generation3.2.1.Command Value3.2.2.Argum…
阅读更多...
基于静态顺序表实现通讯录

基于静态顺序表实现通讯录

目录 一、设计框架 1、功能要求​ 2、菜单函数的实现 二、头文件实现​ Contact.h SeqList.h 三、Test.h 四、通讯录的初始化和销毁 五、增加通讯录 六、在通讯录中查找姓名下标 七、删除通讯录 八、显示通讯录 九、查找通讯录 一、设计框架 test.c：通…
阅读更多...
《尊思想人文地理环境》新书亮相，叶无为集30年智慧破解环境密码

《尊思想人文地理环境》新书亮相，叶无为集30年智慧破解环境密码

在探索人与自然和谐共生的今天，叶无为教授的新作《尊思想人文地理环境》应时而生，为读者揭开了地理环境与人文发展之间深刻联系的神秘面纱。本书集结了作者三十多年的实战经验，通过易医体系对大自然的山川河流进行独到解析，融合传…
阅读更多...
最新文章

Copyright @ 2022~2023