【ES6基础】Map与WeakMap

栏目: JavaScript · 发布时间: 5年前

内容简介:ES6里除了增加了Set(集合类型)外(笔者在这篇文章《Set与WeakSet》有过介绍),今天这篇文章将介绍引入的新类型——Map(映射类型)及WeakMap。映射类型在计算机科学中定义属于关联数组,而关联数组的定义是若干键值对(Key/Value Pair)组成的集合,其中每个Key值都只能出现一次。本篇文章将从以下方面进行介绍:本篇文章阅读时间预计5分钟
【ES6基础】Map与WeakMap

ES6里除了增加了Set(集合类型)外(笔者在这篇文章《Set与WeakSet》有过介绍),今天这篇文章将介绍引入的新类型——Map(映射类型)及WeakMap。映射类型在计算机科学中定义属于关联数组,而关联数组的定义是若干键值对(Key/Value Pair)组成的集合,其中每个Key值都只能出现一次。

本篇文章将从以下方面进行介绍:

  • Map代码示例
  • Map常用方法示例
  • Map与Object的区别
  • weakMap介绍

本篇文章阅读时间预计5分钟

Map代码示例

Map的键和值可以是任何数据类型,键值对按照插入顺序排列,如果插入重复的键值,后面的键值会覆盖前者,下段代码是个简单示例,演示了Map的一些用法:

let map = new Map();
let o = {n: 1};
map.set(o, "A"); //add
map.set("2", 9);
console.log(map.has("2")); //check if key exists
console.log(map.get(o)); //retrieve value associated with key
console.log(...map);
console.log(map);
map.delete("2"); //delete key and associated value
map.clear(); //delete everything
//create a map from iterable object
let map_1 = new Map([[1, 2], [4, 5]]);
console.log(map_1.size); //number of keys复制代码

上述代码将会输出

true
A
[ { n: 1 }, 'A' ] [ '2', 9 ]
Map { { n: 1 } => 'A', '2' => 9 }
2复制代码

从上述代码中,我们可以看出使用new Map()语法进行声明,map键的类型可以使用任意对象作为键(字符串,object类型,functions),我们直接二维数组键值对的形传入到构建函数中,第一项为键,后一项为值。

const map=new Map([['foo',1],['foo',2]])
console.log(map);
console.log(map.get('foo'))复制代码

上述代码将会输出:

Map { 'foo' => 2 }
2复制代码

上述代码我们可以看出,如果存在相同的键,则会按照FIFO(First in First Out,先进先出)原则,后面的键值信息会覆盖前面的键值信息。

Map常用方法示例

以下表格罗列了Map相关的方法

操作方法

内容描述

map.set(key,value)

添加键值对到映射中

map.get(key)

获取映射中某一个键的对应值

map.delete(key)

将某一键值对移除映射

map.clear()

清空映射中所有键值对

map.entries()

返回一个以二元数组(键值对)作为元素的数组

map.has(key)

检查映射中是否包含某一键值对

map.keys()

返回一个当前映射中所有键作为元素的可迭代对象

map.values()

返回一个当前映射中所有值作为元素的可迭代对象

map.size

映射中键值对的数量

增删键值对与清空MAP

let user={name:"Aaron",id:1234};
let userHobbyMap=new Map();
userHobbyMap.set(user,['Ice fishing','Family Outting']);//添加键值对
console.log(userHobbyMap);
userHobbyMap.delete(user);//删除键值对
userHobbyMap.clear(); //清空键值对
console.log(userHobbyMap);复制代码

上述代码将会输出:

Map { { name: 'Aaron', id: 1234 } => [ 'Ice fishing', 'Family Outting' ] }
Map {}复制代码

获取键值对

与Set集合对象不一样,集合对象的元素没有元素位置的标识,故没有办法获取集合某元素,但是映射对象由键值对组成,所以可以利用键来获取对应的值。

const map=new Map();
map.set('foo', 'bar');
console.log(map.get('foo')); //output bar复制代码

检查映射对象中是否存在某键

与Set集合一样,Map映射也可以使用has(键)的方法来检查是否包含某键。

const map=new Map([['foo',1]])
console.log(map.has('foo'));//output true
console.log(map.has('bar'));//output false复制代码

遍历映射中的键值对

映射对象在设计上同样也是一种可迭代的对象,可以通过for-of循环对其遍历,同时也可以使用foreach进行遍历。 映射对象中带有entries()方法,用于返回包含所有键值对的可迭代的二元数组对象,而for-of和foreach便是先利用entries()方法先将映射对象转换成一个类数组对象,然年再进行迭代。

const map=new Map([['foo',1],['bar',2]]);
console.log(Array.from(map.entries()));
//output
//[ [ 'foo', 1 ], [ 'bar', 2 ] ]
for(const [key,value] of map){
    console.log(`${key}:${value}`);
}
//output
//foo:1
//bar:2
map.forEach((value,key,map)=>
  console.log(`${key}:${value}`))
//output
//foo:1
//bar:2复制代码

Map与Object的区别

说了这么多映射对象的方法,Map和Object对象有哪些区别呢,以下表格进行了总结:

对比项

映射对象Map

Object对象

存储键值对

遍历所有的键值对

检查是否包含指定的键值对

使用字符串作为键

使用Symbol作为键

使用任意对象作为键

可以很方便的得知键值对的数量

从中我们可以看出Map对象可以使用任何对象作为键,这就解决了我们实际应用中一个很大的痛点,比如现在一个DOM对象作为键时,Object就不是那么好用了。

WeakMap

与集合类型(Set)一样,映射类型也有一个Weak版本的WeakMap。WeakMap和WeakSet很相似,只不过WeakMap的键会检查变量的引用,只要其中任意一个引用被释放,该键值对就会被删除。

以下三点是Map和WeakMap的主要区别: 1.Map对象的键可以是任何类型,但WeakMap对象中的键只能是对象引用 2.WeakMap不能包含无引用的对象,否则会被自动清除出集合(垃圾回收机制)。 3.WeakSet对象是不可枚举的,无法获取大小。

下段代码示例验证了WeakMap的以上特性:

let weakmap = new WeakMap();
(function(){ 
  let o = {n: 1}; 
  weakmap.set(o, "A");
})();  // here 'o' key is garbage collected
let s = {m: 1};
weakmap.set(s, "B");
console.log(weakmap.get(s));
console.log(...weakmap); // exception thrown
weakmap.delete(s);
weakmap.clear(); // Exception, no such function
let weakmap_1 = new WeakMap([[{}, 2], [{}, 5]]); //this works
console.log(weakmap_1.size); //undefined”复制代码
const weakmap=new WeakMap();
let keyObject={id:1};
const valObject={score:100};
weakmap.set(keyObject, valObject);
console.log(weakmap.get(keyObject));
//output { score: 100 }
keyObject=null;
console.log(weakmap.has(keyObject));
//output false复制代码

小节

今天的内容就介绍到这里,我们明白了Map是一个键值对的映射对象,相比Object来说可以使用任何键做为键值,并且能够很方便的获取键值对。WeakMap相对于Map是一个不可枚举的对象,必须使用对象作为键值。如何更好的使用Map和WeakMap还需要具体结合我们实际的业务场景进行灵活使用。

【ES6基础】let和作用域

【ES6基础】const介绍

【ES6基础】默认参数值

【ES6基础】展开语法(Spread syntax)

【ES6基础】解构赋值(destructuring assignment)

【ES6基础】箭头函数(Arrow functions)

【ES6基础】模板字符串(Template String)

【ES6基础】Set与WeakSet

更多精彩内容,请微信关注”前端达人”公众号!

【ES6基础】Map与WeakMap


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP高级程序设计

PHP高级程序设计

Kevin McArthur / 汪泳 等 / 人民邮电出版社出版 / 2009.7 / 45.00元

今天,PHP已经是无可争议的Web开发主流语言。PHP 5以后,它的面向对象特性也足以与Java和C#相抗衡。然而,讲述PHP高级特性的资料一直缺乏,大大影响了PHP语言的深入应用。 本书填补了这一空白。它专门针对有一定经验的PHP程序员,详细讲解了对他们最为重要的主题:高级面向对象、设计模式、文档、测试和标准PHP库等内容。同时,为适应目前Web开发的新趋势,作者还全面探讨了MVC架构和Z......一起来看看 《PHP高级程序设计》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试