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

相关推荐
雨 子12 分钟前
Spring Web MVC
前端·spring boot·spring·mvc·postman
计算机毕设指导621 分钟前
基于Springboot美食推荐商城系统【附源码】
java·前端·spring boot·后端·spring·tomcat·美食
!win !24 分钟前
外部H5唤起常用小程序链接规则整理
前端·小程序
染指悲剧37 分钟前
vue实现虚拟列表滚动
前端·javascript·vue.js
林涧泣1 小时前
【Uniapp-Vue3】navigator路由与页面跳转
前端·vue.js·uni-app
浩浩测试一下2 小时前
Web渗透测试之XSS跨站脚本之JS输出 以及 什么是闭合标签 一篇文章给你说明白
前端·javascript·安全·web安全·网络安全·html·系统安全
一棵开花的树,枝芽无限靠近你3 小时前
【PPTist】插入形状、插入图片、插入图表
前端·笔记·学习·编辑器·ppt·pptist
不会玩技术的技术girl3 小时前
获取淘宝商品详情高级版 API 接口 Java 示例代码
java·开发语言·前端
金州饿霸3 小时前
hadoop-yarn常用命令
大数据·前端·hadoop
前端搬运工X3 小时前
Object.keys 的原生 JS 类型之困
javascript·typescript