数据类型---Map和Set

本文最后更新于:2022年1月31日 凌晨

Map

ECMAScript 6 以前,在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。

使用 new 关键字和 Map 构造函数可以创建一个空映射:

1
const m = new Map(); 

如果想在创建的同时初始化实例,可以给 Map 构造函数传入一个可迭代对象,需要包含键/值对数组。

可迭代对象中的每个键/值对都会按照迭代顺序插入到新映射实例中:

1
2
3
4
5
6
const mapData = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"],
])
console.log(mapData.size); // 3
size

获取map映射中的键/值对的数量,如上所示;

set

使用set方法可以向Map内部添加键值对,set方法会返回Map映射实例:

1
2
3
const m = new Map();
m.set("firstName", "Matt")
.set("lastName", "Frisbie");
has

使用has方法判读Map实例内部是否存在某一属性(键)无法判断是否村子啊某一个值,, 返回值是布偶值:

1
2
3
4
5
const m = new Map();
m.set("firstName", "Matt")
.set("lastName", "Frisbie");
console.log(m.has("firstName")); // true
console.log(m.has("Matt")); // false
get

使用get方法获取Map实例上存在某一项属性的值,返回该属性的值,如果不存在返回undefined;

1
2
3
4
5
const m = new Map();
m.set("firstName", "Matt")
.set("lastName", "Frisbie");
m.get("firstName"); // 'Matt'
m.get("Matt"); // undefined
delete

使用delete删除Map实例中传入属性的键值对,该方法返回布偶值:

1
2
3
4
5
const m = new Map();
m.set("firstName", "Matt")
.set("lastName", "Frisbie");
// 如果删除不存在的属性则返回 false
m.delete("firstName"); // true
clear

使用clear方法可以清空Map实例映射中所有的键值对,该方法返回undefined

1
2
3
4
5
const m = new Map();
m.set("firstName", "Matt")
.set("lastName", "Frisbie");
// 清空了m,返回值是 undefined
console.log(m.clear());
与Object的不同

object中只能使用数值、字符串或符号作为键不同;

Map 可以使用任何 JavaScript 数据类型作为键;

但与 Object 类似,映射的值是没有限制的

1
2
3
4
5
6
7
8
9
10
11
12
13
const m = new Map(); 

const functionKey = function() {};
const symbolKey = Symbol();
const objectKey = new Object();

m.set(functionKey, "functionValue");
m.set(symbolKey, "symbolValue");
m.set(objectKey, "objectValue");

alert(m.get(functionKey)); // functionValue
alert(m.get(symbolKey)); // symbolValue
alert(m.get(objectKey)); // objectValue

当我们用object, array这种作为Map的key时候,当object, array内容改变时候,其Map内也会改变:

1
2
3
4
5
6
7
8
9
10
const m = new Map();

const objectKey = {}, objectValue = {};

m.set(objectKey, objectValue);
console.log(m); // Map(1) { {} => {} }

objectKey.foo = "foo";
objectValue.value = "value";
console.log(m); // Map(1) { { foo: 'foo' } => { value: 'value' } }

与 Object 类型的一个主要差异是,Map 实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作。

Set

ECMAScript 6 新增的 Set 是一种新集合类型,为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map,这是因为它们的大多数 API 和行为都是共有的。

使用 new 关键字和 Set 构造函数可以创建一个空集合:

1
2
3
4
const m = new Set();
// 使用数组初始化Set
const a = new Set(["val1", "val2", "val3"]);
console.log(a.size); // 3
size

通过 size 取得元素数量,如上述所示;

add

通过add方法增加值,该方法返回Set实例;

1
2
3
4
5
coconst a = new Set();

console.log(a.size); // 0
a.add("Matt");
console.log(a.size); // 1
has

通过has方法查询是否存在某个值,返回布偶值:

1
2
3
4
coconst a = new Set();
a.has("Matt"); // true
a.add("Matt");
a.has("Matt"); // false
delete

使用delete删除实例中传入的值,该方法返回布偶值:

1
2
3
4
const a = new Set();
console.log(a.delete("Matt")) // false
a.add("Matt");
console.log(a.delete("Matt")) // true
clear

使用clear方法清除Set实例中所有的数值,该方法返回undefined;

1
2
const a = new Set();
console.log(a.clear()) // undefined

与 Map 类似,Set 可以包含任何 JavaScript 数据类型作为值


数据类型---Map和Set
http://www.clearluv.com/2020/11/09/Map和Set/
作者
徐楠峰
发布于
2020年11月9日
许可协议