Set()Map()使用场景和具体如何使用案例解释-demo

news2024/10/8 18:30:38

Set()和Map()都是JavaScript中常见的数据类型，它们分别表示集合和映射。下面分别介绍一下它们的使用场景和具体如何使用的案例。

Set()

Set()用于表示一组互不相同的值，集合中的每个值都是唯一的，不会出现重复的值。Set()中可以存储任意类型的值，包括基本类型和对象。

使用场景：

去重操作：通过Set()可以方便地实现数组去重，避免使用for循环和if语句进行重复值的判断。
数据筛选：将数据保存在Set()中，方便进行查找和筛选操作。

具体使用案例：

// 去重操作
const arr = [1, 2, 2, 3, 3, 4];
const set = new Set(arr);
console.log(set); // Set { 1, 2, 3, 4 }

// 数据筛选
const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];
const set = new Set(data.map(item => item.id));
console.log(set.has(2)); // true

Map()

Map()用于表示一组键值对，其中键和值都可以是任意类型的值，包括基本类型和对象。Map()中的键都是唯一的，不会出现重复的键。

使用场景：

缓存数据：通过Map()可以保存一些已经计算好的数据，下次使用时可以直接从Map()中取出。
映射关系：通过Map()可以存储两个数据之间的映射关系，方便进行数据的查找和处理。

具体使用案例：

// 缓存数据
function compute(x) {
  console.log(`正在计算 ${x}...`);
  return x * 2;
}

const cache = new Map();
function memoize(func) {
  return function(x) {
    if (cache.has(x)) {
      console.log(`从缓存中取出 ${x}`);
      return cache.get(x);
    }
    const result = func(x);
    cache.set(x, result);
    console.log(`保存 ${x} 的计算结果 ${result}`);
    return result;
  }
}

const memoized = memoize(compute);
console.log(memoized(1)); // 正在计算 1... 保存 1 的计算结果 2  2
console.log(memoized(1)); // 从缓存中取出 1  2

// 映射关系
const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];
const map = new Map(data.map(item => [item.id, item.name]));
console.log(map.get(2)); // Bob

Set 和 Map 是 JavaScript 中的两种常用数据结构，它们各自有不同的使用场景和应用案例。

Set

Set 是一种无序且不重复的集合，它的主要特点是不允许存储重复的值。这使得 Set 在需要存储一组唯一值的场景中非常有用。

使用场景：

去重：可以使用 Set 来快速去除数组中的重复元素。
判断元素是否存在：可以使用 Set 来判断一个元素是否存在于集合中。
迭代和遍历：Set 提供了迭代器（Iterator）接口，可以使用 for...of 循环或 forEach 方法对集合中的元素进行迭代和遍历。

const set = new Set([1, 2, 2, 3, 4, 4]);

console.log(set); // Set { 1, 2, 3, 4 }

console.log(set.has(2)); // true

set.add(5);
set.delete(3);

for (const item of set) {
  console.log(item);
}
// 输出：
// 1
// 2
// 4
// 5

在上述示例中，我们创建了一个 Set 对象，并向其添加了一些元素。由于 Set 中不允许存储重复的值，所以重复的元素被自动去除。我们可以使用 has 方法来判断某个元素是否存在于集合中，使用 add 方法向集合中添加元素，使用 delete 方法删除集合中的元素。最后，我们使用 for...of 循环对集合中的元素进行迭代和遍历。

Map

Map 是一种键值对的集合，它的主要特点是可以根据键来存储和访问对应的值。每个键在 Map 中是唯一的，这使得 Map 在需要根据键查找值的场景中非常有用。

使用场景：

缓存：可以使用 Map 来实现一个简单的缓存，其中键是输入，值是对应的计算结果。
数据存储和检索：可以使用 Map 来存储和检索复杂的数据结构，例如对象、数组等。
顺序和迭代：Map 保持插入顺序，可以使用 for...of 循环或 forEach 方法对键值对进行迭代和遍历。

const map = new Map();

map.set('name', 'Alice');
map.set('age', 25);

console.log(map.get('name')); // 'Alice'
console.log(map.has('age')); // true

map.delete('age');

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 输出：
// name: Alice