JavaScript数据结构之Map

简介: 映射(Map)是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法,类似于其他编程语言中的词典或者哈希表。常用的 Map 方法有:赋值 set(key, value) 、获取 get(key) 、移除指定键名及其对应的值 delete(key) 、判断是否存在 has(key) 、 获取所有值 values() 、key/value 迭代器 entries()、清空所有键/值对 clear() 等。

映射(Map)是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法,类似于其他编程语言中的词典或者哈希表。常用的 Map 方法有:赋值 set(key, value) 、获取 get(key) 、移除指定键名及其对应的值 delete(key) 、判断是否存在 has(key) 、 获取所有值 values()key/value 迭代器 entries()、清空所有键/值对 clear()  等。

什么是Map

JavaScript 的对象 Object,本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键,这给使用带来了很大的限制。为了解决这个问题,ECMAScript 6 引入了 Map 数据结构。它类似于对象,也是键值对的集合,但是""的范围不仅仅局限于字符串,而是各种类型的值(包括对象)都可以当作键。也就是说,Object 结构(对象结构)提供了"字符串—值"的对应,而 Map 结构提供了"值—值"的对应,是一种更完善的 Hash 结构的实现。

下面来看一个简单的示例,了解 Map 的基本用法:

//声明map实例
const page_info = new Map()
// 向 map 中添加元素
page_info.set("seo", {
    "keywords": "infoq、Map",
    "description":"Map对象是一种简单的键/值映射,其中的键和值可以是任意值(原始值或对象的值)"
})
page_info.set("title", "javascript es6的map映射")
console.log(page_info) 
console.log(typeof page_info) // object

输出结果为:

Map {
  'seo' => {
    keywords: 'infoq、Map',
    description: 'Map对象是一种简单的键/值映射,其中的键和值可以是任意值(原始值或对象的值)'
  },
  'title' => 'javascript es6的map映射'
}
object

从输出结果看,本质上 Map(映射)就是一个 Object 对象。

1. Map.set()

为数据类型 Map 赋值的方法 map.set(key,value),可以用于增加新的键/值对或者修改键/值对,返回整个 Map 对象。

语法

myMap.set(key, value);

  • key:要添加至相应 Map 对象的元素的键。
  • value:要添加至相应 Map 对象的元素的值。

返回值

返回 Map 对象。

实例

const page_info = new Map()
// 设置值
page_info.set("seo", {
    "keywords": "infoq、Map",
    "description":"Map对象是一种简单的键/值映射,其中的键和值可以是任意值(原始值或对象的值)"
});
console.log(page_info);
page_info.set("seo", "seo信息");
console.log(page_info);

上面的示例增加值,并修改值,输入结果如下。

Map {
  'seo' => {
    keywords: 'infoq、Map',
    description: 'Map对象是一种简单的键/值映射,其中的键和值可以是任意值(原始值或对象的值)'
  }
}
Map { 'seo' => 'seo信息' }

2. Map.get()

使用 get(key) 获取键值,如果获取的 key->value 不存则返回 undefined

语法

myMap.get(key);

  • key:必须参数,也是它唯一的参数,要从目标 Map 对象中获取的元素的键。

返回值

返回一个 Map 对象中与指定键相关联的值,如果找不到这个键则返回 undefined

实例

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
const title = page_info.get("title");
const seo_info = page_info.get("seo");
console.log(title);      // javascript es6的map映射
console.log(seo_info);   // undefined

3. Map.delete()

map.delete(key) 删除指定 key 的键值对,返回成功或失败结果,删除成功返回 true,删除失败返回 false

语法

myMap.delete(key);

  • key:必须,从 Map 对象中移除的元素的键。

返回值

返回值为一个 Boolean 值,如果 Map 对象中存在该元素,则移除它并返回 true;否则如果该元素不存在则返回 false

实例

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
console.log(page_info);         // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }
const deleted_author = page_info.delete("author");
const deleted_seo = page_info.delete("seo");
console.log(deleted_author);   // true
console.log(deleted_seo);      // false
console.log(page_info);

4. Map.has()

判断指定key是否存在。

语法

myMap.has(key);

  • key:必填. 用来检测是否存在指定元素的键值。

返回值

返回值为一个 Boolean 值,如果指定元素存在于 Map 中,则返回 true,其他情况返回 false

实例

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
console.log(page_info);         // Map { 'title' => 'javascript es6的map映射' }
console.log(page_info.has("title"));   // true
console.log(page_info.has("seo"));     // false

4. Map.values()

获取所有键的值。

语法

myMap.values()

返回值

一个新的 Map 可迭代对象。

实例

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
console.log(page_info.values());       // [Map Iterator] { 'javascript es6的map映射', 'infoq' }

5. Map.entries()

返回一个新的包含 [key, value] 对的 Iterator 对象,返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。

语法

myMap.entries()

返回值

一个新的 Map 迭代器对象。

实例

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
console.log(page_info.entries());

输出的结果为:

[Map Entries] {
  [ 'title', 'javascript es6的map映射' ],
  [ 'author', 'infoq' ]
}

6. Map.clear()

移除Map对象中的所有元素。

语法

myMap.clear();

返回值

清除所有元素,返回 undefined

实例

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
page_info.clear();
console.log(page_info);  // Map {}

7. 数据转换

Map 是一个集合,可以与数组、对象进行转换。

转为数组

Map 转为数组最方便方法是使用扩展运算符 ...,如下:

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
console.log([...page_info]);  // [ [ 'title', 'javascript es6的map映射' ], [ 'author', 'infoq' ] ]

转为Object

function mapToObj(map) {
    const obj = Object.create(null);
    map.forEach((v,k)=>{
        obj[k] = v;
    });
    return obj;
}
const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
console.log( mapToObj(page_info));

输出结果为:

[Object: null prototype] {
  title: 'javascript es6的map映射',
  author: 'infoq'
}

转为 JSON

Map 转为 JSON ,步骤是先把 Map 转为对象,即前面的 mapToObj,然后使用 JSON.stringify 方法,如下:

function mapToObj(map) {
    const obj = Object.create(null);
    map.forEach((v,k)=>{
        obj[k] = v;
    });
    return obj;
}
function mapToJson(map){
    return JSON.stringify(mapToObj(map));
}
const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "infoq");
console.log( mapToJson(page_info));   // {"title":"javascript es6的map映射","author":"infoq"}

对象转为 Map

对象转为 Map 映射通过 Object.entries()

const page_info = {
    title:"javascript es6的map映射",
    author:"infoq"
};
console.log(new Map(Object.entries(page_info)));  // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }

数组转为 Map

将数组传入 Map 构造函数即可,即 new Map(array),如下:

const page_info = [
    ["title","javascript es6的map映射"],
    ["author","infoq"]
];
console.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }

Object 与 Map

根据定义,ObjectMap 基于相同的概念,使用键值来存储数据。然而,它们确实有很大的不同,主要表现在:

  • Key字段:在 Object 中,遵循普通字典的规则。键必须是简单类型,即整数或字符串或符号。但在 Map 中,它可以是任何数据类型(对象、数组等)
  • 元素顺序:在 Map 中,元素(对)的原始顺序被保留,而在 Object 中不是。
  • 继承MapObject 的一个实例,但 Object 绝对不是 Map 的实例。

下图是详细的对比:

image.png

通过上面的比较可以看出 Map 相对于 Object 具有优势,但仍有一些情况下 Object 会表现得更好。那么什么情况下使用 Map ,什么情况下使用 Object

  • 当只需要简单的结构来存储数据并且知道所有键都是字符串或整数(或符号)时,Object  是一个很好的选择,因为创建普通对象并使用特定键访问对象的属性比创建一个 Map 快得多。
  • 当在需要将单独的逻辑应用于单个属性/元素的场景中,Object 绝对是最佳选择。
  • Map 是纯粹的哈希,Object 不止于此(支持内部逻辑)。如果需要大量添加和删除属性的情况下,Map 可能会表现得更好。
  • Map 保留其键的顺序,并且 Map 的构建考虑到了迭代,所以如果迭代或元素顺序非常重要。
  • Map 在存储大量数据时往往表现更好,尤其是当键在运行时未知,并且所有键的类型和所有值的类型都相同时。

总结

JavaScript 的数据结构 Map 是一种有价值的集合类型,它使 JavaScript 编程更简洁、更高效。本文了解了 Map 语法、方法和实例,并与 Object 进行比较,简单介绍了 MapObject 各自适合的场景。


相关文章
|
16天前
|
存储 Java
告别混乱!用Java Map优雅管理你的数据结构
【10月更文挑战第17天】在软件开发中,随着项目复杂度增加,数据结构的组织和管理至关重要。Java中的Map接口提供了一种优雅的解决方案,帮助我们高效、清晰地管理数据。本文通过在线购物平台的案例,展示了Map在商品管理、用户管理和订单管理中的具体应用,有效提升了代码质量和维护性。
59 2
|
16天前
|
存储 Java 开发者
Java Map实战:用HashMap和TreeMap轻松解决复杂数据结构问题!
【10月更文挑战第17天】本文深入探讨了Java中HashMap和TreeMap两种Map类型的特性和应用场景。HashMap基于哈希表实现,支持高效的数据操作且允许键值为null;TreeMap基于红黑树实现,支持自然排序或自定义排序,确保元素有序。文章通过具体示例展示了两者的实战应用,帮助开发者根据实际需求选择合适的数据结构,提高开发效率。
47 2
|
7天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
14天前
|
存储 Java 开发者
Java中的Map接口提供了一种优雅的方式来管理数据结构,使代码更加清晰、高效
【10月更文挑战第19天】在软件开发中,随着项目复杂度的增加,数据结构的组织和管理变得至关重要。Java中的Map接口提供了一种优雅的方式来管理数据结构,使代码更加清晰、高效。本文通过在线购物平台的案例,展示了Map在商品管理、用户管理和订单管理中的具体应用,帮助开发者告别混乱,提升代码质量。
24 1
|
26天前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
31 7
|
26天前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
44 4
|
2月前
|
存储 Java API
【数据结构】map&set详解
本文详细介绍了Java集合框架中的Set系列和Map系列集合。Set系列包括HashSet(哈希表实现,无序且元素唯一)、LinkedHashSet(保持插入顺序的HashSet)、TreeSet(红黑树实现,自动排序)。Map系列为双列集合,键值一一对应,键不可重复,值可重复。文章还介绍了HashMap、LinkedHashMap、TreeMap的具体实现与应用场景,并提供了面试题示例,如随机链表复制、宝石与石头、前K个高频单词等问题的解决方案。
34 6
【数据结构】map&set详解
|
29天前
|
存储 缓存 Java
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
31 1
|
1月前
|
存储 自然语言处理 安全
【数据结构】Map的使用与注意事项
【数据结构】Map的使用与注意事项
24 1
|
2月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
84 11