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

目录

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

一、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 的特性
  • 元素唯一性
  • 类型不区分(区分 NaNundefined
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...infor...of 的区别

在 JavaScript 中,for...infor...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:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32204.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单的 Python Web 应用 Docker 化案例

简单的 Python Web 应用 Docker 化案例 在这个案例中&#xff0c;我们将展示如何使用 Docker 容器化一个简单的 Python Web 应用。我们将创建一个基于 Flask 框架的 Hello World 应用&#xff0c;并使用 Docker 和 Docker Compose 管理容器化环境。 1. 创建 Python Web 应用 …

STM32项目分享:家庭环境监测系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板打样焊接图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.…

集群初始配置

假设已经有三台或多台 Linux&#xff0c;可以是虚拟机或真实设备。如果希望使用这些 Linux 组成一个集群&#xff0c;并在上面运行一些分布式系统&#xff0c;可能需要如下操作。 1 设置静态IP 输入命令route -n打印路由表&#xff0c;可以查看网关地址。图形界面操作&#x…

跌倒识别:守护公共安全的AI技术应用场景-免费API调用

随着科技的不断进步&#xff0c;人工智能在各个领域的应用日益广泛&#xff0c;其中在公共安全领域&#xff0c;智能跌倒识别系统正逐渐成为守护人们安全的重要工具。本文将分享智能跌倒识别系统在不同场景下的应用及其重要性。 产品在线体验地址-API调用或本地化部署 AI算法模…

【Golang - 90天从新手到大师】Day02 - 基本语法

系列文章合集 Golang - 90天从新手到大师 变量和常量 变量声明 标准声明 var name type批量声明 var (name1 type1name2 type2... )声明时初始化 var name type value类型推导 var name value短变量声明 name : value匿名声明 在使用多重赋值时&#xff0c;如果想要…

【第一性原理】邓巴数字

这里写自定义目录标题 什么是邓巴数字邓巴数背后的科学历史上各个组织的人数与邓巴数字的关系在人类进化中的意义现代社会中邓巴数字的体现邓巴数字的意义其他与沟通相关的数据注意事项结论参考 罗宾邓巴教授生于1947年&#xff0c;进化心理学家&#xff0c;牛津大学教授&#…

[信号与系统]关于LTI系统的转换方程、拉普拉斯变换和z变换

前言 本文还是作为前置知识。 LTI系统的传递函数 LTI系统的传递函数 H ( z ) H(z) H(z) 是输出信号的z变换 Y ( z ) Y(z) Y(z) 与输入信号的z变换 X ( z ) X(z) X(z) 的比值&#xff1a; H ( z ) Y ( z ) X ( z ) H(z) \frac{Y(z)}{X(z)} H(z)X(z)Y(z)​ 多项式比值表…

C++之提高篇

1.标准输入输出流 cin与cout的使用&#xff0c;就不多说了&#xff0c;说一个有关保留小数位数的操作&#xff0c;使用ostream对象的precision&#xff08;&#xff09;方法&#xff0c;表达的意思是数字总共有几位&#xff0c;注意&#xff0c;此时是包括整数部分的&#xff…

OpenAI策略:指令层级系统让大模型免于恶意攻击

现代的大模型&#xff08;LLMs&#xff09;不再仅仅是简单的自动完成系统&#xff0c;它们有潜力赋能各种代理应用&#xff0c;如网页代理、电子邮件秘书、虚拟助手等。然而&#xff0c;这些应用广泛部署的一个主要风险是敌手可能诱使模型执行不安全或灾难性的行动&#xff0c;…

使用 Python 进行测试(7)...until you make it

总结 我很懒&#xff0c;我想用最少的行动实现目标&#xff0c;例如生成测试数据。我们可以&#xff1a; 使用随机种子保证数据的一致性。 >>> random.seed(769876987698698) >>> [random.randint(0, 10) for _ in range(10)] [10, 9, 1, 9, 10, 6, 5, 10…

计算机组成原理 | 硬件电路整理

计算机组成原理 | 硬件电路整理 桶形移位器原理图 全加器逻辑框图 多位可控加减法电路逻辑框图 可级联的4位先行进位电路 4位快速加法器 16位组内并行、组间并行加法器 实现原码一位乘法的逻辑框图 补码一位乘法的逻辑框图 无符号数阵列乘法器 原码不恢复余数法硬件逻辑框图 基…

vue第一次页面加载会触发那几个钩子函数?

在 Vue.js 中&#xff0c;当页面或组件第一次加载时&#xff0c;会触发一系列的生命周期钩子。特别是关于首次加载的&#xff0c;主要的几个钩子函数是 beforeCreate、created、beforeMount、mounted。 以下是一个简单的 Vue 组件示例&#xff0c;其中包含了这些钩子函数&…

Matlab 单目相机标定(内置函数,棋盘格)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 具体的标定原理可以参阅之前的博客Matlab 单目相机标定(内置函数),这里实现对棋盘格数据的标定过程。 二、实现代码 getCameraCorners.m function [camCorners, usedImIdx, imCheckerboard] = getCameraCorners(…

规模弹性: 管理谷歌的TPUv4机器学习超级计算机(二)

本文为翻译文章&#xff0c;原文为&#xff1a; Resiliency at Scale: Managing Google’sTPUv4 Machine Learning Supercomputer。 由于字数过长&#xff0c;文章分为两期发布&#xff0c;本片涵盖原文后半部分4&#xff5e;9节&#xff0c;前三章节请参考文章&#xff1a;规…

Mybatis plus:IService接口

一、介绍 在MybatisPlus框架中&#xff0c;IService接口扮演着重要的角色。作为一个通用的服务接口&#xff0c;IService定义了一系列方法&#xff0c;包括查询、插入、更新、删除等。这些方法的定义使得在服务层进行数据库操作变得更为便捷和高效。 IService 接口是一个泛型接…

Springboot应用的信创适配-补充

Springboot应用的信创适配-CSDN博客 因为篇幅限制&#xff0c;这里补全Spring信创适配、数据库信创适配、Redis信创适配、消息队列信创适配等四个章节。 Springboot应用的信创适配 Springboot应用的信创适配&#xff0c;如上图所示需要适配的很多&#xff0c;从硬件、操作系统、…

Linux中文件常用的压缩与解压

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

大模型Transformer讲解

文章目录 1. Transformer 原理1.1 注意力机制 (Attention Mechanism)1.2 多头注意力 (Multi-Head Attention) 2. Transformer 设计2.1 编码器 (Encoder)2.2 解码器 (Decoder) 3. Transformer 应用3.1 自然语言处理 (NLP)3.2 计算机视觉 (Computer Vision) 4. Transformer 优点和…

Android 判断手机桌面是否已经存在App的快捷方式

我们需要在桌面添加快捷方式的时候&#xff0c;为了优化体验&#xff0c;有时候需要判断桌面上是否已经存在快捷方式。 经过自己探索整理&#xff0c;代码如下&#xff1a; /*** 判断桌面是否已添加快捷方式*/fun hasShortcut(context: Context): Boolean {try {var result f…

基于AT89C52单片机的温度报警系统

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/89456321?spm=1001.2014.3001.5503 仿真构造:AT89C52+DS18B20温度模块+三按键+蜂鸣器+四位数码管显示+电源模块。 压缩包构造:源码+仿真图+设计文档+原理图+开题文档+元件…