ES6中的Map和Set以及它们与Object的区别

● 共同点

三者都是对象

● 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);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335