ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Map 和 Set 学习

2026/9/17 3:20:39 拓冰建站 浏览量
Map 和 Set 学习

        在 JavaScript 中,Map 和 Set 是 ES6 引入的两种新的数据结构,用于存储和管理数据。

Map:

  • Map 是一种键值对的集合,其中每个键和值之间存在映射关系。
  • 键可以是任意数据类型,包括对象、函数、原始类型等。
  • Map 中的键是唯一的,如果重复设置相同的键,则后面的值会覆盖前面的值。
  • 可以通过 set(key, value) 方法添加键值对,通过 get(key) 方法获取键对应的值,通过 delete(key) 方法删除键值对。
  • Map 是有序的,键值对的顺序与插入顺序一致。
  • 可以通过 size 属性获取 Map 中键值对的数量。
// 示例
let myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('age', 30);console.log(myMap.get('name')); // 输出 'Alice'
console.log(myMap.size); // 输出 2

Set:

  • Set 是一种值的集合,其中每个值都是唯一的,不允许重复。
  • 可以存储任意数据类型的值,包括对象、函数、原始类型等。
  • 可以通过 add(value) 方法向 Set 中添加值,通过 delete(value) 方法删除值,通过 has(value) 方法检查值是否存在。
  • Set 中的值是无序的,没有索引,不能通过索引访问值。
  • 可以通过 size 属性获取 Set 中值的数量。
    // 示例
    let mySet = new Set();
    mySet.add(1);
    mySet.add(2);
    mySet.add(1); // 重复值不会被添加console.log(mySet.has(1)); // 输出 true
    console.log(mySet.size); // 输出 2
    

 Map 的应用场景:

  1. 存储对象的键值对Map 可以用来存储对象的键值对,比如存储用户信息等。
    let userMap = new Map();
    userMap.set('name', 'Alice');
    userMap.set('age', 30);
    console.log(userMap.get('name')); // 输出 'Alice'
    
  2. 缓存数据Map 可以用来实现简单的缓存机制,存储计算结果以提高性能。
    let cacheMap = new Map();
    function calculateSquare(num) {if (cacheMap.has(num)) {return cacheMap.get(num);} else {const result = num * num;cacheMap.set(num, result);return result;}
    }
    console.log(calculateSquare(5)); // 第一次计算并缓存结果
    console.log(calculateSquare(5)); // 直接从缓存中获取结果
    

 Set 的应用场景:

  1. 去重数组Set 可以用来去除数组中的重复元素。
    let uniqueSet = new Set([1, 2, 3, 2, 1]);
    console.log([...uniqueSet]); // 输出 [1, 2, 3]
    
  2. 管理用户权限Set 可以用来存储用户的权限信息,判断用户是否有特定权限。
    let userPermissions = new Set(['read', 'write']);
    function hasPermission(permission) {return userPermissions.has(permission);
    }
    console.log(hasPermission('read')); // 输出 true
    console.log(hasPermission('delete')); // 输出 false
    
  3. 事件订阅与发布Set 可以用来管理订阅者,实现简单的事件订阅与发布机制。
    let subscribers = new Set();
    function subscribe(callback) {subscribers.add(callback);
    }
    function publish(data) {subscribers.forEach(callback => callback(data));
    }
    subscribe(data => console.log('Data received:', data));
    publish('Hello, world!');