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 结果。
javascript 复制代码
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()方法处理任何错误。

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

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

相关推荐
影i4 分钟前
Vue 3 踩坑实录:如何优雅地把“上古”第三方插件关进 Iframe 小黑屋
前端
小明记账簿_微信小程序4 分钟前
vue项目中使用echarts做词云图
前端
浪浪山_大橙子6 分钟前
Trae SOLO 生成 TensorFlow.js 手势抓取物品太牛了 程序员可以退下了
前端·javascript
出征13 分钟前
Pnpm的进化进程
前端
屿小夏25 分钟前
openGauss020-openGauss 向量数据库深度解析:从存储到AI的全栈优化
前端
Y***985137 分钟前
【学术会议论文投稿】Spring Boot实战:零基础打造你的Web应用新纪元
前端·spring boot·后端
T***u33342 分钟前
JavaScript在Node.js中的流处理大
开发语言·javascript·node.js
q***33371 小时前
SpringMVC新版本踩坑[已解决]
android·前端·后端
Croa-vo1 小时前
TikTok 数据工程师三轮 VO 超详细面经:技术深挖 + 建模推导 + 压力测试全记录
javascript·数据结构·经验分享·算法·面试
亿元程序员1 小时前
做了十年游戏,我才意识到:程序员最该投资的,是一台专业的编程显示器
前端