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. iOS开发-测量APP启动耗时

    冷启动 冷启动就是App被kill掉以后一切从头开始启动的过程. 热启动 当用户按下home键的时候,iOS的App并不会马上被kill掉,还会继续存活若干时间.理想情况下,用户点击App的图标再次回 ...

  2. GCC中的弱符号与强符号

    GCC中的弱符号与强符号 我们经常在编程中碰到一种情况叫符号重复定义.多个目标文件中含有相同名字全局符号的定义,那么这些目标文件链接的时候将会出现符号重复定义的错误.比如我们在目标文件A和目标文件B都 ...

  3. ZBrush中Tool工具的保存

    ZBrush软件的界面及操作方法与其他的三维软件完全不同,很多初学者常常会觉得有些困难,接下来我们就讲解一下ZBrush®最为基础的操作-Tool工具的保存. 首先要明白什么是Tool工具?我们创建的 ...

  4. java容器基础

    总结一下学过的java容器知识. 一.java容器框架 由于之前学习的java容器类比较混乱,先简单的整理一下java集合框架. 首先,像这种图,网上到处都是,因为这个也算比较准确吧,我也懒得自己画了 ...

  5. 第三章 Python函数

    函数 如果在开发程序时,需要某块代码多次,但是为了提⾼编写的效率以及代码的重⽤,所以把具有独⽴功能的代码块组织为⼀个⼩模块,这就是函数 函数的定义 函数定义的三种方式:无参函数,有参函数,空函数 #无 ...

  6. Pyhton学习——Day30

    # 内核态# 用户态# 操作系统的运行是在BOIS启动盘读取代码,从硬盘读取到内存中,被操作系统的内核中,一直存在在内存中# 计算机系统的三层结构:应用软件-->操作系统-->硬件# 一般 ...

  7. jq——属性和方法

    ps:所有元素要加上“” 属性:   1) attr:属性,元素.attr();  获取属性 $("input").click(function(){ console.log($( ...

  8. 《Let's Build A Simple Interpreter》之 Golang 版

    一直以来对编译器/解释器等都较有兴趣.我非科班出身,当初还在大学时,只是马马虎虎看完了<编译原理>之类教材,上机非常少,对龙书之类圣经也只是浅尝辄止而已.工作至今,基本已将编译原理相关知识 ...

  9. Robot Framework自动化框架搭建的步骤

    我把自己之前搭建Robot Framework自动化测试框架的步骤整理了一下,感兴趣的同学可以参考一下.   Robot Framework自动化测试框架+ 可视化编辑工具RIDE+Selenium2 ...

  10. MyEclipse 设置JSP,HTML的默认打开方式,避免出现打开后上面出现浏览器

    1. 2. 3. jsp的设置一样,这样myeclipse打开jsp就不会出现上面的浏览器了