Jansiel Notes

ES6的一些高级技巧

引言

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

  • Object.entries()
  • Object.fromEntries()
  • Symbol类型和Symbol属性
  • WeakMap和WeakSet
  • Promise.allSettled()
  • BigInt
  • Array.of
  • Array.from
  • .at和flat

Object.entries()和Object.fromEntries()

  • Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。
  • Object.fromEntries()方法将键值对列表转换为一个对象。
    当使用Object.entries()时,可以传入一个对象作为参数。这个对象可以是任何具有可枚举属性的对象。例如:
1const obj = { a: 1, b: 2, c: 3 };
2const entries = Object.entries(obj);
3console.log(entries); // [[\"a\", 1], [\"b\", 2], [\"c\", 3]]

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

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

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

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

Symbol类型和Symbol属性

  • Symbol是一种新的原始数据类型,用于创建唯一的标识符。
  • Symbol属性是对象中使用Symbol作为键创建的属性。
1const sym = Symbol(\'description\');
2const obj = {
3  [sym]: \'value\'
4};
5console.log(obj[sym]); // value

WeakMap和WeakSet

  • WeakMap是一种集合类型,其中键必须是对象,并且在没有其他引用时会被垃圾回收。
  • WeakSet是一种集合类型,其中元素必须是对象,并且在没有其他引用时会被垃圾回收。
1const wmap = new WeakMap();
2const obj = {};
3wmap.set(obj, \'value\');
4console.log(wmap.get(obj)); // value
5const ws = new WeakSet();
6ws.add(obj);
7console.log(ws.has(obj)); // true

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

Promise.allSettled()

  • Promise.allSettled()方法返回一个在所有给定的promise已被解析或被拒绝后决议promise,并带有一个对象数组,每个对象表示对应的promise结果。
 1const promises = [
 2  Promise.resolve(\'resolved\'),
 3  Promise.reject(\'rejected\'),
 4  Promise.resolve(\'resolved\')
 5];
 6
 7Promise.allSettled(promises)
 8  .then(results => {
 9    console.log(results);
10  })
11  .catch(error => {
12    console.error(error);
13  });
14
15 // 输出结果:
16 // [
17 //  { status: \'fulfilled\', value: \'resolved\' },
18 //  { status: \'rejected\', reason: \'rejected\' },
19 //  { status: \'fulfilled\', value: \'resolved\' }
20 // ]

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

BigInt

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

Array.of、Array.from

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

.at和flat

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

总结

ES6引入了许多实用但相对较冷门的高级技巧。Object.entries()和Object.fromEntries()可以方便地在对象和键值对之间进行转换。Symbol类型和Symbol属性可以创建唯一的标识符。WeakMap和WeakSet提供了一种在没有其他引用时自动垃圾回收的集合类型。Promise.allSettled()可以处理多个promise并返回所有结果。BigInt允许表示任意精度的整数。Array.of、Array.from、.at和flat提供了更方便的数组操作方法。这些技巧可以帮助开发者更高效地编写代码。

下一篇: Js之Reflect