Set 和 Map 数据结构_什么数组是没有重复的

Set 数据结构

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

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

数据结构是用来存储数据的(数组和对象都可以存储数据)

 var arr = [1,2,3];//数组里面可以存储任何的数据类型(存储数据的容器)
 var obj = {
		name:'huasheng',//对象里面也可以存储数据
 }
1
2
3
4

怎么生成一个Set数据结构

var s1 = new Set();
//他会通过new关键词可以生成一个set数据结构(new关键词后面必须是Set这个单词)
console.log(s1)
1
2
3

Set(0)表示你当前有没有往这个Set数据里面添加数据(他是一个对象是用来存储数据的，是跟数组存储数据的方式很类似)

他是继承数组和对象之外的储存数据的方式，Set数据结构(存储数据)

Set数据结构：四个操作方法（操作Set数据结构的方法）

那么怎么往这个Set数据结构里面填充数据呢？？

var s1 = new Set();
s1.add(2)//s1.add(任意的数据类型)可以在当前的Set数据里面填充任何数据类型
s1.add('huasheng')
s1.add({name:'age'})
console.log(s1);
1
2
3
4
5

那么怎么往Set数据里面删除数据呢？？

var s1 = new Set();
s1.add('2');
s1.add(2);
s1.add('5');
s1.delete('5');//delete返回结果是true表示已经删除了该数据
console.log(s1);//s1.delete(数据)删除set结构中的指定数据
//(里面删除的是当前要删除的数据而不是索引项)
1
2
3
4
5
6
7

如果判断Set数据解构中有没有指定的数据

var s1 = new Set();
s1.add('2');
s1.add(2);
s1.delete('5')
console.log(s1.has('2'));//true表示在当前Set数据结构中用'2'这个数据
console.log(s1.has('5'));//false 表示在当前Set数据结构中没有'5'这个数据
// s1.has(数据)   判断set结构中有没有指定数据(里面判断的是当前要判断的数据而不是索引项)
1
2
3
4
5
6
7

那么数组中判断有没有指定的数据是什么方法？

var arr = [1,2,3];
console.log(arr.includes(2));//true表示有当前这个数据
console.log(arr.includes(4));//false表示没有当前这个数据
//arr.includes(数据)判断当前有没有指定的数据
1
2
3
4

那该怎么删除多条数据

// s1.delete这种方式只能删除一条数据那么怎么删除多条数据呢
var s1 = new Set();
s1.add('2');
s1.add(2);
s1.add('huahseng');
s1.clear()//s1.clear()函数执行的时候不需要传递任何的参数
console.log(s1);// clear()  清空set结构中的所有数据
1
2
3
4
5
6
7

总结：四个操作方法

• add(数据) 向Set结构中填充数据 ，返回 Set 结构本身。
• delete(数据) 删除Set结构中的指定数据，返回一个布尔值，表示删除是否成功。
• has(数据) 判断Set结构中有没有指定数据，返回一个布尔值，表示该值是否为Set的成员。
• clear() 清空Set结构中的所有数据，没有返回值。

Array.from()可以将 Set 结构转为数组。

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

基本用法

Set数据结构是不允许里面的数据是重复的

var s1 = new Set();//Set是JS内置的构造函数
s1.add(2);
s1.add('2');
s1.add(2);
s1.add('2');
s1.add('huasheng')
//Set数据结构里面的数据是不允许你的数据是重复的，即使是重复的那也会被Set数据结构给自动去重
console.log(s1)
1
2
3
4
5
6
7
8

那怎么让生成Set数据结构的时候初始就有指定长度的数据呢？？

var s1 = new Set();//没有传递任何实参
var s2 = new Set([1,2,3,4]);//传递的是一个数组
//通过new 启动Set函数的时候也可以传递一些实参,这样就可以设置一些初始值了
1
2
3

// Set数据结构的索引和数据(值,数组成员)是一致的
var s1 = new Set(["1",2,{},null,[1,2,3]]);
for(var [key,value] of s1.entries()){
	console.log(key,value)
}
1
2
3
4
5

那在Set数据结果中能够传递什么数据类型的初始值

Set初始值传递的是一个数组

var s3 = new Set([1,2,2,3,3,4]);
//Set数据结构中的数据是不能重复的,即使你传递了一个数组
//那么这个数组里面的数据也是不能重复的(重复就给你自动去重)
console.log(s3)
1
2
3
4

Set初始值传递的是一个字符串

var s4 = new Set('huahua');
console.log(s4)//在Set数据结构传递字符串的时候也是能把重复的字符给你自动去重的
1
2

总结：在Set数据结构中里面接收的实参都是有Symbol.iterator接口的这些实参是可以被Set数据结构所接收的(数组(常用),字符串(常用),函数的arguments(不常用),...)

就是利用Set数据结构在字符串和数组中去重的作用的，有Symbol.iterator也可以使用...扩展运算符，也可以使用for of循环遍历

遍历操作

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

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

keys()，values()，entries()

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

var s1 = new Set(["1",2,{},null,[1,2,3]]);

for(var key of s1.keys()){
	 console.log(key)// "1",2,{},null,[1,2,3]
}//用于循环Set数据结构数组的索引(属性名)的迭代器

for(var value of s1.values()){
	  console.log(value)// "1",2,{},null,[1,2,3]
}//用于循环Set数据结构的数组的值(属性值)的迭代器
		
for(var [key,value] of s1.entries()){
	 console.log(key,value);//"1",2,{},null,[1,2,3] "1",2,{},null,[1,2,3]
}//用于循环Set数据结构的索引和值的迭代器
1
2
3
4
5
6
7
8
9
10
11
12
13

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。

forEach()

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

var s1 = new Set(["1",2,{},null,[1,2,3]]);
s1.forEach( function(value, index) {
	 console.log(value, index)
});//Set数据结构只能使用forEach
// value：表示当前的数组成员
// index：表示当前数组成员对应的索引
1
2
3
4
5
6

forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象。

Set 实例的属性和方法

Set 结构的实例有以下属性：

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

那如何知道Set数据结构中有多少个

 var s3 = new Set(['1',2,'5']);
 console.log(s3.size)//数组中用length记录成员的数量，在Set数据结构是s3.size记录成员的数量
1
2

Set 实例的方法分为两大类：操作方法（用于操作数据） 和遍历方法（用于遍历成员）。\

对数组去重和对字符串去重

//利用set结构 实现数组去重
var arr = [1,2,3,4,3];
var s1 = new Set(arr);
     // console.log(s1)//现在数组已经去重了，但是他返回的是一个没有重复项的Set
var newArray = [...s1];
console.log(newArray)
    //先利用Set数据结构的数据不可重复的特点(把重复项去掉)在使用...扩展运算符
    //(Set数据有Symbol.iterator接口才可以被...给拆解)把Set数据给拆解放置在新的数组当中

 //利用set结构 实现字符串去重
var str = 'hello';
var s2 = new Set(str);
 var newStr = [...s2].join('');
 console.log(newStr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

WeakSet数据结构

含义

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别：

• WeakSet 的成员只能是对象，而不能是其他类型的值。
• WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

由于上面这个特点，WeakSet 的成员是不适合引用的，因为它会随时消失。另外，由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。

WeakSet数据结构不稳定有时候有有时候没有

var arr = [1,2,3];
var arr1 = arr;
let ws = new WeakSet([
		arr
])
arr = null;
arr1 = null;
1
2
3
4
5
6
7

用法跟set差不多

const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}

//下面的写法不行
const b = [3, 4];
const ws = new WeakSet(b);
// Uncaught TypeError: Invalid value used in weak set(…)
1
2
3
4
5
6
7
8

WeakSet 结构有以下三个方法。

• WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
• WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
• WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。

WeakSet 没有size属性，没有办法遍历它的成员。

Map数据结构

含义和基本用法

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，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
1
2
3
4
5
6
7
8
9

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
1
2
3
4
5
6
7
8
9
10

Map数据结构也有Symbol.iterator接口，也能被for of 所循环

 var m = new Map();
 var obj = {name:'huasheng'};
 var arr = [1,2,3,4]
 m.set(obj,'我是我的属性名字是对象');
 m.set(arr,'我是我的属性名字是数组')
 for(var detail of m.entries()){
	 console.log(detail)
	 console.log(typeof detail[0],typeof detail[1])
 }
1
2
3
4
5
6
7
8
9

注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined
1
2
3
4

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

实例的属性和操作方法

1. size属性 返回成员总数
2. set(key,value) 设置键值对，返回Map结构
3. get(key) 读取key对应的值，找不到就是undefined
4. has(key) 返回布尔值，表示key是否在Map中
5. delete(key) 删除某个键，返回true，失败返回false
6. clear() 清空所有成员，没有返回值

遍历方法

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

1. keys()：返回键名的遍历器。
2. values()：返回键值的遍历器。
3. entries()：返回所有成员的遍历器。
4. forEach()：遍历 Map 的所有成员。

需要特别注意的是，Map 的遍历顺序就是插入顺序。遍历行为基本与set的一致。

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

Map 转为数组

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
1
2
3
4

数组 转为 Map

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }
1
2
3
4
5
6
7
8

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 }
1
2
3
4
5
6
7
8
9
10
11
12
13

对象转为 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}
1
2
3
4
5
6
7
8
9
10

Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，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}'
1
2
3
4
5
6
7

另一种情况是，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"]]]'
1
2
3
4
5
6
7

JSON 转为 Map

JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
1
2
3
4
5
6

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是数组转为 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
1
2
3
4
5
6

WeakMap数据类型

含义

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

WeakMap与Map的区别有两点：

• WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
• WeakMap的键名所指向的对象，不计入垃圾回收机制。

WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];
//e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。
//一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。
1
2
3
4
5
6
7
8

WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。

const wm = new WeakMap();
const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"
1
2
3
4
5

WeakMap 的语法

WeakMap只有四个方法可用：get()、set()、has()、delete()。

无法被遍历，因为没有size。无法被清空，因为没有clear()，跟WeakSet相似。

WeakMap 应用的典型

let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);
1
2
3
4
5
6
7
8
9

上面代码中，myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。