vue技术学习es6 语法学习Vue.js

ES6基础教程(第十四节)——Map数据结构

2019-07-15  本文已影响0人  多平方

上节介绍了Set和WeakSet,这节咱就讲Map和WeakMap是什么?当然,两者之前并没什么必然的联系,仅仅是用法类似。

Map结构是一个键值对的集合,跟Object对象不同的是,Map结构的键名可以是任何类型的值,而WeakMap结构的键名只允许是引用类型的值。

它们都提供了各自的方法和属性供开发者使用:set、get、has、delete等相同的方法,其中Map结构还多了clear方法,size属性和一些用于遍历的方法:keys、values、entries、forEach。

其实,如果学过python的同学对这个肯定是很清楚的,就是仿照python的数据类型。

现在,ES6 提供了Map结构给我们使用,它跟Object对象很像,但是不同的是,它的key键名的类型不再局限于字符串类型了,它可以是各种类型的值;可以说,它比Object对象更加灵活了,当然,也更加复杂了。

例如:

let m = new Map([

["name","大佬"],

["gender",1]

]);

console.log(m);

//打印结果:Map {"name" => "大佬", "gender" => 1}

大家注意 Map( )方法里面的参数,首先它是一个数组,而里面的内容也是由多个数组组成,“name”:“大佬”作为一个键值对,将它们装在一个数组里面,[“name”:“大佬”],另外一组键值对也一样:[“gender”:1 ]。这就是初始化一个Map结构实例的基本写法。

set()方法作用:给实例设置一对键值对,返回map实例:

let m = new Map();

//set方法添加

//添加一个string类型的键名

m.set("name","大佬");

//添加一个数字类型的键名

m.set(1,2);

console.log(m);

//打印结果:Map {"name" => "大佬", 1 => 2}

Map结构可以存储非字符串类型的键名:

//数组类型的键名

m.set([1],2);

//对象类型的键名

m.set({"name":"Zhangsan"},2);

//布尔类型的键名

m.set(true,2);

//Symbol类型的键名

m.set(Symbol('name'),2);

//null为键名

m.set(null,2);

//undefined为键名

m.set(undefined,2);

使用set方法的时候有一点需要注意,如果你设置一个已经存在的键名,那么后面的键值会覆盖前面的键值,这个和对象的操作一致:

let m = new Map();

m.set("name","隔壁大佬");

console.log(m);

//结果:Map {"name" => "隔壁大佬"}

//再次设置name的值

m.set("name","隔壁老王");

console.log(m);

//结果:Map {"name" => "隔壁老王"}

get()方法作用:获取指定键名的键值,返回键值:

let m = new Map([["name","大佬"]]);

m.get("name");//结果:大佬

m.get("gender");//结果:undefined

delete()方法作用:删除指定的键值对,删除成功返回:true,否则返回:false:

let m = new Map();

m.set("name","大佬");

//结果:Map {"name" => "大佬"}

m.delete("name");//结果:true

m.delete("gender");//结果:false

clear()方法,一次性删除所有键值对:

let m = new Map();

m.set("name","大佬");

m.set("gender",1);

m.clear();

console.log(m);

//打印结果:Map {}

has()方法作用:判断Map实例内是否含有指定的键值对,有就返回:true,否则返回:false:

let m = new Map();

m.set("name","大佬");

m.has('name');//结果:true

m.has('age');//结果:fal

Object对象能被 for...in遍历,Map结构也不示弱,同样可以被遍历。我们可以使用ES6的新特性 for...of来遍历它的键名或者键值:

entries()方法作用:返回实例的键值对遍历器:

let m = new Map([

["name","大佬"],

["age",18]

]);

for(let [key,value] of m.entries()){

console.log(key+'  '+value);

}

//打印结果:name 大佬

// age 18

keys( )方法:返回实例所有键名的遍历器,

values( ) 方法:返回实例所有键值的遍历器:

let m = new Map([

["name","大佬"],

["age",18]

]);

//使用keys方法获取键名

for(let key of m.keys()){

console.log(key);

}

//打印结果:name

// age

//使用values方法获取键值

for(let value of m.values()){

console.log(value);

}

//打印结果:大佬

// 18

forEach( )方法:

let m = new Map([

["name","大佬"],

["age",18]

]);

m.forEach(function(value,key){

console.log(key+':'+value);

});

//打印结果:name:大佬

// age:18

size:获取实例的成员数:

let m = new Map();

m.set(1,3);

m.set('1','3');

m.size;//结果:2

讲了Map结构,我们现在讲WeakMap结构:

WeakMap结构和Map结构很类似,不同点在于WeakMap结构的键名只支持引用类型的数据。哪些是引用类型的值呢?比如:数组,对象,函数:

let wm = new WeakMap();

//数组类型的键名

wm.set([1],2);

//对象类型的键名

wm.set({'name':'Zhangsan'},2);

//函数类型的键名

function fn(){};

wm.set(fn,2);

console.log(wm);

//打印:WeakMap {

// [1] => 2,

// Object {name: "Zhangsan"} => 2,

// function => 2

// }

WeakMap和Map的区别:

如果是普通的值类型则不允许。比如:字符串,数字,null,undefined,布尔类型。而Map结构是允许的,这就是两者的不同之处,谨记。

跟Map一样,WeakMap也拥有get、has、delete方法,用法和用途都一样。不同地方在于,WeakMap不支持clear方法,不支持遍历,也就没有了keys、values、entries、forEach这4个方法,也没有属性size。

理由跟WeakSet结构一样:键名中的引用类型是弱引用,你永远不知道这个引用对象什么时候会被垃圾回收机制回收了,如果这个引用类型的值被垃圾机制回收了,WeakMap实例中的对应键值对也会消失。

公众号

上一篇下一篇

猜你喜欢

热点阅读