浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法

1、Set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 只能接受数组,采用new的方式来实例化使用。 创建Set机构时，可以立即设置内容，但Set必须接受数组作为参数。 常用的属性和方法有： size 属性： 获取该数据结构中,数据的数据个数 add() 方法： 向该数据结构中,追加新增数据 constructor：构造函数，默认就是Set函数 delete() 方法： 向该数据结构中,删除指定的数据 clear() 方法： 清除该数据结构中,所有的数据 has() 方法： 查询数据结构中 Set 和 Map 是 JavaScript 中 ES6 引入的两种新的数据结构，它们提供了更高效和便捷的方式来处理数据。本文将深入探讨这两个数据结构及其相关的 `Array.from` 方法。 让我们来详细了解一下 Set 结构。Set 类似于数组，但它的一个核心特性是所有成员的值都是唯一的，不允许重复。Set 是通过 `new Set()` 构造函数来创建的，并且通常需要传入一个数组作为参数来初始化。例如： ```javascript const s = new Set([1, 2, 3, 4, 4]); // 创建一个 Set，自动去重 ``` Set 有多个实用的方法： - `size` 属性：返回 Set 中元素的数量。 - `add(value)`：向 Set 添加一个新元素。 - `constructor`：构造函数，默认为 Set 函数。 - `delete(value)`：从 Set 中移除指定的元素。 - `clear()`：清空 Set 中的所有元素。 - `has(value)`：检查 Set 是否包含指定的元素。 - `forEach(callbackFn[, thisArg])`：遍历 Set 中的每个元素，执行提供的回调函数。 Set 的一个常见用法是数组去重，通过扩展运算符（...）配合 Set 可以轻松实现： ```javascript let arr = [1, 2, 3, 3, 2, 1]; let unique = [...new Set(arr)]; // [1, 2, 3] ``` 此外，Set 还能接受 DOM 中的 NodeList 对象作为参数，进行去重操作，这在处理多个同名元素时非常有用。Set 还不进行类型转换，因此 `1` 和 `'1'` 在 Set 中被视为不同的值。 接下来，我们转向 Map 数据结构。Map 与 Set 类似，也是 ES6 新增的，但它存储的是键值对，键可以是任意类型，而不仅仅是字符串。创建 Map 也使用 `new Map()` 构造函数，并通过键值对数组初始化： ```javascript const m = new Map([[ 'key1', 'value1'], [ 'key2', 'value2']]); ``` Map 的主要方法包括： - `size`：返回 Map 中键值对的数量。 - `set(key, value)`：设置一个键值对。 - `get(key)`：获取指定键对应的值。 - `delete(key)`：删除指定键的键值对。 - `clear()`：清空 Map。 - `has(key)`：检查 Map 是否包含指定的键。 - `forEach(callbackFn[, thisArg])`：遍历 Map 的每个键值对。 Map 与 JSON 对象不同，它的键可以是任何类型的值，这使得它在处理复杂数据结构时非常灵活。 现在我们来谈谈 `Array.from()` 方法。这个方法可以将类数组对象或可迭代对象转换成真正的数组。例如： ```javascript const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items); ``` 在这个例子中，`Array.from()` 将 Set 对象转换为数组，这样我们就可以使用数组的各种方法和操作。 总结一下，ES6 中的 Set 和 Map 为 JavaScript 带来了新的数据存储和处理方式，它们解决了数组和对象的一些限制，如重复值和非字符串键的问题。`Array.from()` 方法则提供了一种统一转换不同类型数据到数组的途径，极大地增强了 JavaScript 的数据处理能力。