目录
Map
基本用法
和 Object 类似,也是键值对的集合,Object 的键名只能是字符串或Symbol,Map 的键名可以是任何值。
let myMap = new Map();
// 键名是字符串
let key1 = "string";
myMap.set(key1, "我的key是string类型");
console.log(myMap.get(key1)); // 我是string
console.log(myMap.get("string")); // 我是string 因为 key1 ==="string"
// 键名是函数
let key2 = () => {};
myMap.set(key2, "我的key是function类型");
console.log(myMap.get(key2)); // 我是function
console.log(myMap.get(() => {})); // undefined 因为 key2 !== (() => {})
// 键名是对象
let key3 = {};
myMap.set(key3, "我的key是object类型");
console.log(myMap.get(key3)); // 我的key是object类型
console.log(myMap.get({})); // undefined 因为 key3 !== {}
// 键名是NaN
let key4 = NaN;
myMap.set(key4, "我的key是NaN类型");
console.log(myMap.get(key4)); // 我的key是NaN类型
console.log(myMap.get(NaN)); // 我的key是NaN类型
如果对同一个键多次赋值,将覆盖前一次的值,读取一个未知的键,返回undefined。
let myMap = new Map().set("a", 1).set("a", 2);
console.log(myMap.get("a")); // 2
console.log(myMap.get("b")); // 读取未知的键,返回 undefined
如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,比如0
和-0
就是一个键,布尔值true
和字符串true
则是两个不同的键。另外,undefined
和null
也是两个不同的键。
let myMap = new Map();
myMap.set(-0, 123);
console.log(-0 === +0); // true
console.log(myMap.get(+0)); // 123 因为 -0 === +0
myMap.set(true, 1);
myMap.set("true", 2);
console.log(myMap.get(true)); // 1
console.log(myMap.get("true")); // 2
myMap.set(undefined, 3);
myMap.set(null, 4);
console.log(myMap.get(undefined)); // 3
console.log(myMap.get(null)); // 4
myMap.set(NaN, 123);
myMap.set(NaN, 456);
// 虽然NaN !== NaN,但是值被覆盖了,说明Map认为他们是同一个键
console.log(myMap.get(NaN)); // 456
注意:注意最后一段代码,虽然NaN不严格相等于自身,但 Map 将其视为同一个键。
Map 也可以接收一个数组作为参数。该数组的成员是一个个表示键值对的数组。
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
console.log(myMap.size); // 3
console.log(myMap.has("a")); // true
console.log(myMap.get("a")); // 1
console.log(myMap.has("b")); // true
console.log(myMap.get("b")); // 2
实例的属性和方法
1、size 属性
size属性返回Map的成员总数。
let myMap = new Map().set("a", 1).set("b", 2);
console.log(myMap.size); // 2
2、set(key, value) 方法
set方法接收key、value 两个参数,key为键名,value为键值,然后返回整个Map结构。如果key已经存在,则key对应的键值会被覆盖,否则生成新键。set方法返回的是当前Map对象,因此可以采用链式写法。
let myMap = new Map().set("a", 1).set("b", 2).set("c", 3).set("d", 4);
3、get(key) 方法
get
方法读取key
对应的键值,如果找不到key
,返回undefined
。
let myMap = new Map();
console.log(myMap.get("a")); // undefined
4、has(key)
has方法返回一个Boolean值,标识key是否在当前Map中。
let myMap = new Map().set("a", 1).set("b", 2).set("c", 3).set("d", 4);
console.log(myMap.has("a")); // true
console.log(myMap.has("b")); // true
console.log(myMap.has("c")); // true
console.log(myMap.has("d")); // true
console.log(myMap.has("e")); // false
console.log(myMap.has("f")); // false
5、delete(key) 方法
delete方法删除key键,返回true,如果删除失败,则返回false。
let myMap = new Map().set("a", 1);
console.log(myMap.has("a")); // true
console.log(myMap.delete("a")); // true
console.log(myMap.has("a")); // fasle
console.log(myMap.delete("a")); // false
6、clear() 方法
clear方法清除Map所有成员,无返回值。
let myMap = new Map().set("a", 1).set("b", 2).set("c", 3).set("d", 4);
console.log(myMap.size); // 4
myMap.clear();
console.log(myMap.size); // 0
遍历方法
Map 结构原生提供三个遍历器生成函数。
Map.prototype.keys()
:返回键名的遍历器。Map.prototype.values()
:返回键值的遍历器。Map.prototype.entries()
:返回所有成员的遍历器。Map.prototype.forEach()
:遍历 Map 的所有成员。
需要特别注意的是,Map 的遍历顺序就是插入顺序。
1、keys()
,values()
,entries()
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
for (let key of myMap.keys()) {
console.log(key);
// a
// b
// c
}
for (let value of myMap.values()) {
console.log(value);
// 1
// 2
// 3
}
for (let item of myMap.entries()) {
console.log(item);
// ['a', 1]
// ['b', 2]
// ['c', 3]
}
for (let [key, value] of myMap.entries()) {
console.log(key, value);
// a 1
// b 2
// c 3
}
// 等同于使用map.entries()
for (let [key, value] of myMap) {
console.log(key, value);
// a 1
// b 2
// c 3
}
注意最后一段代码,Map 结构的默认遍历器接口(Symbol.iterator
属性),就是entries
方法。
2、forEach()
Map的forEach方法,与数组的forEach方法类似,也可以实现遍历。
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
myMap.forEach((value, key) => {
console.log("Key: %s, Value: %s", key, value);
// Key: a, Value: 1
// Key: b, Value: 2
// Key: c, Value: 3
});
Map对象的操作
1、Map 与 Array 的转换
(1)Map 转为 Array
Map 转为 Array方便的方法就是使用扩展运算符(...),也可以使用 Array.from 方法将 Map 转换为二维数组。
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
console.log([...myMap]); // [["a", 1], ["b", 2], ["c", 3]]
console.log(Array.from(myMap)); // [["a", 1], ["b", 2], ["c", 3]]
(2)Array 转为 Map
直接使用Map构造函数就可以将数组转换为Map。
let arr = [
["a", 1],
["b", 2],
["c", 3],
];
let myMap = new Map(arr);
console.log(myMap); // {'a' => 1, 'b' => 2, 'c' => 3}
2、Map 与 Object 的转换
(1)Map转Object
如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
function handleMapToObject(map) {
let obj = {};
for (let [key, val] of map) {
obj[key] = val;
}
return obj;
}
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
[NaN, NaN],
[() => {}, () => {}],
]);
console.log(handleMapToObject(myMap)); // {a: 1, b: 2, c: 3, NaN: NaN, () => {}: ƒ}
(2)Object转Map
可以使用Object.entries()。
let obj = { a: 1, b: 2, c: 3 };
let myMap = new Map(Object.entries(obj));
console.log(myMap); // {'a' => 1, 'b' => 2, 'c' => 3}
还可以自己写一个转换方法。
let obj = { a: 1, b: 2, c: 3 };
function handleObjectToMap(obj) {
let myMap = new Map();
for (let key in obj) {
myMap.set(key, obj[key]);
}
return myMap;
}
console.log(handleObjectToMap(obj)); // {'a' => 1, 'b' => 2, 'c' => 3}
3、Map的克隆
Map构造函数传入一个Map实例,迭代出新的对象。
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
let cloneMap = new Map(myMap);
console.log(cloneMap === myMap); // false
4、Map的合并
合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的。
let myMap = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
let myMap1 = new Map([
["a", "a"],
["b", "b"],
]);
let merged = new Map([...myMap, ...myMap1]);
console.log(merged); // {'a' => 'a', 'b' => 'b', 'c' => 3}
set
基本用法
和数组类似,但是成员的值都是唯一的。
let mySet = new Set();
console.log(mySet.add(1)); // Set(1) {1}
console.log(mySet.add(2)); // Set(2) {1, 2}
console.log(mySet.add(3)); // Set(3) {1, 2, 3}
// 现在开始添加重复值,打印数据和上面一样,体现了值的唯一性
console.log(mySet.add(3)); // Set(3) {1, 2, 3}
console.log(mySet.add("3")); // Set(4) {1, 2, 3, '3'}
上面代码通过add()
方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。
实际上两个NaN是不严格相等的,但是在Set内部,他们被认为是相等的。另外,两个对象总是不相等的。
let mySet = new Set();
mySet.add(NaN);
mySet.add(NaN);
// 添加了两个NaN,但是打印只有一个
console.log(mySet); // Set(1) {NaN}
mySet.add({});
mySet.add({});
// 由于两个空对象不相等,所以它们被视为两个值
console.log(mySet); // Set(3) {NaN, {…}, {…}}
实例的属性和方法
1、size 属性
size属性返回Set的成员总数。
let mySet = new Set().add(1).add(2).add(3);
console.log(mySet.size); // 3
2、add(value) 方法
添加某个值,add方法返回的是当前Set结构本身,因此可以采用链式写法。
let mySet = new Set().add(1).add(2).add(3).add(4).add(5);
3、has(value) 方法
返回一个布尔值,表示该值是否为Set
的成员。
let mySet = new Set().add(1).add(2).add(3);
console.log(mySet.has(1)); // true
console.log(mySet.has(5)); // false
4、delete(value) 方法
删除某个值,返回一个Boolean值,成功返回true,失败返回false。
let mySet = new Set().add(1).add(2).add(3);
console.log(mySet.has(1)); // true
console.log(mySet.delete(1)); // 删除成功返回 true
console.log(mySet.has(1)); // false
console.log(mySet.delete(1)); // 删除失败 返回 false
5、clear() 方法
清除Set结构所有成员,没有返回值。
let mySet = new Set().add(1).add(2).add(3).add(4).add(5);
console.log(mySet.size); // 5
mySet.clear();
console.log(mySet.size); // 0
遍历方法
Set 结构的实例有四个遍历方法,可以用于遍历成员
Set.prototype.keys()
:返回键名的遍历器Set.prototype.values()
:返回键值的遍历器Set.prototype.entries()
:返回键值对的遍历器Set.prototype.forEach()
:使用回调函数遍历每个成员
需要特别注意的是,Set的遍历顺序和Map一样,就是插入顺序。
1、keys()
,values()
,entries()
由于Set结构没有键名,只有键值(键名和键值相同),所以keys方法和values方法返回数据完全一致。
let mySet = new Set().add(1).add(2).add(3);
for (let key of mySet.keys()) {
console.log(key);
// 1
// 2
// 3
}
for (let value of mySet.values()) {
console.log(value);
// 1
// 2
// 3
}
for (let item of mySet.entries()) {
console.log(item);
// [1, 1]
// [2, 2]
// [3, 3]
}
for (let value of mySet) {
console.log(value);
// 1
// 2
// 3
}
Set 结构的实例默认可遍历,它的默认遍历器生成函数就是它的values
方法。
这意味着,可以省略values
方法,直接用for...of
循环遍历 Set。(上面代码最后一段)
2、forEach()
Set 结构的实例与Map一样,也拥有forEach
方法,用于对每个成员执行某种操作,没有返回值。
let mySet = new Set().add(1).add(2).add(3);
mySet.forEach((value, key, set) => {
console.log("Key: %s, Value: %s", key, value);
// Key: 1, Value: 1
// Key: 2, Value: 2
// Key: 3, Value: 3
});
set的应用
1、类型转换
Set转Array
扩展运算符(...)、Array.from()。
let mySet = new Set().add(1).add(2).add(3);
console.log([...mySet]); // [1, 2, 3]
console.log(Array.from(mySet)); // [1, 2, 3]
2、数组去重
let arr = [1, 2, 3, 3, 3, 4, 5, 5, 5, 5];
let mySet = new Set(arr);
console.log([...mySet]); // [1, 2, 3, 4, 5]
3、并集(Union)
// 并集
let mySet1 = new Set([1, 2, 3]);
let mySet2 = new Set([2, 3, 4]);
let union = new Set([...mySet1, ...mySet2]);
console.log([...union]); // [1, 2, 3, 4]
4、交集(Intersect)
// 交集
let mySet1 = new Set([1, 2, 3]);
let mySet2 = new Set([2, 3, 4]);
let intersect = new Set(Array.from(mySet1).filter((el) => mySet2.has(el)));
console.log([...intersect]); // [2, 3]
5、差集(Difference)
// 差集
let mySet1 = new Set([1, 2, 3]);
let mySet2 = new Set([2, 3, 4]);
let difference = new Set(Array.from(mySet1).filter((el) => !mySet2.has(el)));
console.log([...difference]); // [1]