Set 和 Map 数据结构

一、Set

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

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

这就提供了新的数组去重方法

function dedupe(array) {
return Array.from(new Set(array));
} dedupe([1, 1, 2, 3]) //[1, 2, 3]

1、 Set实例的属性和方法

1)属性:

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

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

2)方法:

  操作方法:

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

  

s.add(1).add(2).add(2).add(4);   // {1, 2, 4}
// 注意2被加入了两次 s.size // s.has(1) // true
s.has(2) // true
s.has(3) // false
s.has(4) // true s.delete(2);
s.has(2) // false
s.clear() 
s.has(1) //false

下面是一个对比,看看在判断是否包括一个键上面,Object结构和Set结构的写法不同。

// 对象的写法
const properties = {
'width': 1,
'height': 1
}; if (properties[someName]) {
// do something
} // Set的写法
const properties = new Set(); properties.add('width');
properties.add('height'); if (properties.has(someName)) {
// do something
}

  遍历方法:

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

(1)keys(),values(),entries()

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

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

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

(2)forEach()

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

上面代码说明,forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致,依次为键值、键名、集合本身(上例省略了该参数)。这里需要注意,Set 结构的键名就是键值(两者是同一个值),因此第一个参数与第二个参数的值永远都是一样的。

(3)遍历的应用

数组的map和filter方法也可以间接用于 Set 了。

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6} let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}

因此使用 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

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

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

1)属性:

 size 属性size属性返回 Map 结构的成员总数。

const map = new Map();
map.set('foo', true);
map.set('bar', false); map.size //

2)方法:

(1)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

  

 set方法返回的是当前的Map对象,因此可以采用链式写法。

let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');

  

(2) 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!

(3)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

(4)delete(key)

 delete方法删除某个键,返回true。如果删除失败,返回false

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true m.delete(undefined)
m.has(undefined) // false

(5)clear()

 clear方法清除所有成员,没有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false); map.size //
map.clear()
map.size //

 3)遍历方法

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

需要特别注意的是,Map 的遍历顺序就是插入顺序。

const map = new Map([
['F', 'no'],
['T', 'yes'],
]); for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T" for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes" for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes" // 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes" // 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"

上面代码最后的那个例子,表示 Map 结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。

map[Symbol.iterator] === map.entries
// true

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']]

此外,Map 还有一个forEach方法,与数组的forEach方法类似,也可以实现遍历。

map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});

forEach方法还可以接受第二个参数,用来绑定this

const reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value);
}
}; map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter); //this指向reporter

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

1)Map 转 数组

const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']); // 第一种比较方便的
[...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
// 第二种
Array.from(myMap) // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

2)数组 转为 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

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

(1)所有键名都是字符串

function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
} jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

(2)整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。(推荐)

function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
} jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

es6 学习7 Set 和 Map 数据结构的更多相关文章

  1. es6学习笔记-set和map数据结构

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...

  2. JavaScript(ES6)学习笔记-Set和Map数据结构(一)

    一.Set 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. , , , , ']); s; // ...

  3. ES6中的Set与Map数据结构

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...

  4. ES6中的Set、Map数据结构

    Map.Set都是ES6新的数据结构,他们都是新的内置构造函数.也就是说typeof的结果,多了两个. 他们是什么:  Set是不能重复的数组.    Map是可以任何东西当做键的对象: ES6 提供 ...

  5. js-ES6学习笔记-Set和Map数据结构

    1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...

  6. es6笔记(5)Map数据结构

    概要 字典是用来存储不重复key的Hash结构.不同于集合(Set)的一点,字典使用的是[key,value]的形式来存储数据. JavaScript的对象(Object:{})只能用字符串当做key ...

  7. es6(三set和map数据结构)

    es6中提供了一个新的数据结构Set,他有点类似数组,但和数组不同的是,在里面你如果写入重复的值的话,他不会显示重复值. const s =new Set(); [2,3,4,5,6,6,6,7,8, ...

  8. ES6学习之Set和Map

    一.Set 1.Set 定义:Set类似于数组,但成员的值都是唯一的,没有重复的值 let s = new Set([1,2,3,4,5,2,4]); //Set { 1, 2, 3, 4, 5 } ...

  9. ES6学习笔记(10)----Set和Map数据结构

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Set和Map数据结构 1.Set  基本用法    Set是一种新的数据结构,它的成员都是唯一 ...

随机推荐

  1. Markdown标记语言

    Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber).它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”.这种语言吸收了很 ...

  2. hdu 3416 Marriage Match IV 【 最短路 最大流 】

    求边不可重复的最短路条数 先从起点到终点用一次dijkstra,再从终点到起点用一次dijkstra,来判断一条边是否在最短路上 如果在,就将这条边的两个端点连起来,容量为1 再跑一下dinic(), ...

  3. CDR 2017压感笔和压感设备该怎么设置使用?

    您可以通过CorelDRAW 2017 中的以下工具来运用压感笔.笔或其他设备的压力:艺术笔(表达模式).橡皮擦.涂抹.转动.吸引.排斥.粗糙和弄脏.此外,您还可以通过艺术笔(表达模式)工具.橡皮擦. ...

  4. IOS - 退出程序

    - (void)exitApplication { OAAppDelegate *app = [UIApplication sharedApplication].delegate; UIWindow ...

  5. springboot---web 应用开发-文件上传

    一.Spring Boot 默认使用 springMVC 包装好的解析器进行上传 二.添加代码 <form method="POST" enctype="multi ...

  6. phpMyAdmin 高级功能尚未完全设置,部分功能未激活(转载)

    phpMyAdmin 高级功能尚未完全设置,部分功能未激活.请点击这里查看原因. 第一步: 使用Mysql管理员帐号通过phpmyadmin登陆,然后点击“导入”,然后点击“浏览”按钮,找到phpmy ...

  7. 自动合法打印VitalSource Bookshelf中的电子书

    最近有一本2千多页的在VitalSource中的电子书想转为PDF随时阅读,没料网上找了一圈没有找到合适的.相对好一些的只有一个用Python写的模拟手动打印.于是想到了用AutoHotkey写一个自 ...

  8. JavaScript中的基础测试题

                                                                                                    Java ...

  9. 【codeforces 505D】Mr. Kitayuta's Technology

    [题目链接]:http://codeforces.com/problemset/problem/505/D [题意] 让你构造一张有向图; n个点; 以及所要求的m对联通关系(xi,yi) 即要求这张 ...

  10. Jquery学习总结(2)——jQuery Ajax用法详解

    [详解]jquery ajax在web应用开发中常用,主要包括有ajax,get,post,load,getscript等这几种常用无刷新操作方法,下面来给大家介绍一下.我们首先先从最简单的方法看起. ...