继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript Map 集合

为爱心太软
关注TA
已关注
手记 170
粉丝 1.4万
获赞 860

基本概念

ES6中的Map 类型是键值对的有序集合,和Object 类型最大的不同点是:Map 集合的键名和对应的值支持所有的数据类型,而Object 类型只能用字符串当作键名。

例子:

Object 类型

//数值2被自动转为字符串
let obj = {
    2: 2,
    "2": 2
}
console.log(Object.keys(obj).length);
//输出:1

Map 类型

let map = new Map([
    [2, 2],
    ["2", 2],
    [{}, {}]
]);
console.log(map.size);
//输出:3

创建Map 集合并添加成员

1、set方法设置键名key对应的键值为value,然后返回整个 Map 集合。如果key已经有值,则键值会被更新,否则就新生成该键。

例子:

const map = new Map();
map.set("name", "Tom").set("age", 19);
console.log(map);
//输出:{"name" => "Tom", "age" => 19}

2、Map构造函数接受数组作为参数初始化一个Map 集合。该数组的成员是一个个表示键值对的子数组。

例子:

const map = new Map([
    ["name", "Tom"],
    ["age", 19]
]);
console.log(map);
//输出:{"name" => "Tom", "age" => 19}

3、具有双元素的数据结构都可以当作Map构造函数的参数创建Map 集合。

例子:

const set = new Set();
set.add(["name", "Tom"]).add(["age", 19]);
const map = new Map(set);
console.log(map);
//输出:{"name" => "Tom", "age" => 19}

Map 集合常用属性和方法

size 属性:size属性返回 Map 集合的成员总数。
set(key, value):set方法设置键名key对应的键值为value,然后返回整个 Map 集合。如果key已经有值,则键值会被更新,否则就新生成该键。
get(key):get方法读取key对应的键值,如果找不到key,返回undefined。
has(key):has方法返回一个布尔值,表示某个键是否在当前 Map 集合之中。
delete(key):delete方法删除某个键,返回true。如果删除失败,返回false。
clear():clear方法清除所有成员,没有返回值。

例子:

const map = new Map();
map.set("name", "Tom").set("age", 19);
console.log(map.size); //输出:2
console.log(map.has("name")); //输出:true
console.log(map.get("name")); //输出:Tom
console.log(map.delete("name")); //输出:true
console.log(map.size); //输出:1
map.clear();
console.log(map.size); //输出:0

遍历方法

keys() 、values() 和 entries()方法

keys()返回键名,values()返回键值,entries()返回所有成员的键值对。这三个方法一般配合for…of循环使用。

例子:

const map = new Map([
    ["name", "Tom"],
    ["age", 19]
]);

console.log(map.keys()); //输出:{"name", "age"}
for (let k of map.keys()) {
    console.log(k); //输出:name age
}

console.log(map.values()); //输出:{"Tom", 19}
for (let v of map.values()) {
    console.log(v); //输出:Tom 19
}

console.log(map.entries()); //输出:{"name" => "Tom", "age" => 19}
for (let [k, v] of map.entries()) {
    console.log(k + ":" + v); //输出:name:Tom age:19
}

//可以直接使用map
console.log(map); //输出:{"name" => "Tom", "age" => 19}
for (let [k, v] of map) {
    console.log(k + ":" + v); //输出:name:Tom age:19
}

forEach()方法

forEach() 方法对集合中的每一个成员运行给定函数。这个方法没有返回值,可以替代for…of循环使用。该方法的回调函数中一共有三个参数,依次为键值、键名和集合本身。

例子:

const map = new Map([
    ["name", "Tom"],
    ["age", 19]
]);

map.forEach((v, k, a) => console.log(k + ":" + v));
//输出:name:Tom age:19

*Map 的遍历顺序就是插入顺序。

Map 集合与数组的相互转换

Map 集合转为数组

使用展开运算符(…)或Array.from()方法。

例子:

console.log([...new Map().set("name", "Tom")]);
console.log(Array.from(new Map().set("name", "Tom")));
//输出:[["name", "Tom"]]

数组转为 Map集合

将数组传入 Map 构造函数,就可以转为 Map集合。

例子:

console.log(new Map([
    ["age", 19]
]));
//输出:{"age" => 19}

如有错误,欢迎指正,本人不胜感激。

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP