● 共同点
三者都是对象
● Map 和 Objects 的区别
①：Object的键只能是字符串或者Symbols，Map的键可以是任何类型。
②：Map中的键值遵循FIFO原则，即有序的。而Object添加的键则不是。
③：Map中的键值对可以通过size来计算，Object需要我们手动计算。
④：Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
● Map
是一组键值对的结构，具有极快的查找速度。
- 1 - Map与Array的转换
使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组, 看下边的用例。
let myMap = new Map([["name", "lle"], ["age", "11"], ["id", "001"]]);
let myArr = Array.from(myMap);
- 2 - Map的克隆
let myMap = new Map([["name", "lle"], ["age", "11"], ["id", "001"]]);
let newMap = new Map(myMap);
console.log("=========>>>", myMap);
console.log("=========>>>", newMap);
console.log("=========>>>", myMap === newMap); // Map 对象构造函数生成实例，迭代出新的对象
- 3 - Map的合并
let map_1 = new Map([["name", "lle"], ["age", "11"]]);
let map_2 = new Map([["id", "001"]]);
let merged_map = new Map([...map_1, ...map_2]);
console.log("=========>>>", merged_map);
- 4 - Map内成员的设置set(如果属于没有的成员就是新增，如果存在的就是修改其值)
语法：.set(key, value);
let myMap = new Map([["name", "lle"]]);
console.log("=========>>>", myMap);
myMap.set("age", 11);
console.log("=========>>>", myMap);
- 5 - Map的获取get
语法：.get(key)
let myMap = new Map([["name", "lle"]]);
console.log("=========>>>", myMap);
console.log("=========>>>", myMap.get("name"));
- 6 - Map的两种遍历方法
①：for...of
let myMap = new Map([["name", "lle"], ["age", "11"]]);
for(let [key, value] of myMap) {
console.log("=========>>>", key + ":" + value);
}
②：forEach
注意参数value和key的位置是不能互换的哦！
let myMap = new Map([["name", "lle"], ["age", "11"]]);
myMap.forEach((value, key) => {
console.log("=========>>>", key + ":" + value);
});
● Set
语法：new Set([]) | new Set(string);
Set 对象允许你存储任何类型的唯一值（不可重复），无论是原始值或者是对象引用。
- 1 - 对于数组去重有很好的效果
let arr = [1, 2, 3, 2, 3, 4, 5];
let mySet = new Set([...arr]);
console.log("=========>>>", mySet);
输出： =========>>> Set(5) {1, 2, 3, 4, 5}
- 2 - Set字符串会被拆分成单个字母的数组
let mySet = new Set("hello");
console.log("=========>>>", mySet.size);
console.log("=========>>>", mySet);
- 3 - Set与Array的转换
let mySet = new Set("hello");
let myArr = [...mySet];
console.log("=========>>>", myArr);
- 4 - Set新增add
let mySet = new Set("hello");
console.log("=========>>>", mySet);
mySet.add("jj");
console.log("=========>>>", mySet);
- 5 - Set的两种遍历方法
①：for...of
let mySet = new Set("hello");
for(let item of mySet) {
console.log("=========>>>", item);
}
②：forEach
let mySet = new Set("hello");
mySet.forEach(([item]) => {
console.log("=========>>>", item);
});
- 6 - Set的作用
①：去重
let mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]
②：并集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let union = new Set([...a, ...b]); // {1, 2, 3, 4}
③：交集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
④：差集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let difference = new Set([...a].filter(x => !b.has(x))); // {1}
● Map和Set的共有属性方法
1：size 获取Map和Set对象的长度
let myMap = new Map([["name", "lle"], ["age", 11]]);
let mySet = new Set("hello");
console.log(=====>>>, myMap.size);
console.log(=====>>>, mySet.size);
网友评论