【ES6 Map数据结构】建议日常开发操作数组时使用 new Map

Map数据结构

  • new Map使用
  • 属性及方法:
    • 1. size属性
    • 2. set(key,value)
    • 3. get(key)
    • 4. has(key)
    • 5. delete(key)
    • 6. clear()
    • 7. 遍历方法: keys()、values()、entries()、forEach()
      • (1). keys()
      • (2). values()
      • (3). entries()
      • (4). forEach()
    • 8. toString()
    • 9. valueOf

算法使用 Map 还算是不少的,日常开发也可使用 new Map 替代某些数组操作,活到老学到老

new Map使用

JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制
为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键

const map = new Map();

如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,包括0和-0。另外,虽然NaN不严格相等于自身,但Map将其视为同一个键

// new Map([key, value], [key, value]...);
const mapObj = new Map([[1,1],[2,2]]); //默认带初始化参数的定义

属性及方法:

1. size属性

console.log(mapObj.size); // size属性返回Map结构的成员总数: 2

2. set(key,value)

set 方法设置 key 所对应的键值,然后返回整个 Map 结构。如果 key 已经有值,则键值会被更新,否则就新生成该键

// 常用写法
let obj = new Map();
obj.set("age", 20);
obj.set(0, "attack_type");
obj.set(undefined, "definition");

3. get(key)

get 方法用于返回某个键对应的值。如果该键不存在,则返回 undefined

let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.get('hello'); // Hello ES6!
obj.get('word');
console.log(obj.get('word')); // undefined

4. has(key)

has 方法返回一个布尔值,表示该 Map 对象是否包含某个键

let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.has('hello'); // true
obj.has('word'); // false

5. delete(key)

delete 方法用于删除某个键,如果该键存在,则返回 true,否则返回 false

let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.delete('hello'); // true
obj.delete('word'); // false

6. clear()

clear 方法用于删除 Map 对象中的所有成员

let obj = new Map();
obj.set("hello", 'Hello ES6!');
obj.clear();

7. 遍历方法: keys()、values()、entries()、forEach()

(1). keys()

Map.prototype.keys(): 返回一个新的 Iterator 对象,包含 Map 中所有的键

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');for (const key of myMap.keys()) {console.log(key);
}

(2). values()

Map.prototype.values(): 返回一个新的 Iterator 对象,包含 Map 中所有的值

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');for (const value of myMap.values()) {console.log(value);
}

(3). entries()

Map.prototype.entries(): 返回一个新的 Iterator 对象,包含Map中所有的 [键,值] 数组

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');for (const [key, value] of myMap.entries()) {console.log(key + ": " + value);
}for (const item of myMap.entries()) {console.log(item);
}

(4). forEach()

Map.prototype.forEach(): 传入一个函数,该函数被调用,传入当前的键和值,以及 Map 对象本身

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');myMap.forEach((value, key, map) => {console.log(key, value, map);
});

8. toString()

返回一个字符串,该字符串包含一个由所有键值对组成的字符串,每个键值对由一个逗号分隔的字符串组成

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');Map.prototype.toString = function() {let result = '';for (const [key, value] of this.entries()) {result += `${key}: ${value}\n`;}return result;
};console.log(myMap.toString());

9. valueOf

在调用 valueOf 方法时,Map 对象会返回自身的原始值

const myMap = new Map();
myMap.set("obj", { a: 1, b: 2 })
console.log(myMap.valueOf()); // 返回 Map 对象本身

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

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

相关文章

使用ffmpeg进行视频截取

1 原始视频信息 通过ffmpeg -i命令查看视频基本信息 ffmpeg version 6.1-essentials_build-www.gyan.dev Copyright (c) 2000-2023 the FFmpeg developersbuilt with gcc 12.2.0 (Rev10, Built by MSYS2 project)configuration: --enable-gpl --enable-version3 --enable-sta…

SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用

四、Database MetaData 与 SQL Express Language 的使用 MetaData对象用于描述表结构,SQL Express Language是DBAPI SQL的统一封装器。MetaData 与SQL Express 语句可以在Core层使用,ORM层基于MetaData, SQL Express基础上做了进一步抽象。本章将介绍在…

Python简单ORM实现:不使用元类的灵活数据操作与查询构建【第29篇—python:ORM】

文章目录 不使用元类的简单ORM实现Field类Compare类Model类Query类示例使用扩展查询功能支持 LIMIT 和 OFFSET支持 GROUP BY 和 HAVING 示例用法总结 不使用元类的简单ORM实现 在 Python 中,ORM(Object-Relational Mapping)是一种将对象和数…

GBASE南大通用CommandBuilder 属性

DataAdapter 属性 获取或设置一个用于自动生成 SQL 语句的GBASE南大通用DataAdapter 对象。  语法 [Visual Basic] Public Property DataAdapter As GBASE南大通用DataAdapter Get Set [C#] public GBaseDataAdapter DataAdapter { get; set; }  属性 一个 GBase…

244.【2023年华为OD机试真题(C卷)】密码解密(JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解…

基于uniapp的在线课程教学系统

介绍 项目背景: 随着互联网的快速发展,在线教育已经成为一种流行的学习方式。针对这一趋势,我们决定开发一个基于UniApp的在线课程教学系统。该系统旨在为学生提供方便快捷的在线学习体验,同时也为教师提供一个高效管理课程的平台…

Vue3实现带点击外部关闭对应弹出框(可共用一个变量)

首先,假设您在单文件组件(SFC)中使用了Vue3,并且有两个div元素分别通过v-if和v-else来切换显示一个带有.elpopver类的弹出组件。在这种情况下,每个弹出组件应当拥有独立的状态管理(例如:各自的isOpen变量)。…

QFile:文件的打开与关闭

QFile file("注释.txt");if(file.open(QIODevice::WriteOnly)){qDebug()<<"打开成功";}else{qDebug()<<"打开失败";}if(file.open(QIODevice::WriteOnly)){qDebug()<<"打开成功";}else{qDebug()<<"打开失…

《计算机视觉处理设计开发工程师》

计算机视觉&#xff08;Computer Vision&#xff09;是一门研究如何让计算机能够理解和分析数字图像或视频的学科。简单来说&#xff0c;计算机视觉的目标是让计算机能够像人类一样对视觉信息进行处理和理解。为实现这个目标&#xff0c;计算机视觉结合了图像处理、机器学习、模…

做品牌,怎么挖掘用户深层需求?

品牌想要长久发展&#xff0c;就需要去挖掘用户深层需求&#xff0c;什么是用户深层需求&#xff0c;比如做美业的认为用户想要变美是深层次的需求&#xff0c;但其实由美貌带来的附加利益比如说更上镜、竞争优势更大等才属于深层需求&#xff0c;今天媒介盒子就来和大家聊聊&a…

compose 实验

cd /opt mkdir compose_nginx cd compose_nginx mkdir nginx cd nginx/ 此时顺便将nginx安装包拖进来 vim Dockerfile mkdir /opt/compose_nginx/wwwroot echo "<h1>this is test web</h1>" > /opt/compose_nginx/wwwroot/index.html docker netw…

HashTable, HashMap, ConcurrentHashMap 之间的区别

1. 线程安全性 HashTable&#xff1a;HashTable是线程安全的&#xff0c;所有操作都是同步的&#xff08;synchronized关键字&#xff09;。这意味着多个线程可以同时访问HashTable&#xff0c;并且不会导致数据不一致的问题。然而&#xff0c;由于同步的开销比较大&#xff0…

【C语言知识】原码反码和补码

一&#xff0c;简介 总结进制转换&#xff0c;原码&#xff0c;反码和补码相关基础知识。 二&#xff0c;具体说明 2.1 十进制转二进制方法 14(D)转换为二进制为&#xff08;0000 1110 &#xff09; -21(D)转换为二进制为&#xff08;1001 0101&#xff09;&#xff0c;先…

二分查找与搜索树的高频问题(算法村第九关白银挑战)

基于二分查找的拓展问题 山峰数组的封顶索引 852. 山脉数组的峰顶索引 - 力扣&#xff08;LeetCode&#xff09; 给你由整数组成的山脉数组 arr &#xff0c;返回满足 arr[0] < arr[1] < ... arr[i - 1] < arr[i] > arr[i 1] > ... > arr[arr.length - 1…

git 提炼笔记

1、设置用户名和邮箱&#xff08;邮箱可以不是真的&#xff09; git config --global user.name test101 // 设置用户名为 test101git config --global user.email test101test101.cn // 设置邮箱为test101test101.cn2、查看用户名和邮箱 git config --global user.name git…

索引的数据结构(MySql高级)

索引的数据结构 为什么使用索引什么是索引索引的优缺点优点缺点 常见索引概念聚簇索引二级索引(辅助索引, 非聚簇索引)InnoDB的B树索引的注意事项 MyISAM 与 InnoDB 对比索引的代价 为什么使用索引 索引是存储引擎用于快速找到数据记录的一种数据结构&#xff0c;就好比一本教…

用使用pandas拆分excel单元格

要使用pandas拆分Excel单元格&#xff0c;你可以使用pandas的read_excel函数读取Excel文件&#xff0c;然后使用str.split()方法拆分单元格。 以下是一个示例代码&#xff0c;演示如何使用pandas拆分Excel单元格&#xff1a; python复制代码 import pandas as pd # 读取Excel…

基于SSM的网上购物商城设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

代理IP安全使用指南:隐私保护与风险规避措施

代理IP安全使用指南&#xff1a;隐私保护与风险规避措施 一、选择可信的代理IP服务 - 付费代理优于免费代理&#xff1a;为了确保数据安全和隐私保护&#xff0c;优先考虑使用信誉良好、有偿的代理IP服务。这些服务通常会提供更好的匿名性&#xff0c;更少的数据记录&#xf…

Vue知识总结-下

VUE-组件间通信 组件的自定义事件 概述&#xff1a;是一种组件间通信的方式,适用于&#xff1a;子组件>父组件使用场景&#xff1a;A是父组件,B是子组件,B给A传递数据,那么需要在A组件中绑定自定义事件(事件的回调也在A中)使用步骤 绑定自定义事件&#xff1a; 第一种方式…