ES6中,Set和Map的区别

在ES6中,SetMap 是两种新的数据结构,它们都有各自的特点和应用场景。以下是它们的主要区别:

1. 数据结构

  • Set :是一种集合 ,用于存储唯一值,可以是任何类型的值(原始值或对象)。
  • Map :是一种键值对 的集合,其中键和值可以是任意类型

2. 存储内容

  • Set :存储的是值的集合 ,没有键。

    javascript 复制代码
    const set = new Set([1, 2, 3]);
    console.log(set); // Set { 1, 2, 3 }
  • Map :存储的是键值对的集合 ,键和值都有独立的含义。

    javascript 复制代码
    const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
    console.log(map); // Map { 'key1' => 'value1', 'key2' => 'value2' }

3. 键的特性

  • Set :值是唯一的,不允许重复。

    javascript 复制代码
    const set = new Set();
    set.add(1);
    set.add(1);
    console.log(set); // Set { 1 }
  • Map :键也是唯一的,但键和值是单独的,可以存储重复的值。

    javascript 复制代码
    const map = new Map();
    map.set('key', 'value1');
    map.set('key', 'value2');
    console.log(map); // Map { 'key' => 'value2' }

4. 属性和方法

  • Set

    • 常用方法:
      • add(value):添加一个值。
      • delete(value):删除一个值。
      • has(value):检查值是否存在。
      • clear():清空集合。
      • size:获取集合的大小。
    javascript 复制代码
    const set = new Set();
    set.add(1);
    console.log(set.has(1)); // true
    set.delete(1);
    console.log(set.size); // 0
  • Map

    • 常用方法:
      • set(key, value):设置键值对。
      • get(key):获取键对应的值。
      • has(key):检查键是否存在。
      • delete(key):删除键值对。
      • clear():清空所有键值对。
      • size:获取键值对的数量。
    javascript 复制代码
    const map = new Map();
    map.set('key', 'value');
    console.log(map.get('key')); // 'value'
    console.log(map.has('key')); // true

5. 遍历方式

  • Set :可以用forEachfor...of遍历集合的值。

    javascript 复制代码
    const set = new Set([1, 2, 3]);
    set.forEach(value => console.log(value)); // 1, 2, 3
    for (const value of set) {
      console.log(value); // 1, 2, 3
    }
  • Map :可以用forEachfor...of遍历键值对,分别获取键和值。

    javascript 复制代码
    const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
    map.forEach((value, key) => console.log(key, value));
    // 'key1', 'value1'
    // 'key2', 'value2'
    
    for (const [key, value] of map) {
      console.log(key, value);
      // 'key1', 'value1'
      // 'key2', 'value2'
    }

6. 性能

  • Set:对值的操作(如查找、添加、删除)通常比数组更快,尤其是在数据量较大时。
  • Map :对键值对的操作性能高,特别是在频繁查找和插入时,Map 比普通对象更高效。

适用场景

  • Set
    • 需要存储唯一值的集合(如移除数组中的重复值)。
  • Map
    • 需要存储键值对数据,且键可以是任意类型(比如用对象作为键)。

示例对比

javascript 复制代码
// Set 示例:移除重复值
const arr = [1, 2, 2, 3];
const unique = new Set(arr);
console.log([...unique]); // [1, 2, 3]

// Map 示例:存储键值对
const userAge = new Map();
userAge.set('Alice', 25);
userAge.set('Bob', 30);
console.log(userAge.get('Alice')); // 25

通过这些区别和应用场景,SetMap 都能大幅提高代码的简洁性和性能。

相关推荐
fury_12312 分钟前
当大的div中有六个小的div,上面三个下面三个,当外层div高变大的时候我希望里面的小的div的高也变大
前端·javascript·html
大鸡腿最好吃26 分钟前
为啥react要用jsx
前端·javascript·react.js
小黄编程快乐屋30 分钟前
前端小练习——大雪纷飞(JS没有上限!!!)
开发语言·前端·javascript
程序猿阿伟32 分钟前
《平衡之策:C++应对人工智能不平衡训练数据的数据增强方法》
前端·javascript·c++
STUPID MAN1 小时前
vue3使用后端传递的文件流进行文件预览
前端·javascript·vue.js·文件预览
-代号95271 小时前
【React】二、状态变量useState
前端·javascript·react.js
爬坑的小白1 小时前
el-menu导航三级数据结构及数据展示
前端·javascript·vue.js
CodeSheep1 小时前
雷军又添一员猛将!!
前端·后端·程序员
dz88i81 小时前
关于Chrome自动同步书签的解决办法
前端·chrome
guokanglun1 小时前
JavaScript 键盘控制移动
开发语言·javascript