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

相关推荐
树懒的梦想29 分钟前
调整vscode的插件安装位置
前端·cursor
低代码布道师2 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧2 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信2 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子3 小时前
CSS单位完全指南
前端·css
SunTecTec3 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
涵信3 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
codingandsleeping4 小时前
Express入门
javascript·后端·node.js
Vaclee4 小时前
JavaScript-基础语法
开发语言·javascript·ecmascript