【前端面试】理解 JavaScript 中的 Set 和 Map 对象

一、Set 对象

Set 对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。以下是 Set 对象的基本操作：

1. 基本操作

• 创建一个 Set:

  let mySet = new Set();
  

• 添加元素 add():

  mySet.add(1);
  mySet.add(2);
  

• 删除元素 delete():

  mySet.delete(1);
  

• 检查元素是否存在 has():

  console.log(mySet.has(2)); // 输出: true
  

• 获取 Set 的大小 size:

  console.log(mySet.size); // 输出: 1
  

• 清空 Set clear():

  mySet.clear();
  

2. 遍历操作

• 使用 forEach() 方法:

  mySet.forEach(value => console.log(value));
  

• 使用 for...of 迭代:

  for (let value of mySet) {
      console.log(value);
  }
  

3. Set 的特性

• 元素唯一性
• 类型不区分（区分 NaN 和 undefined）

4. 与数组的互操作

• 将数组转换为 Set:

  let array = [1, 2, 3, 4, 5, 3, 2];
  let uniqueSet = new Set(array);
  

• 将 Set 转换为数组:

  let uniqueArray = Array.from(uniqueSet);
  

Array.from() 是一个静态方法，它从一个类似数组或可迭代对象创建一个新的数组实例。例如：

let mySet = new Set([1, 2, 3]);
let myArray = Array.from(mySet);
console.log(myArray); // 输出: [1, 2, 3]

二、Map 对象

Map 对象是键值对的集合，键可以是任何类型。以下是 Map 对象的基本操作：

1. 基本操作

• 创建一个 Map:

  let myMap = new Map();
  

• 设置键值对 set():

  myMap.set('key1', 'value1');
  

• 获取值 get():

  console.log(myMap.get('key1')); // 输出: value1
  

• 删除键值对 delete():

  myMap.delete('key1');
  

• 检查键是否存在 has():

  console.log(myMap.has('key1')); // 输出: false
  

• 获取 Map 的大小 size:

  console.log(myMap.size); // 输出: 0
  

• 清空 Map clear():

  myMap.clear();
  

2. 遍历操作

• 使用 forEach() 方法:

  myMap.forEach((value, key) => console.log(key, value));
  

• 使用 for...of 迭代:

  for (let [key, value] of myMap) {
      console.log(key, value);
  }
  

• 获取键集合 keys():

  for (let key of myMap.keys()) {
      console.log(key);
  }
  

• 获取值集合 values():

  for (let value of myMap.values()) {
      console.log(value);
  }
  

• 获取键值对集合 entries():

  for (let [key, value] of myMap.entries()) {
      console.log(key, value);
  }
  

3. Map 的特性

• 任意类型的键（对象、函数、基本类型）
• 保持键值对插入顺序

4. 与对象的比较

• 键的类型限制（对象的键只能是字符串或 Symbol）
• 性能差异

三、算法题及题解

题目：找出数组中的重复元素

描述: 给定一个数组，找出其中的重复元素。

示例:

输入: [1, 2, 3, 4, 5, 3, 2]
输出: [2, 3]

题解:

function findDuplicates(arr) {
    let seen = new Set();
    let duplicates = new Set();
    
    for (let num of arr) {
        if (seen.has(num)) {
            duplicates.add(num);
        } else {
            seen.add(num);
        }
    }
    
    return Array.from(duplicates);
}

console.log(findDuplicates([1, 2, 3, 4, 5, 3, 2])); // 输出: [2, 3]

题目：数组去重

描述: 给定一个数组，返回去重后的数组。

示例:

输入: [1, 2, 3, 4, 5, 3, 2]
输出: [1, 2, 3, 4, 5]

题解:

function removeDuplicates(arr) {
    return Array.from(new Set(arr));
}

console.log(removeDuplicates([1, 2, 3, 4, 5, 3, 2])); // 输出: [1, 2, 3, 4, 5]

题目：统计字符串中每个字符出现的次数

描述: 给定一个字符串，统计其中每个字符出现的次数。

示例:

输入: "aabccc"
输出: {a: 2, b: 1, c: 3}

题解:

function countCharacters(str) {
    let charMap = new Map();
    
    for (let char of str) {
        if (charMap.has(char)) {
            charMap.set(char, charMap.get(char) + 1);
        } else {
            charMap.set(char, 1);
        }
    }
    
    return Object.fromEntries(charMap);
}

console.log(countCharacters("aabccc")); // 输出: {a: 2, b: 1, c: 3}

题目：找出数组中和为目标值的两个数

描述: 给定一个数组和一个目标值，找出数组中和为目标值的两个数，并返回它们的索引。

示例:

输入: [2, 7, 11, 15], target = 9
输出: [0, 1]

题解:

function twoSum(nums, target) {
    let numMap = new Map();
    
    for (let i = 0; i < nums.length; i++) {
        let complement = target - nums[i];
        
        if (numMap.has(complement)) {
            return [numMap.get(complement), i];
        }
        
        numMap.set(nums[i], i);
    }
    
    return [];
}

console.log(twoSum([2, 7, 11, 15], 9)); // 输出: [0, 1]

四、for...in 和 for...of 的区别

在 JavaScript 中，for...in 和 for...of 是两种常用的循环结构，它们有不同的用途和行为：

• for...in:

  • 用于遍历对象的可枚举属性。
  • 迭代对象自身的和继承的可枚举属性（不包括 Symbol 属性）。
  • 更适合用于遍历对象属性。

  let obj = {a: 1, b: 2, c: 3};
  for (let key in obj) {
      console.log(key); // 输出: a, b, c
  }
  

• for...of:

  • 用于遍历可迭代对象（如数组、Set、Map、String 等）。
  • 迭代对象的值而不是键。
  • 更适合用于遍历数组或其他可迭代对象。

  let arr = [1, 2, 3];
  for (let value of arr) {
      console.log(value); // 输出: 1