Set 和 Map 数据结构

一、ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。也可以结合map(循环遍历数组),filter(过滤数组)使用

例1:
const set = new Set([1, 2, 3, 4, 4]);
console.log( [...set] )   // [1,2,3,4]

例2:
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log( items )    // [1,2,3,4,5]
console.log( items.size )    // 5
1.1、去除数组的重复成员 [...new Set(array)]
let arr = [1,2,3,4,4,5,5,7,1,2,3,8]
let a1 = [...new Set(arr)]
console.log( a1 );    //[1,2,3,4,5,7,8]
1.2、Set两个对象总是不相等的,由于两个空对象不相等,所以它们被视为两个值。
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2

二、操作方法(用于操作数据)

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

2.1、Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
console.log( items );    // Set { 1, 2, 3, 4, 5 }
console.log( array );    // [ 1, 2, 3, 4, 5 ]


去除数组重复数据
function dedupe(array) {
    return Array.from(new Set(array));
};
dedupe([1, 1, 2, 3]) // [1, 2, 3]

三、遍历方法(用于遍历成员)

--keys():返回键名的遍历器
--values():返回键值的遍历器
--entries():返回键值对的遍历器
--forEach():使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue']);
--keys():
    for (let item of set.keys()) {
        console.log(item);    // red  green  blue
    };

--values():
    for (let item of set.values()) {
      console.log(item);    // red  green  blue
    };

--entries():
    for (let item of set.entries()) {
      console.log(item);
    };
    // ["red", "red"]
    // ["green", "green"]
    // ["blue", "blue"]

--forEach();
    set = new Set([1, 4, 9]);
    set.forEach(
        (value, key) => {
            console.log(key + ' : ' + value)
        }
     )
    // 1 : 1
    // 4 : 4
    // 9 : 9

四、map和filter方法用于 Set

--map 用于循环遍历数组
    let set = new Set([1, 2, 3]);
    set = new Set([...set].map(x => x * 2));
    // 返回Set结构:{2, 4, 6}

--filter 用于过滤
    let set = new Set([1, 2, 3, 4, 5]);
    set = new Set([...set].filter(x => (x % 2) == 0));
    // 返回Set结构:{2, 4}
4.1、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

5.1、类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
5.2、如果对同一个键多次赋值,后面的值将覆盖前面的值
const map = new Map();
map
  .set(1, 'aaa')
  .set(1, 'bbb');

map.get(1) // "bbb"
5.3、注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

上面代码的set和get方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的,因此get方法无法读取该键,返回undefined。


const map = new Map();
const k1 = ['a'];
const k2 = ['a'];
map
  .set(k1, 111)
  .set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222

变量k1和k2的值是一样的,但是它们在 Map 结构中被视为两个键。
5.4、实例的属性和操作方法
--size();属性返回 Map 结构的成员总数
    const map = new Map();
    map.set('foo', true);
    map.set('bar', false);
    map.size // 2

--set(key, value);设置键名key对应的键值为value,然后返回整个 Map 结构。
    let map = new Map()
        .set(1, 'a')
        .set(2, 'b')
        .set(3, 'c');
        // set方法返回的是当前的Map对象,因此可以采用链式写法。

--get(key)读取key对应的键值,如果找不到key,返回undefined。
    const m = new Map();
    const hello = function() {console.log('hello');};
    m.set(hello, 'Hello ES6!') // 键是函数
    m.get(hello)  // Hello ES6!

--has(key);返回一个布尔值,表示某个键是否在当前 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

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

--clear();清除所有成员,没有返回值。
    let map = new Map();
    map.set('foo', true);
    map.set('bar', false);
    map.size // 2
    map.clear()
    map.size // 0
5.5、遍历方法

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

5.6、Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。
const map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three']
]);

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

推荐阅读更多精彩内容