本文详解ES6新增的Map数据结构,其键值不仅限于字符串。内容涵盖Map的初始化、增删改查操作、遍历方法,以及通过扩展运算符、Object.create和JSON.stringify实现Map与数组、对象及JSON字符串的相互转换。
本文通过具体实例介绍ES6中新增的Map数据结构的功能与使用方法,供读者参考学习。
Map数据结构概述
新的数据结构Map
在JavaScript中,对象本质上是键值对的集合,但其键名仅限于字符串类型。为了解决这一限制,ES6引入了Map数据结构。Map同样存储键值对,但其键名可以是任意数据类型,包括对象,这提供了更大的灵活性。具体示例如下:
Map的基本操作
var m = new Map();
var ul = document.getElementsByTagName('ul');
m.set(ul,'hi');
console.log(m.get(ul)); //hi
对Map进行的操作主要包括以下几个方面:
m.set(ul,'content'); //为Map增加成员
m.get(ul);//获取键 ul对应的值
m.has(ul);//返回布尔值,判断是否含有键 ul
m.delete(ul);//删除键 ul,成功返回true,失败返回false
m.size //返回m长度
m.clear(); //清除m所有成员
可以直接为Map赋予初始值,具体方法如下:
var m = new Map([[li_1,'hello'],[li_2,'world']]);
该方法的参数是一个数组,数组中的每个元素都是表示键值对的数组。如果对此感到困惑,可以参考上述代码的实际执行效果:
var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
console.log(m.get(li_1)); //hello
若对同一键多次赋值,后赋的值将覆盖之前的值。需要注意的是,当键为对象时,只有当引用完全相同时,才被视为同一个键。接下来介绍Map的遍历方式。
Map的遍历方法
var ul = document.getElementsByTagName('ul');
var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
for ( let key of m.keys() ){
console.log(key);
}
for ( let val of m.values() ){
console.log(val);
}
for ( let item of m.entries() ){
console.log(item[0],item[1]);
}
for ( let [key,val] of m.entries() ){
console.log(key,val);
}
m.forEach( function( val , key , ul ){
console.log( this ); //ul
console.log( val , key);
} , ul ); // forEach的第二个参数用于改变匿名函数中this指向
Map与其他数据类型的相互转换
将Map转换为数组的最简便方式是使用扩展运算符。例如:
Map与数据类型的转换
console.log( ...m ); //[li, "hello"] [li, "world"]
将Map转换为对象时,要求所有键名均为字符串,可使用Object.create()函数。将Map转换为JSON字符串时,同样要求所有键名为字符串,可使用JSON.Stringify()函数。
希望上述内容能对大家的ECMAScript编程有所帮助。