ES6之set与map

一丶Set

1.基本概念和用法

ES6提供了新的数据结构——Set。它类似与数组,但是成员的值都是唯一的,没有重复。

Set本身就是一个构造函数,用来生产Set数据结构。

eg:

const set=new Set([1,2,3,4,5,5,5]);

console.log(set);

console.log(set.size);

控制台输出如图所示


1.jpg

向Set加入值时不会发生类型转换,所以5和"5"是两个不同的值。Set内部判断两个值是否相同时使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN本身,而精确相等运算符

认为NaN不等于自身,但是在Set中,它认为两个NaN是相等的

eg:

let set=new Set();

let a=NaN;

let b=NaN;

if (a===b){

    console.log(true);

}

else {

    console.log(false);

}

set.add(a).add(b);

console.log(set);

console.log(set.size);

控制台输出如图所示


2.jpg

另外,两个对象总是不相等的,

let set=new Set();

set.add({})

console.log(set.size);

set.add({});

console.log(set.size);

控制台输出如图


3.jpg

2.属性和方法

属性:

1.Set.prototype.constructor:构造函数,默认就是Set函数

2.Set.prototype.size:返回Set实例的成员总数

eg:

let set=new Set([1,2,3,3,3,4,5,5]);

console.log(set.size);

console.log(set.constructor);

控制台如下图

4.jpg

方法:

1.add():添加某个值

2.delete():删除某个值,返回一个布尔值,表示删除是否成功

3.has():返回一个布尔值,表示参数是否是Set结构的成员

4.clear():清除所有成员,没有返回值

3.遍历操作

Set结构的实例有四个遍历方法,可用于遍历成员

1.keys():返回键名的遍历器

2.values():返回键值的遍历器

3.entries():返回键值对的遍历器

4.foreach():使用回调函数遍历每个成员

keys(),values(),entries()返回的都是遍历器对象。Set结构没有键名,只有键值,所以keys()和values()方法的行为完全一致

eg:

let set=new Set(["red","green","blue"]);

for (let value of set.keys()){

    console.log(value);

}

for (let value of set.values()){

    console.log(value);

}

for (let value of set.entries()){

    console.log(value);

}

控制台输出如下图:


5.jpg

foreach方法:可以对每个成员都执行某种操作

eg:let set=new Set([1,2,3]);

console.log(set);

set.forEach(function (value, keys) {

    console.log(value * 2);

})   //控制台输出2,4,6;

二丶Map

1.基本概念和用法

javascript的对象(Object)本质上是键值对的集合(Hash)结构,但是只能用字符串作为键。这给它的使用带来了很大的限制。为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以当作键。也就是说,Object提供了“字符串——值”的对应,Map结构提供了“值——值”的对应,是一种更加完善的Hash结构的实现。

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

console.log(map);

console.log(map.size);

控制台输出如下


6.jpg

Map的键实际上是和内存地址绑定的,只要内存地址不一样,就视为两个键。如果Map的键是一个简单类型的值(数字,字符串,布尔值),则只要两个值严格相等,Map就视为其为一个键,包括0和-0,还有NaN.

2.属性和方法

属性:size属性,返回map结构的成员总数

方法:

1.set(key,value): 此方法可以设置key所对应的键值,然后返回给整个Map结构。如果key已经有值,则键值会被更新,否则就生成新键

2.get(key):get方法可以读取key对应的键值,如果找不到key,则返回undefined。

3.has(key):has方法返回一个布尔值,表示某个键是否在Map数据结构中

4.delete(key):delete方法删除某个键,返回true,如果删除失败,则返回false

5.clear():clear方法清除所有成员,没有返回值。

3.遍历操作

大致和Set结构相同,Map原生提供了3个遍历器生成函数和1个遍历方法。

1.keys():返回键名的遍历器

2.values():返回键值的遍历器

3.entries():返回键值对的遍历器

4.foreach():遍历map的全部成员

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

for (let key of map.keys()) {

    console.log(key);

}

for (let value of map.values()) {

    console.log(value);

}

for (let [key,value] of map.entries()) {

    console.log(key,value);

}

map.forEach(function (value, key) {

    console.log(key,value);

})

控制台结果如下(每两行分别为对应函数的输出)

7.jpg

4.与其他数据结构进行互相转换

1.Map转为数组

将Map转为数组的最方便方法就是使用拓展运算符(...)

eg:

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

let arr=[...map];

console.log(arr);

控制台输出如下:


8.jpg

2.数组转为map

将数组传入Map的构造函数就可以转为Map

const map=new Map([

    ['name','张三'],

    ['title','Author']

])

控制台输出如下


9.jpg

3.Map转为对象

如果Map所有的键都是字符串,则可以转为对象

function strMapToObj(strMap) {

    let obj=Object.create(null);

    for (let [key,value] of strMap.entries()){

        obj[key]=value

    }

    return obj;

}

4.对象转为Map

function objToStrMap(obj) {

    let map=new Map();

    for (let k of obj){

        map.set(k,obj[k]);

}

    return map;

}

5.Map转JSON

Map转为JSON要区分两种情况

①Map的键名都是字符串,这时候可以选择转为对象JSON

let myMap=new Map().set('yes',true).set('no',false);

function strMapToJson(strMap) {

    return JSON.stringify(strMapToObj(strMap))           //strMapToObj在上面已经定义

}

console.log(strMapToJson(myMap));    //控制台输出{"yes":true,"no":false}

②Map的键名有非字符串

let myMap=new Map().set('yes',true).set({foo:3},false);

function mapToArryJson(map) {

    return JSON.stringify([...map]);

}

console.log(mapToArryJson(myMap));     //控制台输出[["yes",true],[{"foo":3},false]]

6.JSON转为Map

正常情况下,JSON中的所有键名都是字符串

function jsonToStrMap(jsonStr) {

    return objToStrMap(JSON.parse(jsonStr));

}

但是,有一种特殊情况:整个JSON就是一个数组,且每个数组成员本身又是一个具有两个成员的数组,这是后,它可以一一的转为Map

function jsonToMap(jsonstr) {

    return new Map(JSON.parse(jsonstr));

}

console.log(jsonToMap('[[true,7],[{"fool":1},["abc"]]]'));


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

推荐阅读更多精彩内容