ES6中Set和Map数据结构

Set 数据结构

一、基本用法

1、数据结构Set,类似于数组,成员的值都是唯一的,没有重复的值。

2、Set本身是一个构造函数,用来生成Set数据结构。

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
    console.log(i);
}
// 2 3 5 4

3、Set函数去除数组重复成员的方法。

(1)去除数组的重复成员
let arr = [3, 5, 2, 2, 5, 5];
[...new Set(arr)]

(2)去除数组重复成员的另一种方:  
function dedupe(array) {
     return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]

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

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN} 
注:只能向Set实例中加入一个NaN,这表明,在Set内部,两个NaN是相等。(对象总是不相等的)

二、Set实例的属性和方法

1、Set结构的实例属性:

        - Set.prototype.constructr:构造函数,默认就是Set函数。
        - Set.prototype.size:返回Set实例的成员总数。

2.Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。

        - add(value):添加某个值,返回Set结构本身。
        - delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
        - has(value):返回一个布尔值,表示该值是否为Set成员。
        - clear():清除所有成员,没有返回值。

属性和方法的实例:
s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

3、Array.from方法可以将Set结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

三、遍历操作

1、Set的结构实例的遍历方法

        - keys():返回键名的遍历器
        - values():返回键值的遍历器
        - entries():返回键值对的遍历器
        - forEach():使用回调函数遍历每个成员
注:Set结构的键名和键值,两者是同一个值。

2、使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。

let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

Map 数据结构

一、含义和基本用法

1、Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

二、实例的属性和操作方法

1、size属性

size属性返回Map结构的成员总数。
例:
const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2

2、set(key,value)

set方法设置键名key对应的键名为value,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新成该键。
例:
const m = new Map();

m.set('edition', 6)      // 键是字符串
m.set(262, 'standard')    // 键是数值
m.set(undefined, 'nah')  // 键是 undefined

3、get(key)

get方法读取key对应的键值,如果找不到key,返回undefined。
例:
const m = new Map();

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello) // Hello ES6!

4、has(key)

has方法返回一个布尔值,表示某个键是否在当前Map对象之中。
例:
const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition')    // true
m.has('years')      // false
m.has(262)          // true
m.has(undefined)    // true

5、delete(key)

delete方法删除某个键,返回true。如果删除失败,返回false。
例:
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)    // true

m.delete(undefined)
m.has(undefined)      // false

6、clear()

clear方法清除所有成员,没有返回值。
例:
let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

三、遍历方法

1、Map结构提供了三个遍历器生成函数和一个遍历方法。

        - keys():返回键名的遍历器。
        - values():返回键值的遍历器。
        - entries():返回所有成员的遍历器。
        - forEach():遍历 Map 的所有成员。

四、与其他数据结构的互相转换

1、Map转位数组

使用扩展运算符,是最为方便的方法。
例:
const myMap = new Map()
     .set(true, 7)
     .set({foo: 3}, ['abc']);[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

2、数组转为Map

将数组传入Map构造函数,就可以转为Map。
例:
new Map([
    [true, 7],
    [{foo: 3}, ['abc']]])
// Map {
//  true => 7,
//  Object {foo: 3} => ['abc']
// }

3、Map转为对象

如果所有Map的键都是字符串,就可以无损的转为对象;如果有非字符串的键名,键名也会被转为字符串,在作为对象的键名。
例:
function strMapToObj(strMap) {
     let obj = Object.create(null);
     for (let [k,v] of strMap) {
         obj[k] = v;
     }
     return obj;
}

const myMap = new Map()
     .set('yes', true)
     .set('no', false);strMapToObj(myMap)
// { yes: true, no: false }

4、对象转为Map

例:
function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

5、Map转为JSON

(1)Map键名都是字符串,这时可以选择转为对象JSON。
例:
function strMapToJson(strMap) {
    return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);strMapToJson(myMap)
// '{"yes":true,"no":false}'
(2)Map的键名有非字符串,这时可以选择转为数组JSON。
例:
function mapToArrayJson(map) {
     return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

6、JSON转为Map

JSOP转为Map,正常情况下,所有键名都是字符串。
例:
function jsonToStrMap(jsonStr) {
     return objToStrMap(JSON.parse(jsonStr));
}

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

推荐阅读更多精彩内容

  • 1.Set 基本用法 ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本...
    雨飞飞雨阅读 1,841评论 0 7
  • 基本用法 es6提供了新的数据结构Set,它类似于数组,但是他的成员值是唯一的,没有重复的值。Set本身就是一个构...
    曼珠沙华_521b阅读 334评论 0 0
  • 姓名:吴广明 公司:力创商业地产 盛和商学第346期努力二组副队长 【知~学习】 《六项精进》大纲背诵1遍共18...
    吴广明阅读 129评论 0 0
  • 观察目标:1了解孩子对拼图的掌握情况及各种图形的认识水平。 活动过程:今天淘淘、歆艺等小朋友在数学区玩拼图形娃娃的...
    wly媛阅读 1,229评论 0 0
  • 感觉最近到了另一个阶段,必须该做些 自己不喜欢做的事了。随心所欲,肯定是有代价的。 这两天重新听起了许嵩,重新听起...
    5v佳辰阅读 256评论 0 0