sqh17

在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)   // 4

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)    // 2

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)); // 42
console.log(map.delete(key2))  // true
console.log(map)   // WeakMap {{…} => "Hello"}

 

 

 

 

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

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

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

相关文章: