常用ES技巧二

news2024/11/17 3:51:49

文章目录

  • 一、`Object.entries()`和`Object.fromEntries()`
    • 1.1、`Object.entries()`
    • 1.2、`Object.fromEntries()`
  • 二、`Symbol`类型和`Symbol`属性
  • 三、`WeakMap`和`WeakSet`
  • 四、`Promise.allSettled()`
  • 五、`BigInt`
  • 六、`Array.of`和`Array.from`
  • 七、`.at`和`.flat`
  • 八、总结
  • 九、最后

一、Object.entries()Object.fromEntries()

  • Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。
  • Object.fromEntries()方法将键值对列表转换为一个对象。

1.1、Object.entries()

当使用Object.entries()时,可以传入一个对象作为参数。这个对象可以是任何具有可枚举属性的对象。例如:

const obj = { a: 1, b: 2, c: 3 };

const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]

在这个例子中,我们将一个包含三个属性的对象传递给Object.entries()方法,并将返回的结果存储在entries变量中。entries变量现在是一个包含键值对数组的数组。

1.2、Object.fromEntries()

当使用Object.fromEntries()时,可以传入一个键值对数组作为参数。这个数组中的每个元素都是一个包含键和值的数组。例如:

const entries = [["a", 1], ["b", 2], ["c", 3]];

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

在这个例子中,我们将一个包含三个键值对的数组传递给Object.fromEntries()方法,并将返回的结果存储在obj变量中。obj变量现在是一个由键值对组成的对象。

二、Symbol类型和Symbol属性

  • Symbol是一种新的原始数据类型,用于创建唯一的标识符。

  • Symbol属性是对象中使用Symbol作为键创建的属性。

    const sym = Symbol('description');
    
    const obj = {
      [sym]: 'value'
    };
    
    console.log(obj[sym]); // value
    

三、WeakMapWeakSet

  • WeakMap是一种集合类型,其中键必须是对象,并且在没有其他引用时会被垃圾回收。

  • WeakSet是一种集合类型,其中元素必须是对象,并且在没有其他引用时会被垃圾回收。

    const wm = new WeakMap();
    
    const obj = {};
    
    wm.set(obj, 'value');
    
    console.log(wm.get(obj)); // value
    
    const ws = new WeakSet();
    
    ws.add(obj);
    
    console.log(ws.has(obj)); // true
    

    在这个例子中,我们创建了一个WeakMap和一个WeakSet实例。我们使用set()方法将obj对象添加到WeakMap中,并将值设置为value。然后,我们使用get()方法从WeakMap中获取值。类似地,我们使用add()方法将obj对象添加到WeakSet中,并使用has()方法检查集合中是否存在该对象。

四、Promise.allSettled()

  • Promise.allSettled()方法返回一个在所有给定的promise已被解析或被拒绝后决议的promise,并带有一个对象数组,每个对象表示对应的promise结果。
const promises = [
  Promise.resolve('resolved'),
  Promise.reject('rejected'),
  Promise.resolve('resolved')
];

Promise.allSettled(promises)
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });

 // 输出结果:
 // [
 //  { status: 'fulfilled', value: 'resolved' },
 //  { status: 'rejected', reason: 'rejected' },
 //  { status: 'fulfilled', value: 'resolved' }
 // ]

我们创建了一个包含三个promise的数组,并将其传递给Promise.allSettled()方法。然后,我们使用.then()方法处理返回的结果数组,或使用.catch()方法处理任何错误。

五、BigInt

  • BigInt是一种新的原始数据类型,用于表示任意精度的整数。
 const bigIntValue = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1);

 console.log(bigIntValue); // 9007199254740992n

六、Array.ofArray.from

  • Array.of()方法创建一个具有可变数量参数的新数组实例。
  • Array.of方法用于创建一个由参数组成的新数组。它与Array构造函数不同之处在于,当参数只有一个且为数字时,Array.of会创建一个只包含该数字的数组,而不是创建指定长度的空数组。
  • Array.from()方法从类似数组或可迭代对象创建一个新的数组实例。
  • Array.from方法将类似数组或可迭代对象转换为真正的数组。它可以接收第二个参数来进行映射或筛选操作。
const arr1 = Array.of(1, 2, 3);
console.log(arr1); // [1, 2, 3]

const str = 'Hello';
const arr = Array.from(str);
console.log(arr); // 输出: ['H', 'e', 'l', 'l', 'o']

const nums = [1, 2, 3, 4, 5];
const doubled = Array.from(nums, num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

七、.at.flat

  • .at()方法返回指定索引处的元素。
  • .at方法用于获取数组指定索引位置的元素,支持负数索引。
  • .flat()方法将嵌套的数组扁平化为一个新的数组。
  • .flat方法用于将多维数组扁平化为一维数组,可以指定扁平化的层数。
 const arr3 = [1, 2, 3, 4, 5];
 console.log(arr3.at(2)); // 3

 const arr4 = [1, [2, [3]]];
 console.log(arr4.flat()); // [1, 2, [3]]

八、总结

ES6引入了许多实用但相对较冷门的高级技巧。Object.entries()Object.fromEntries()可以方便地在对象和键值对之间进行转换。Symbol类型和Symbol属性可以创建唯一的标识符。

WeakMapWeakSet提供了一种在没有其他引用时自动垃圾回收的集合类型。Promise.allSettled()可以处理多个promise并返回所有结果。BigInt允许表示任意精度的整数。Array.ofArray.from.atflat提供了更方便的数组操作方法。这些技巧可以帮助开发者更高效地编写代码。

九、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

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

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

相关文章

解决计算机“缺失ffmpeg.dll”报错?修复ffmpeg.dll文件方案

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“ffmpeg.dll丢失”。ffmpeg.dll是FFmpeg多媒体框架中的一个重要组件,它负责处理音频和视频的编解码。当打开某些软件时,如果系统找不到该文件,就会出现这…

C++入门学习(二十五)do-while循环

do { // 代码块,至少会执行一次 } while (条件); 对比一下while和do-while循环: 因为while循环先判断条件,所以数字10直接就没有进入for循环里,卡在了判断条件这一步,所以就没有输出数据; do-while循环是…

2023年全国职业院校技能大赛软件测试赛题第2套

2023年全国职业院校技能大赛 软件测试赛题第2套 赛项名称: 软件测试 英文名称: Software Testing 赛项编号: GZ034 归属产业: 电子与信息大类 …

【数据结构与算法】堆 / 堆排序 / TopK问题(Heap)

文章目录 1.堆2.C语言实现堆2.1 堆结构与基本操作2.2 其它辅助操作2.3 堆的基本操作2.3.1 插入2.3.2 删除 3. 堆排序4. TopK5. 所有代码 1.堆 堆总是一棵完全二叉树,而完全二叉树更适合使用**顺序结构(数组)**存储,完全二叉树前h…

蓝桥杯省赛无忧 课件92 行列式

01 什么是行列式 02 行列式的性质 03 高斯消元求行列式

linux之wsl2安装远程桌面

0. 安装后的效果 1. wsl中打开terminal并安装库 sudo apt-get purge xrdp sudo apt install -y xrdp sudo apt install -y xfce4 sudo apt install -y xfce4-goodies 2.优化显示 sudo sed -i s/max_bpp32/#max_bpp32\nmax_bpp128/g /etc/xrdp/xrdp.ini sudo sed -i s/xserverbp…

Linux下的多线程

前面学习了进程、文件等概念,接下里为大家引入线程的概念 多线程 线程是什么?为什么要有线程?线程的优缺点Linux线程操作线程创建线程等待线程终止线程分离 线程间的私有和共享数据理解线程库和线程id深刻理解Linux多线程(重点&a…

【Linux】gdb调试与make/makefile工具

目录 导读 1. make/Makefile 1.1 引入 1.2 概念 1.3 语法规则 1.4 示例 2. Linux调试器-gdb 2.1 引入 2.2 概念 2.3 使用 导读 我们在上次讲了Linux编辑器gcc\g的使用,今天我们就来进一步的学习如何调试,以及makefile这个强大的工具。 1. mak…

Hadoop3.x基础(4)- Yarn

来源:B站尚硅谷 目录 Yarn资源调度器Yarn基础架构Yarn工作机制作业提交全过程Yarn调度器和调度算法先进先出调度器(FIFO)容量调度器(Capacity Scheduler)公平调度器(Fair Scheduler) Yarn常用命…

《数电》理论笔记-第2章-组合逻辑电路

一,集成门电路 1TTL门电路 TTL门电路中双极型三极管构成,它的特点是速度快、抗静电能力强集成度低、功耗大, 目前广泛应用于中、小规模集成电路中。 TTL门电路有 74 (商用) 和 54 (军用) 两大系列,每个系列中又有若干子系列。 2 CMOS门电路 …

联合体的深入了解

1.联合体类型的声明 像结构体一样,联合体也是由一个或者多个成员构成,这些成员可以不同的类型。 但是编译器只为最大的成员分配足够的内存空间。联合体的特点是所有成员共用同一块内存空间。所以联合体也叫:共用体。 给联合体其中一个成员赋值…

洛希极限

L1-3 洛希极限 分数 10 作者 陈越 单位 浙江大学 科幻电影《流浪地球》中一个重要的情节是地球距离木星太近时,大气开始被木星吸走,而随着不断接近地木“…

华为WLAN无线配置实验

上面大概讲了配置的思路与原理,这里开始实际配置下。 一般建议采用旁挂AC,然后划分独立的设备管理网段,通过DHCP进行获取地址,其它的地址、接口、路由正常配置即可。 一、基本配置 拓扑图 AR1: # 配置接口地址和路由 interface Gi…

Vision Transformer(一):自注意力机制

1. 注意力机制 注意力本质上是模仿人的行为。这种行为可以描述为人在观察一些事物时,会对感兴趣的区域会产生更多的聚焦,而会选择性的忽视(或者减少关注)另一些区域。 举个简单的例子,一些对跑车感兴趣的人&#xff0…

个人博客说明

本人博客主要发布平台为博客园 https://www.cnblogs.com/carmi 更多详细,完整图片的文章还请师傅们动动小手到博客园去看吧。

npm 上传一个自己的应用(5) 删除自己发送到NPM官网的指定工具版本

上文 npm 上传一个自己的应用(4) 更新自己上传到NPM中的工具版本 并就行内容修改 我们更新了项目内容 然后更新了项目版本 那么 一些已经过时 甚至 当时上传的东西就有问题 我们又该怎么删除版本呢? 首先 我们还是要先登录 npm npm login然后 根据要求填写 Userna…

vue3 mathjax2.7.7 数学公式

1. index.html代码部分 <script type"text/x-mathjax-config">MathJax.Hub.Config({extensions: ["tex2jax.js"],jax: ["input/TeX","output/HTML-CSS"],tex2jax: {inlineMath: [["$","$"],["\\(&quo…

【C++航海王:追寻罗杰的编程之路】类与对象你学会了吗?(下)

目录 1 -> 再谈构造函数1.1 -> 构造函数体赋值1.2 -> 初始化列表1.3 -> explicit关键字 2 -> static成员2.1 -> 概念2.2 -> 特性 3 -> 友元3.1 -> 友元函数3.2 -> 友元类 4 -> 内部类5 -> 匿名对象6 -> 拷贝对象时的一些编译器优化 1 -…

Java基于微信小程序的学生实习管理小程序

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

自定义npm包从vue2升级到vue3遇到的问题解决

1.执行npm run build时报错&#xff1a; (node:16724) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token ‘??’ at Loader.moduleStrategy (internal/modules/esm/translators.js:149:18 解决&#xff1a;更新node版本 查看了我使用的node版本是14.21.3&…