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 都能大幅提高代码的简洁性和性能。

相关推荐
星栈10 分钟前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香22 分钟前
简单的图片上传 删除 预览
前端
ITresearchGuest28 分钟前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士2 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见2 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain
kyriewen2 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码,只看我会不会拆
前端·javascript·面试
计算机魔术师2 小时前
700吉瓦「幽灵用电」:美国AI数据中心的抢电闹剧正在失控
前端
IT_陈寒2 小时前
JavaScript数组排序踩的坑,差点让我加班到凌晨
前端·人工智能·后端
风骏时光牛马3 小时前
提示词工程:大模型交互的核心构建艺术
前端
今日无bug3 小时前
大模型的回答是怎么一个字一个字蹦出来的?前端流式输出解析
前端·llm·agent