es6学习笔记--新数据结构Set，Map以及WeakSet，WeakMap

时间：2024-04-14 15:25:45

在javascript中，存储数据的方式大部分就是以数组或者对象形式存储的，es6出现了4种新集合Set，Map，WeakSet，WeakMap来存储数据，简化了编程。

集合--Set

类似于数组，但是成员的值都是唯一的，没有重复的值。通过Set集合可以快速访问其中的数据，更有效地追踪各种离散值
Set自身是个构造函数。使用 new 来生成 Set 数据结构
let arr = new Set([1,2,3,4,4,4])

console.log(arr)   // Set(4) {1, 2, 3, 4}

console.log(Object.prototype.toString.call( arr))    // [object Set]

let obj = new Set({name:'peter'})

console.log(obj)   // Uncaught TypeError: undefined is not a function

let str = new Set('abc')

console.log(str)   // Set(3) {"a", "b", "c"}
由上述例子可知：Set中不存在重复的值，检测的类型不是object，是Set。
　　　　　　　　不能操作对象,会报错，
　　　　　　　　操作字符串会在内部转化成数组，再显示成Set结构。

可以利用Set的特性，可以对数组进行去重。

let arr = new Set([1,2,3,4,5,4,4,4,4])

console.log([...arr])   // [1, 2, 3, 4, 5]

console.log(Array.from(arr))   // [1, 2, 3, 4, 5]
向 Set 加入值的时候，不会发生类型转换,Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”,和===相似，但不同的是NaN用Set之后相同 
console.log(new Set([1,2,3,4,'4','3']))  // [1, 2, 3, 4, '4', '3']

let set = new Set();

set.add(NaN);

set.add(NaN);

console.log(set)   // Set {NaN}

Set属性 -- size

来判断Set结构里的数量 
let set = new Set([1,2,3,4])

console.log(set.size)   //

Set实例的方法

add(value) 添加某个值，返回 Set 结构本身
let a = new Set()

a.add(2)

console.log(a)   // Set(1) {2}

a.add(3)

a.add(2)

console.log(a.add(2))  // Set(2) {2, 3}

console.log(a)  // Set(2) {2, 3}

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

let a = new Set([1,2,3])

console.log(a.delete(2))  // true

console.log(a.delete(5))  // false

console.log(a)   // {1, 3}

has(value)：返回一个布尔值，表示该值是否为Set的成员。

let a = new Set([1,2,3])

console.log(a.has(1))   // true

console.log(a.has(4))   // false

clear()：清除所有成员，没有返回值。

let a = new Set([1,2,3,4])

console.log(a.clear())   // undefined

a.clear()

console.log(a)   // Set(0) {}

关于遍历操作，对象的遍历操作也适用于Set，

　　keys()：返回键名的遍历器
　　values()：返回键值的遍历器
　　ps: 由于Set结构没有键名键值之说，所以键名和键值的运算算同一个。
　　entries()：返回键值对的遍历器
　　forEach()：使用回调函数遍历每个成员
let set = new Set(['a', 'b', 'c'])

for( let i of set.keys()) {

    console.log(i)    // a    b    c

}

for( let i of set.entries()) {

    console.log(i)    // ["a", "a"]     ["b", "b"]    ["c", "c"]

}

集合--WeakSet 

也是一个数据结构，成员是唯一的，没有重复的。Set成员不能是对象，否则会报错，所以WeakSet就是为了操作成员对象形式的结构。
WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中,所以WeakSet不可遍历。
因此，WeakSet 适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在 WeakSet 里面的引用就会自动消失

和set一样，是个构造函数，用new来创建。和Set不同的是：因为不可遍历，所以没有size属性

const ws = new WeakSet();

console.log(ws)   // WeakSet {}

let ws = new WeakSet([[1,2,3,4],[5,6]])

console.log(ws)   // WeakSet {Array(2), Array(4)}

WeakSet方法：

add(value) 向 WeakSet 实例添加一个新成员
let ws = new WeakSet();

ws.add({})

console.log(ws)    // WeakSet {{…}}
delete(value) 清除 WeakSet 实例的指定成员。
let ws = new WeakSet();

let obj = {}

ws.add(obj)

ws.delete(obj)

console.log(ws)    // WeakSet {}
has(value) 返回一个布尔值，表示某个值是否在 WeakSet 实例之中。 
let ws = new WeakSet();

let obj = {}

let obj1 = {}

ws.add(obj)

console.log(ws.has(obj))    // true

console.log(ws.has(obj1))    // false

集合--Map

在js中对象是以键值对呈现的，但是键名必须是字符串，而不能是对象，数组，dom元素等等，为了解决这此困扰，es6引入了Map数据解构。
let map = new Map()

console.log(map)   // Map(0) {}
Map 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 
const map = new Map([

   ['name', 'peter'],

   ['age', '25']

]);

console.log(map)    // Map(2) {"name" => "peter", "age" => "25"}

Map属性：

size 能够返回Map成员的数量

const map = new Map([

    ['name', 'peter'],

    ['age', '25']

]);

console.log(map.size)    //

Map方法

和Set的方法一样

set(key, value) 设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

ps：set方法返回的是当前的Map对象，因此可以采用链式写法。
let map = new Map();

map.set('name','peter').set('age', 25).set({color:'red'},'key')

console.log(map)   // Map(3) {"name" => "peter", "age" => 25, {…} => "key"}
ps: 如果对同一个键多次赋值，后面的值将覆盖前面的值。
let map = new Map();

map.set('name','peter').set('name', 25).set('name','key')

console.log(map)   // Map(1) {"name" => "key"}
ps: 如果对同一个键名是个对象形式,则代表不一样的值。
let map = new Map();

map.set({name:'peter'}, 1).set({name:'Peter'}, 2)

console.log(map)   //Map(2) {{…} => 1, {…} => 2}

get(key) 读取key对应的键值，如果找不到key，返回undefined。

let map = new Map()

map.set('name','peter')

console.log(map.get('name'))    // peter

console.log(map.get('age'))     // undefined

has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中

let map = new Map()

map.set('name','peter')

console.log(map.has('name'))     // peter

console.log(map.has('age'))      // false

delete(key) 删除某个键，返回true。如果删除失败，返回false

let map = new Map()

map.set('name','peter')

console.log(map)    // Map(1) {"name" => "peter"}

console.log(map.delete('name'))     // peter

console.log(map.delete('age'))      // false

console.log(map)    // Map(0) {}

clear() 清除所有成员，没有返回值。

let map = new Map()

map.set('name','peter')

console.log(map)    // Map(1) {"name" => "peter"}

console.log(map.clear())

console.log(map)    // Map(0) {}

关于遍历操作，对象的遍历操作也适用于Map

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

集合--WeakMap

功能和Map一样，区别是WeakMap只能接受对象为键名，不接受其他类型的。
也和WeakSet一样，是弱类型对象，WeakMap集合中的键名必须是一个对象，如果使用非对象键名会报错；集合中保存的是这些对象的弱引用，如果在弱引用之外不存在其他的强引用，引擎的垃圾回收机制会自动回收这个对象，同时也会移除WeakMap集合中的键值对。但是只有集合的键名遵从这个规则，键名对应的值如果是一个对象，则保存的是对象的强引用，不会触发垃圾回收机制
WeakMap集合最大的用途是保存Web页面中的DOM元素，例如，一些为Web页面打造的JS库，会通过自定义的对象保存每一个引用的DOM元素

方法：

has() 检测给定的键在集合中是否存在；
get() 获取给定的键值
delete()可移除指定的键值对
不支持clear() 
let key1 = {},

    key2 = {},

    map = new WeakMap([[key1, "Hello"], [key2, 42]]);

console.log(map.has(key1)); // true

console.log(map.get(key1)); // "Hello"

console.log(map.has(key2)); // true

console.log(map.get(key2)); //

console.log(map.delete(key2))  // true

console.log(map)   // WeakMap {{…} => "Hello"}

对应的笔记和实例，我放到了GitHub，https://github.com/sqh17/notes

有什么问题请私信或留下评论，一起加油。

参考资料：
阮一峰大大的es6标准入门：http://es6.ruanyifeng.com

相关文章