ES6中Set和Map用法实例详解

ES6新增了Set和Map这两种数据结构，它们是JavaScript编程中非常有用的工具，主要用于存储唯一值和键值对数据。下面将详细介绍Set和Map的基本概念、用法和实例，以及它们的特性和操作方法。 ### Set数据结构详解 Set是一个类似于数组的结构，但与数组不同的是Set成员的值都是唯一的，没有重复的值。这意味着在Set集合中，任何尝试添加的重复元素都会被忽略。 #### Set的初始化和基本操作 初始化Set时，可以提供一个数组作为参数来填充它的值。例如： ```javascript var set = new Set([1, 2, 3, 4, 4]); ``` 这将创建一个包含1、2、3和4的Set。 Set的成员可以是任何类型的值，包括数字、字符串、布尔值等，甚至是对象或函数。但需要注意的是，Set内部判断两个NaN值是相等的，而两个不同的对象总是被视为不相等。 #### Set的操作方法 Set提供了几个操作方法： - `add(value)`: 添加某个值，返回Set结构本身。 - `delete(value)`: 删除某个值，返回一个布尔值，表示删除是否成功。 - `has(value)`: 返回一个布尔值，表示该值是否为Set的成员。 - `clear()`: 清除所有成员，没有返回值。 #### Set的遍历方法 Set有四个遍历方法，它们都可以用来遍历Set结构的成员： - `keys()`: 返回键名的遍历器。 - `values()`: 返回键值的遍历器（和keys行为一致）。 - `entries()`: 返回键值对的遍历器。 - `forEach()`: 使用回调函数遍历每个成员。 #### Set结构的实例遍历操作 Set结构的实例默认是可遍历的，其默认遍历器生成函数就是它的values方法。因此可以直接使用for-of循环来遍历Set实例。 ```javascript let set = new Set(['red', 'green', 'blue']); for (let value of set) { console.log(value); } // 输出: red green blue ``` Set还拥有forEach方法，用于对每个成员执行某种操作。 ### Map数据结构详解 Map是一种可以存储键值对的数据结构，它类似于对象，也是键值对的集合，但与对象不同的是，Map的“键”可以是任意类型，包括对象和函数。 #### Map的基本操作 创建一个Map实例后，可以通过set方法添加键值对： ```javascript var map = new Map(); map.set('foo', 'bar'); map.set(1, 'baz'); ``` #### Map的操作方法 Map的操作方法主要包括： - `set(key, value)`: 设置键值对，返回Map结构本身。 - `get(key)`: 获取与指定键关联的值。 - `has(key)`: 返回一个布尔值，表示Map实例是否包含键。 - `delete(key)`: 删除指定的键，返回一个布尔值，表示删除是否成功。 - `clear()`: 清除所有成员，没有返回值。 #### Map的遍历方法 Map有四个遍历方法，它们可以用来遍历Map结构的成员： - `keys()`: 返回键名的遍历器。 - `values()`: 返回键值的遍历器。 - `entries()`: 返回键值对的遍历器。 - `forEach()`: 使用回调函数遍历每个成员。 #### Map结构的实例遍历操作 与Set类似，Map实例也默认是可遍历的，其默认遍历器生成函数就是它的entries方法。可以直接使用for-of循环来遍历Map实例。 ```javascript var map = new Map(); map.set('foo', true); map.set('bar', false); for (let [key, value] of map) { console.log(key + " is " + (value ? "true" : "false")); } // 输出: foo is true bar is false ``` Map实例同样拥有forEach方法。 ### 总结 Set和Map作为ES6的新特性，不仅丰富了JavaScript的数据结构类型，还提高了数据管理的效率。Set适用于存储唯一值的场景，而Map则适用于需要复杂键值对管理的应用。了解并掌握这两者的用法对于前端开发者来说是十分必要的。