自学内容网 自学内容网
自学内容网 > 正文

ES6的一些冷门实用操作

🕗 发布于 2024-01-16 11:34 es6  前端  ecmascript  

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

  • Object.entries()

  • Object.fromEntries()

  • Array.of

  • Array.from

  • .at和flat

  • WeakMap和WeakSet

  • BigInt

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、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]

3、.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]]

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

5、BigInt

  • BigInt是一种新的原始数据类型，用于表示任意精度的整数。

const bigIntValue = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1);

 console.log(bigIntValue); // 9007199254740992n


原文地址：https://blog.csdn.net/luckydie/article/details/135616718

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024