ES6的一些高级技巧

news/2024/7/11 1:35:37 标签: es6, 前端, ecmascript

引言

ES6(ECMAScript 2015)引入了许多新的功能和语法,其中一些功能可能相对较冷门,但非常实用。本文将介绍一些这样的高级技巧,包括

  • Object.entries()

  • Object.fromEntries()

  • Symbol类型和Symbol属性

  • WeakMap和WeakSet

  • Promise.allSettled()

  • BigInt

  • Array.of

  • Array.from

  • .at和flat

1. Object.entries()和Object.fromEntries()

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

当使用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变量现在是一个包含键值对数组的数组。

同样地,当使用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变量现在是一个由键值对组成的对象。

2. Symbol类型和Symbol属性

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

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

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

3. WeakMap和WeakSet

  • 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()方法检查集合中是否存在该对象。

4. Promise.allSettled()

  • Promise.allSettled()方法返回一个在所有给定的promise已被解析或被拒绝后决议的promise,并带有一个对象数组,每个对象表示对应的promise结果。

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

5. BigInt

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

6. Array.of、Array.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]

7. .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.niftyadmin.cn/n/5334341.html

相关文章

x-www-form-urlencoded接收方式代码示例

数据回推方式是 “x-www-form-urlencoded”,可以选择使用 GET 或 POST 方法来接收数据回推。 使用 GET 方法接收数据回推时,您可以将数据作为查询参数附加在请求的 URL 中。例如: http://example.com/callback?param1value1&param2val…

html 中video实现切换视频自动播放

需求 vue2实现的网页中播放视频&#xff0c;主要代码如下&#xff1a; <video :src"question.videoPath" controls object-fit"contain"></video> 现在遇到的问题的&#xff0c;视频切换后要手动点击才能播放&#xff0c;是否可以实现切换视频…

React入门 - 07(说一说 JSX 中的语法细节)

本章内容 目录 1、js 表达式2、列表渲染3、条件渲染4、className5、jsx 中的样式处理6、dangeouslySetInnerHTML7、htmlFor8、使用 jsx 的注意事项 上一节内容我们完成了一个简单的TodoList案例。到现在为止我们已经知道怎么在 JSX中使用 “js 表达式”和”列表渲染“了&#…

【Alibaba工具型技术系列】「EasyExcel技术专题」实战技术针对于项目中常用的Excel操作指南

这里写目录标题 EasyExcel教程Maven依赖 EasyExcel API分析介绍EasyExcel 注解通用参数ReadWorkbook&#xff08;理解成excel对象&#xff09;参数ReadSheet&#xff08;就是excel的一个Sheet&#xff09;参数注解参数通用参数 WriteWorkbook&#xff08;理解成excel对象&#…

layui laydate选择时间的回调方法

控件初始打开的回调 控件在打开时触发&#xff0c;回调返回一个参数&#xff1a;初始的日期时间对象 laydate.render({elem: #test,ready: function(date){console.log(date); //得到初始的日期时间对象&#xff1a;{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, s…

steam游戏搬砖项目还能火多久?

最近放假回到老家&#xff0c;见了不少亲戚朋友&#xff0c;大家不约而同都在感叹今年大环境不好&#xff0c;工作不顺&#xff0c;生意效益不好&#xff0c;公司状况不佳&#xff0c;反问我们生意如何&#xff1f;为了让他们心里好受一点&#xff0c;我也假装附和道:也不咋地&…

Android Bluetooth Framework源码剖析(二)它们都重要

在具体讲述每个模块前我们先来看看一些公共的知识点&#xff0c;如Binder、JNI、Service、AIDL、Broadcast等&#xff0c;它们都是Android/Java基础的知识点&#xff0c;在网络上有许多相关的文章&#xff0c;本文就不深入的讲述它们&#xff0c;但在Bluetooth Framework或者ap…

自动安装解压版mysql8的脚本

由于mysql 8的 MSI 安装包&#xff0c;自动把程序安装到了C盘&#xff0c;且没看到有可以更改安装位置的配置可以修改。 故自行写了一个脚本&#xff0c;用来安装mysql 8的压缩包。可以将 mysql 8 以及其 Data目录 安装到C盘以外的位置。第一次写 bat 脚本&#xff0c;希望各位…