ES6 键值对集合

261 阅读6分钟

「这是我参与11月更文挑战的第 6 天,活动详情查看:2021最后一次更文挑战

ES6 键值对集合

一、Set集合

Set 对象是值的集合,可以按照插入的顺序迭代它的元素。Set 集合中的元素只会出现一次,即 Set集合中的元素时唯一的。

  • NaN 和 undefined都可以被存储在 Set集合中,NaN之间被视为相同的值。

  • 对象被存储在Set 集合中时,两个对象总是不相等的。

示例代码如下:

/* ECMAScript 6提供了Set构造函数,创建Set对象
    * Set 集合 - 值(唯一的)集合
    * 应用 - 利用Set集合为数组去重
 */
const arr = [1,2,3,4,5,4];
let set1 = new Set(arr);
console.log(set1);//Set { 1, 2, 3, 4, 5 }

/*
    NaN、undefined等值允许被存储在Set集合中
     * NaN值在Set集合中被认为是相等的
*/
let set2 = new Set([NaN,NaN,undefined,undefined,null,null]);
console.log(set2);//Set { NaN, undefined, null }

/*
    Set 集合中存储复杂数据类型(数组 、对象及函数等)
    *  多个空数组和空对象表示多个值
    *  多个函数依旧也是表示多个值
*/
console.log([] === []);//false
let set3 = new Set([[],[],{},{},function(){},function(){}]);
console.log(set3);//Set { [], [], {}, {}, [Function], [Function] }

二、Set集合的属性与方法

Set 对象提供了 size 属性用于返回 Set 对象的值的个数。

Set对象的属性和方法.png

操作Set集合的方法

示例代码如下:

let set = new Set([1,2,3,4,5]);
//Set的size属性相当于数组中的length属性
console.log(set.size);//5

// add(value) - 向Set集合的结尾添加新的元素,返回值是添加新元素后的Set集合
var result = set.add(6);
console.log(set,result);

/*
delete (value) - 从Set集合删除指定元素
    value  - 表示Set集合中的元素内容(值)
    返回值 - 布尔值,true 或 false
*/
var result1 = set.delete(1);
// console.log(set,result1)/Set { 2, 3, 4, 5, 6 } true

/*
    has(value) - 判断指定Set集合中是否包含指定元素
        * value - 表示Set集合中的元素内容(值)
        * 返回值 - 布尔值,true表示包含,false表示不包含
*/
var result2 = set.has(1);
console.log(set,result2);//Set { 2, 3, 4, 5, 6 } false

// clear 清空Set集合
set.clear();
// console.log(set)/Set {}

创建Set集合

示例代码如下:

//1.使用数组将Set集合进行初始化操作
let set1 = new Set([1,2,3,4,5]);
// 2.创建空的Set集合,利用add()方法向Set集合添加元素
let  set2 = new Set();
set2.add(1);
set2.add(2);
set2.add(3);

// 支持链式操作 - add()方法调用完毕后返回添加新元素后的Set集合
let set3 = new Set().add(1).add(2).add(3);
console.log(set3);//Set { 1, 2, 3 }

遍历Set集合的方法

示例代码如下:

let set = new Set([1,2,3,4,5]);
/* values()方法 - 返回一个迭代器对象(Set Iterator)
        * 没有length属性值 - 常规的循环语句无法使用
        * 不能用for...in循环语句
        * 只能使用for ...of 进行循环
 */

var iterator = set.values();
for (var name of iterator){
    console.log(name);
}


/*
虽然Set集合具有size属性 - 表示当前Set集合中元素的个数
但是Set集合获取每一个元素内容,不能使用set[索引值]的方式
*/
/*
for (let i=0;i<set.size;i++){
    console.log(set[i]);
}*/

/*
    Set集合提供的遍历的方法
    * values() - 返回当前Set集合中所有的迭代器对象
        Set Iterator{1,2,3,4,5}
    * keys() - 返回当前Set集合中所有键的迭代器对象
        Set Iterator{1,2,3,4,5}
    * entries() - 返回的当前Set集合中所有键值的迭代器对象
        [Set Entries] { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ] }
*/
console.log(set.entries());


/*
     Set集合提供forEach()方法
     * 作用 - 用于遍历当前的Set集合(为Set集合中每个元素调用callback函数)
     * 回调函数
        function(value,key,set){}
        * value - 表示当前Set集合中每一个值
        * key - 表示当前Set集合中每一个键
        * set - 表示当前遍历的Set集合
*/
set.forEach(function(value,key,set){
    console.log(value,key,set);
});

三 、Set集合与Array对比

一般情况下,在 javascript 中使用数组来存储一组元素,而新的集合对象有这些优势:

  • 数组中用于判断元素是否存在的indexOf()函数效率低下。
  • Set 对象允许根据值删除元素,而数组中必须使用基于下标的 splice()方法。
  • 数组的 indexOf()方法无法找到NaN值。
  • Set 对象存储不重复的值,所以不需要手动处理包含重复值的情况。

四、WeakSet 集合

WeakSet 对象是一些对象值的集合,并且其中的每个对象值都只能出现一次。

WeakSet 对象与 Set 对象的区别主要有两点:

  • WeakSet 对象中只能存放对象引用,不能存放值。而 Set 对象都可以。
  • WeakSet 对象中存储的对象值都是被弱引用的。如果没有其他的变量或属性引用这个对象值,则这个对象值会被当成垃圾回收掉。正因为这样,WeakSet 对象是无法被枚举的,没有办法拿到 WeakSet 集合包含的所有元素。

WeakSet 集合的方法

WeakSet集合的方法.png

示例代码如下:

// WeakSet集合只能存储对象,存储的对象无法被枚举。
var ws = new WeakSet();

var obj1 = {};
var obj2 = {};

ws.add(obj1);
ws.add(obj2);
console.log(ws.has(obj1,obj2))//true

五、Map集合

Map 对象提供了 size 属性用于返回 Map 对象的键值对的个数。

Map 对象 提供了用于操作 Map 集合的方法和用于遍历 Map 集合的方法,如下表所示:

Map集合的属性与方法.png

示例代码如下:

// 创建Map集合 - 空集合
let map = new Map();
let num = 100,str = '迪迦',fun = function(){},obj = {};

map.set('num',num);
map.set('str',str);
map.set('fun',fun);
map.set('obj',obj);
console.log(map);

// get()获取map集合的值
console.log(map.get('str'));//迪迦

// delete()删除map集合中的键值,删除成功返回true
console.log(map.delete('num'));//true

// clear()清空map集合
/*map.clear();
console.log(map);//Map {}*/

// values()获取map集合中的值
console.log(map.values());
// keys()获取map集合中的键
console.log(map.keys());

Map 集合键的相等

Map 集合的键的比较是基于 “SameValueZero ”算法:

  • 判断使用与 === 相似的规则。
  • -0 和 +0 相等。
  • NaN 与自身相等。(与 === 有所不同)。

六、Map集合与Object对比

一般情况下,Object 会被用于将字符串类型映射到数值。Object 允许设置键值对、根据键获取值、删除键、检测某个键是否存在。尔Map 具有更多的优势:

  • Object的键均为String 类型,在 Map里键可以是任意类型。
  • 必须手动计算Object的尺寸,但是可以很容易地获取使用Map 的尺寸。
  • Map 的遍历遵循元素的插入顺序。
  • Object有原型,所以映射中有一些缺省的键。

七、WeakMap 集合

WeakMap对象也是键值对的集合。它的键必须是对象类型,值可以是任意类型。它的键被弱保持,也就是说,当其键所指对象没有其他地方引用的时候,它会被回收掉。WeakMap 提供的接口与Map相同。

与Map对象不同的是,WeakMap 的键是不可枚举的。不提供列出其键的方法。列表是否存在取决于垃圾回收器的状态,是不可预知的。

WeakMap集合的方法

WeakMap集合的方法.png