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

devtools/2024/9/20 7:14:59/ 标签: 前端, 面试, javascript

目录

      • 一、Set 对象
        • 1. 基本操作
        • 2. 遍历操作
        • 3. Set 的特性
        • 4. 与数组的互操作
      • 二、Map 对象
        • 1. 基本操作
        • 2. 遍历操作
        • 3. Map 的特性
        • 4. 与对象的比较
      • 三、算法题及题解
        • 题目:找出数组中的重复元素
        • 题目:数组去重
        • 题目:统计字符串中每个字符出现的次数
        • 题目:找出数组中和为目标值的两个数
      • 四、`for...in` 和 `for...of` 的区别

一、Set 对象

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

1. 基本操作
  • 创建一个 Set:

    javascript">let mySet = new Set();
    
  • 添加元素 add():

    javascript">mySet.add(1);
    mySet.add(2);
    
  • 删除元素 delete():

    javascript">mySet.delete(1);
    
  • 检查元素是否存在 has():

    javascript">console.log(mySet.has(2)); // 输出: true
    
  • 获取 Set 的大小 size:

    javascript">console.log(mySet.size); // 输出: 1
    
  • 清空 Set clear():

    javascript">mySet.clear();
    
2. 遍历操作
  • 使用 forEach() 方法:

    javascript">mySet.forEach(value => console.log(value));
    
  • 使用 for...of 迭代:

    javascript">for (let value of mySet) {console.log(value);
    }
    
3. Set 的特性
  • 元素唯一性
  • 类型不区分(区分 NaNundefined
4. 与数组的互操作
  • 将数组转换为 Set:

    javascript">let array = [1, 2, 3, 4, 5, 3, 2];
    let uniqueSet = new Set(array);
    
  • 将 Set 转换为数组:

    javascript">let uniqueArray = Array.from(uniqueSet);
    

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

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

二、Map 对象

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

1. 基本操作
  • 创建一个 Map:

    javascript">let myMap = new Map();
    
  • 设置键值对 set():

    javascript">myMap.set('key1', 'value1');
    
  • 获取值 get():

    javascript">console.log(myMap.get('key1')); // 输出: value1
    
  • 删除键值对 delete():

    javascript">myMap.delete('key1');
    
  • 检查键是否存在 has():

    javascript">console.log(myMap.has('key1')); // 输出: false
    
  • 获取 Map 的大小 size:

    javascript">console.log(myMap.size); // 输出: 0
    
  • 清空 Map clear():

    javascript">myMap.clear();
    
2. 遍历操作
  • 使用 forEach() 方法:

    javascript">myMap.forEach((value, key) => console.log(key, value));
    
  • 使用 for...of 迭代:

    javascript">for (let [key, value] of myMap) {console.log(key, value);
    }
    
  • 获取键集合 keys():

    javascript">for (let key of myMap.keys()) {console.log(key);
    }
    
  • 获取值集合 values():

    javascript">for (let value of myMap.values()) {console.log(value);
    }
    
  • 获取键值对集合 entries():

    javascript">for (let [key, value] of myMap.entries()) {console.log(key, value);
    }
    
3. Map 的特性
  • 任意类型的键(对象、函数、基本类型)
  • 保持键值对插入顺序
4. 与对象的比较
  • 键的类型限制(对象的键只能是字符串或 Symbol)
  • 性能差异

三、算法题及题解

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

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

示例:

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

题解:

javascript">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]
题目:数组去重

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

示例:

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

题解:

javascript">function removeDuplicates(arr) {return Array.from(new Set(arr));
}console.log(removeDuplicates([1, 2, 3, 4, 5, 3, 2])); // 输出: [1, 2, 3, 4, 5]
题目:统计字符串中每个字符出现的次数

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

示例:

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

题解:

javascript">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}
题目:找出数组中和为目标值的两个数

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

示例:

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

题解:

javascript">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...infor...of 的区别

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

  • for...in:

    • 用于遍历对象的可枚举属性。
    • 迭代对象自身的和继承的可枚举属性(不包括 Symbol 属性)。
    • 更适合用于遍历对象属性。
    javascript">let obj = {a: 1, b: 2, c: 3};
    for (let key in obj) {console.log(key); // 输出: a, b, c
    }
    
  • for...of:

    • 用于遍历可迭代对象(如数组、SetMapString 等)。
    • 迭代对象的值而不是键。
    • 更适合用于遍历数组或其他可迭代对象。
    javascript">let arr = [1, 2, 3];
    for (let value of arr) {console.log(value); // 输出: 1
    

http://www.ppmy.cn/devtools/55616.html

相关文章

“鱼与熊掌兼得专业与学校的权衡” 或 “高考后专业与学校的选择之道”。这两个标题都符合内容,且简洁明了。

引言&#xff1a; 24年的高考帷幕落下&#xff0c;对于每一位考生来说&#xff0c;选择学校和专业无疑是一场重大的决策。分数受限的条件下&#xff0c;“鱼与熊掌不可兼得”&#xff0c;是选择一个心仪的专业还是知名度更高的学校&#xff0c;这是一个困扰了众多考生和家长的长…

upload-labs第14关

upload-labs第14关 第十四关一、源代码分析代码审计 二、绕过分析a. 制作图片码首先需要一个照片&#xff0c;然后其次需要一个eval.php。 b.上传图片码上传成功 c.结合文件包含漏洞进行访问访问&#xff1a;http://192.168.1.110/upload-labs-master/include.php?filehttp://…

python写excel

确保已安装 xlsxwriter&#xff1a; pip install xlsxwriter使用 xlsxwriter 设置特定单元格的背景色&#xff1a; import pandas as pd创建示例 DataFrame df1 pd.DataFrame({A: [1, 2, 3],B: [4, 5, 6] })将 DataFrame 导出到 Excel 使用 xlsxwriter file_path output_…

MongoDB 索引

MongoDB中的索引类型主要包括以下几种&#xff1a; 单字段索引&#xff08;Single Field Indexes&#xff09;&#xff1a;这是最基本的索引类型&#xff0c;它可以基于集合中的单个字段创建。复合索引&#xff08;Compound Indexes&#xff09;&#xff1a;复合索引是单字段索…

如何隐藏真实的MAC地址和IP地址,保证多账户的安全?

在计算机网络中&#xff0c;MAC地址&#xff08;Media Access Control Address&#xff09;和IP地址&#xff08;Internet Protocol Address&#xff09;是两个重要的概念&#xff0c;用于网络设备之间的通信。虽然它们都用于标识设备&#xff0c;但在运作原理和作用上有着明显…

【机器学习】——【线性回归模型】——详细【学习路线】

目录 1. 引言 2. 线性回归理论基础 2.1 线性模型概述 2.2 最小二乘法 3. 数学基础 3.1 矩阵运算 3.2 微积分 3.3 统计学 4. 实现与应用 4.1 使用Scikit-learn实现线性回归 4.2 模型评估 5. 深入理解 5.1 多元线性回归 5.2 特征选择 5.3 理解模型内部 6. 实战与项…

用python工具实现自动检测报表缺失哪些天日期的数据(亲测可用)

目录 代码思路如下: 1、看某张表的所有有数据的日期 2、计算缺失的日期 遇到难点: 1、清空mysql的表 2、报表日期的字段格式五花八门,需要进行统一格式化 完整可用代码如下: 1、表结构 2、python代码 在前面的文章,详细介绍了如果监测mysql或hive当天或当月的表…

微信小程序使用ThreeX开发3d

注意&#xff1a;本代码是用uniapp开发微信小程序&#xff0c;模型使用.glb格式&#xff0c;以下出现&#xff08;glb模型压缩&#xff09;代表改代码是使用压缩时需要使用的&#xff0c;不压缩可以不写 Demo:gitee地址 焦明玉/vue2_threex_demo 1.微信小程序后台添加Threex…

深度学习入门2—— 神经网络的组成和3层神经网络的实现

由上一章结尾&#xff0c;我们知道神经网络的一个重要性质是它可以自动地从数据中学习到合适的权重参数。接下来会介绍神经网络的概要&#xff0c;然后再结合手写数字识别案例进行介绍。 1.神经网络概要 1.1从感知机到神经网 我们可以用图来表示神经网络&#xff0c;我们把最…

[C#] opencvsharp对Mat数据进行序列化或者反序列化以及格式化输出

【简要介绍】 在OpenCVSharp中&#xff0c;FileStorage类用于将数据&#xff08;包括OpenCV的Mat类型数据&#xff09;序列化为XML或YAML格式的文件&#xff0c;以及从这些文件中反序列化数据。以下是关于FileStorage类用法的详细说明&#xff1a; 写入数据&#xff08;序列化…

【Docker】容器

目录 1. 容器启动 2. 容器启动/重启/停止 3. 进入容器 4. 容器查询 5. docker 镜像的构建 方式一&#xff1a;docker 容器 commit 方式二&#xff1a;Dockerfile 定制镜像 1. 容器启动 docker run –it/-d –p/P –name imageID/name 2. 容器启动/重启/停止 docker sta…

fc-list命令使用指南

fc-list命令使用指南 一、什么是fc-list? fc-list是FontConfig库的一部分&#xff0c;最初为Linux和其他Unix-like系统开发。我们可以用这个命令行快速查询和列出系统中安装的字体。 现在&#xff0c;Windows用户也集成了这个工具&#xff0c;所以我们来讲解一下用法。 二、…

算力服务先锋!和鲸科技入选《2024中国智算产业生态图谱》

2024 年 6 月 18 日&#xff0c;由科智咨询发起的《2024中国智算产业生态图谱》正式发布&#xff0c;依托 ModelWhale 构建的智算算力资源服务&#xff0c;以及深耕多年的 ModelWhale 数据科学协同平台优势&#xff0c;和鲸科技成功入选。 “智算时代”技术不断进步&#xff0c…

SpringCloudAlibaba组件之间的版本兼容问题

我之前的SpringCloud项目以及使用的组件的版本是这些 但是我不知道具体的版本兼容问题&#xff0c;以及各种组件之间对应的版本 想要使用我们的springcloud和springcloudAlibaba组件&#xff0c;我们就要版本对应&#xff0c;不然就是一堆依赖报错&#xff0c;要不就是缺了这个…

UE5近战对抗系统Tutorial

文章目录 BP_Character 组合攻击Notify State 检测攻击BP_Character 攻击反馈BP_Character 生命系统BP_Character 死亡效果BP_Character 武器系统BP_Enemy 初始化和行为树 BP_Character 组合攻击 首先我们获取攻击动画&#xff0c;在这里使用的是 Easy Combo Buffering 的攻击…

leetcode34:在排序数组中查找元素的第一个和最后一个位置

题目链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {if(nums.empty()) {return {-1, -1};}vector<int> R…

哈夫曼编码

一.哈夫曼树 哈夫曼树&#xff08;Huffman Tree&#xff09;是一种用于数据压缩的二叉树。它基于字符出现的频率构建&#xff0c;使得高频字符使用较短的编码&#xff0c;低频字符使用较长的编码&#xff0c;从而实现数据压缩。哈夫曼树也被称为最优二叉树或哈夫曼编码树。 哈夫…

Kafka精要

Apach Kafka 是一款分布式流处理框架&#xff0c;用于实时构建流处理应用。它有一个核心 的功能广为人知&#xff0c;即 作为企业级的消息引擎被广泛使用 kafka设计 Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消…

HTML(9)——字体修饰

常用的字体修饰属性 属性描述font-size字体大小 单位&#xff1a;数字pxfont-weight字体粗细 单位&#xff1a;数字font-style 字体倾斜 line-height行高 单位&#xff1a;数字px/数字(当前size的倍数&#xff09;font-family字体族…

Mac(M1芯片)安装多个jdk,Mac卸载jdk

1.jdk下载 oracle官方链接&#xff1a;oracle官方下载链接 2.安装 直接下一步&#xff0c;下一步就行 3.查看是否安装成功 出现下图内容表示安装成功。 4.配置环境变量 open -e .bash_profile 路径建议复制过去 #刷新环境变量 source ~/.bash_profile 5.切换方法 6.jdk…