ECMAScript 6 的Map映射

更新日期: 2020-12-22阅读: 1.3k标签: map

映射(Map)是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法,类似于其他编程语言中的词典或者哈希表。



什么是映射

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 对象。



Object 与 Map 区别

Object 和 Map 的相似之处在于,都是按键存取一个值,而且键都是可以删除的。可以看出,二者之间是非常相似的,它的不同这之处在于:

 MapObject意外的键 Map  默认情况不包含任何键。只包含显式插入的键。

一个  Object  有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

注意:  虽然 ES5 开始可以用  Object.create(null)  来创建一个没有原型的对象,但是这种用法不太常见。

键的类型一个  Map 的键可以是 任意值 ,包括函数、对象或任意基本类型。一个 Object  的键必须是一个  String  或是 Symbol 。键的顺序 Map  中的 key 是有序的。因此,当迭代的时候,一个  Map  对象以插入的顺序返回键值。

一个  Object  的键是无序的

注意:自ECMAScript 2015规范以来,对象 确实 保留了字符串和 Symbol 键的创建顺序; 因此,在只有字符串键的对象上进行迭代将按插入顺序产生键。

size  Map  的键值对个数可以轻易地通过 size  属性获取 Object  的键值对个数只能手动计算迭代 Map  是 iterable 的,所以可以直接被迭代。迭代一个 Object 需要以某种方式获取它的键然后才能迭代。性能在频繁增删键值对的场景下表现更好。在频繁添加和删除键值对的场景下未作出优化。



Map映射常用方法

常用的 Map 方法有:赋值 set(key, value)  、获取 get(key)  、移除指定键名及其对应的值delete(key) 、判断是否存在 has(key)  、 获取所有值 values()  、 key/value 迭代器 entries() 、遍历 forEach() 和 清空所有键/值对 clear()   等。

声明并初始化

const new_map = new Map();
console.log(new_map); //输出:Map {}

赋值 set

赋值使用 map.set(key,value) ,可以用于增加新的 键/值 对或者修改 键/值 对,返回整个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信息' }

获取键值 get

使用  get(key)  获取键值,如果获取的  key->value  不存则返回  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

删除键值 delete

map.delete(key)  删除指定  key  的键值对,返回成功或失败结果,删除成功返回 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); // Map { 'title' => 'javascript es6的map映射' }

判断键值是否存在 has

使用 map.has(key) 判断指定 key 是否存在。

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

获取所有键值 values()

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' }

key/value 迭代器 entries()

使用 map.entries() 返回一个包含Map对象中每一个 [key, value] 数组的Iterator迭代器。

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' ]
}

遍历所有键值 forEach(callback)

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

输出的结果为:

title javascript es6的map映射
author infoq

清空Map映射所有键值 clear()

使用 map.clear() 清空Map所有的键值对。

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 {}


与其它数据结构的转换

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' ] ]

Map映射转为对象

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'
}

数组转为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' }

对象转为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转为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"}

原文 https://xie.infoq.cn/article/b12c6d6700992222617fb2e30


链接: https://www.fly63.com/article/detial/10102

JS 中为啥 [‘1‘, ‘7’,‘11’ ].map(parseInt) 返回 [1, NaN, 3]

Javascript 一直是神奇的语言。 不相信我? 尝试使用map和parseInt将字符串数组转换为整数。打开 Chrome 的控制台(F12),粘贴以下内容,然后按回车,查看输出结果:

为什么 [‘1’, ‘7’, ‘11’].map(parseInt) 的结果是 [1, NaN, 3]?

在 Javascript 中,一个函数可以传递任何多个数量的参数,即使调用时传递的数量与定义时的数量不一致。缺失的参数会以 undefined 作为实际值传递给函数体,然后多余的参数会直接被忽略掉

js中Map

在JavaScript中,Map 是存储键/值对的对象。Map 类似于一般 JavaScript 对象 ,但对象与 Map 之间一些关键的差异使 Map 很有用。如果你要创建一个存储一些键/值路径的 JavaScript 对象

typescript中继承Array、Map、Set报错的解决

Map、Set的polyfill实现是可以继承的;//可继承的Array替换原生Array,Array要改的地比较多,除了替换原生Array还需修改继承函数,供参考

用map代替纯JavaScript对象

普通的 JavaScript 对象通常可以很好地保存结构化数据。但是它们有一些限制:只能用字符串或符号用作键,自己的对象属性可能会与从原型继承的属性键冲突(例如,toString,constructor 等)。对象不能用作键

ES6的Map类型

Map的出现解决了传统object无法直接解决的问题,更好地向标准编程语言靠近(标准编程语言一般会提供Map集合),使用的坑也比较少(比如没有object作为key时转换为[object Object]的问题)。

es6 Set和Map数据结构

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

ES6 Map 原理

ES6的Map的键可以是任意的数据结构,并且不重复。那么map的底层原理是啥呢?Map利用链表,hash的思想来实现。首先,Map可以实现删除,而且删除的数据可以是中间的值。

js中forEach & map

JavaScript中,数组的遍历我们肯定都不陌生,最常见的两个便是forEach 和 map。(当然还有别的譬如for, for in, for of, reduce, filter, every, some, ...)

何时使用 Map 来代替普通的 JS 对象

JS 普通对象 {key: value} 用于存放结构化数据。但有一件事我觉得很烦:对象键必须是字符串(或很少使用的 symbol)。如果将数字用作键会怎样? 在这种情况下不会有错误:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!