ES6的一些高级技巧

引言

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()时,可以传入一个对象作为参数。这个对象可以是任何具有可枚举属性的对象。例如:

javascript 复制代码
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()时,可以传入一个键值对数组作为参数。这个数组中的每个元素都是一个包含键和值的数组。例如:

javascript 复制代码
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作为键创建的属性。

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

3. WeakMap和WeakSet

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

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

    javascript 复制代码
    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是一种新的原始数据类型,用于表示任意精度的整数。
javascript 复制代码
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方法将类似数组或可迭代对象转换为真正的数组。它可以接收第二个参数来进行映射或筛选操作。

javascript 复制代码
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方法用于将多维数组扁平化为一维数组,可以指定扁平化的层数。

javascript 复制代码
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提供了更方便的数组操作方法。这些技巧可以帮助开发者更高效地编写代码。

相关推荐
@大迁世界9 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路18 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug21 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213823 分钟前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中1 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 小时前
GDAL 实现矢量合并
前端
hxjhnct1 小时前
React useContext的缺陷
前端·react.js·前端框架
冰暮流星1 小时前
javascript逻辑运算符
开发语言·javascript·ecmascript
前端 贾公子1 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗1 小时前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全