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

news/2024/7/11 0:45:13 标签: es6, 数据结构, javascript

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.niftyadmin.cn/n/5325757.html

相关文章

使用java解析xmind文件

// 获取xmind的所有用例public static List<EsCaseEntity> getAllCaseFromXmindFile(String fileName) {List<EsCaseEntity> casesList new ArrayList<>();if (Objects.isNull(fileName)) {return null;}File fileXmind new File(fileName);if (!fileXmind…

界面控件DevExpress WPF属性网格 - 让应用轻松显示编辑各种属性事件

DevExpress WPF Property Grid&#xff08;属性网格&#xff09;灵感来自于Visual Studio&#xff0c;Visual Studio启发的属性窗口(对象检查器)让在WPF应用程序显示和编辑任何对象的属性和事件变得更容易&#xff01; P.S&#xff1a;DevExpress WPF拥有120个控件和库&#x…

Github搭建图床 github搭建静态资源库 免费CDN加速 github搭建图床使用 jsdelivr CDN免费加速访问

Github搭建图床 github搭建静态资源库 免费CDN加速 github搭建图床使用 jsdelivr CDN免费加速访问 前言1、创建仓库2、开启 gh-pages页面功能3、访问测试 前言 写博客文章时&#xff0c;图片的上传和存放是一个问题&#xff0c;使用小众第三方图床&#xff0c;怕不稳定和倒闭&…

流程图用什么软件做?五款优质在线绘制工具看一看

流程图用什么软件做&#xff1f;现在&#xff0c;流程图已经成为了我们工作中不可或缺的工具。它能够清晰地展示各个步骤之间的关系&#xff0c;使我们更好地理解并优化流程。那么&#xff0c;在众多的流程图绘制工具中&#xff0c;哪一款最适合你呢&#xff1f;下面就给大家介…

11.云原生分布式数据库之TIDB

云原生专栏大纲 文章目录 为什么使用TIDB后端视角运维视角基础架构视角 TiDB Operator 简介软件版本要求部署tidbTIDB工具helm常用命令TIDB学习推荐资料 为什么使用TIDB 从后端视角、运维视角和基础架构视角来看&#xff0c;使用 TiDB 作为数据库系统可以获得分布式架构、高可…

new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果

说明&#xff1a; 1.【mars3d】的依赖库cesium本身是不支持贴地/贴模型操作的 2.sdk内部异步计算了数据的贴地/高度值之后&#xff0c;更新到图层上实现贴地/贴模型效果的 3.相关的示例链接&#xff1a; 1.功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 4.相关的计算…

【架构设计】单体软件分布式化思考

单体软件 单体软件是历史悠久的软件架构形态&#xff0c;以下是一个简单的前后端分离的单体架构的 web 软件。 #mermaid-svg-0BFMiffXXuuYf3Jw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0BFMiffXXuuYf3Jw .er…

用python实现word中所有图片变清晰

要使用Python将Word文档中的所有图片变清晰&#xff0c;你需要使用一些库&#xff0c;例如python-docx和OpenCV。以下是一个简单的示例&#xff0c;说明如何使用这些库来提高Word文档中图片的清晰度。 请注意&#xff0c;这种方法基于简单的图像增强技术&#xff0c;可能无法提…