Set（集合）
特点
- 用于 数组重组 生成Set数据结构
- 类似于数组
- 成员 唯一 无序 没有重复的值
- 本身是 构造函数
- 加入值的时候不会发生类型转换 即（5和'5'不是同一个值）
- 判断值是否相等（Same-value-zero equality），类似 === （主要区别：Set认为NaN等于自·身）
let arr = [1,3,2,4,5,9,1,3,6,7,8,3,9];
arr.forEach(val => s.add(val));
s.forEach(val => {console.log(val)}); // 1 3 2 4 5 9 6 7 8
console.log(...s) // 1 3 2 4 5 9 6 7 8
console.log([...s]) // [1, 3, 2, 4, 5, 9, 6, 7, 8]
// 去重数组重复对象
let arr = [1,3,2,4,5,9,1,3,6,7,8,3,9];
console.lg([...new Set(arr)]); // [1, 3, 2, 4, 5, 9, 6, 7, 8]
// NaN等于自身
let a = NaN;
let b = NaN;
let s = new Set();
s.add(a);
s.add(b);
console.log(s); // // Set(1) {NaN}
实例属性
- constructor：构造函数
- size：元素数量
let set = new Set([1, 2, 3, 2, 1]);
console.log(set.length); // undefined
console.log(set.size); // 3
实例方法
- 操作方法
- add(val): 新增
- delete(val): 存在即删除
- has(val): 判断是否存在
- clear(): 清空
let set = new Set();
set.add(1).add(2).add(1);
set.has(1); // true
set.has(3); // false
set.delete(1);
set.has(1); // false
set.clear(); // Set(0) {}
- 遍历方法
○ Array.from方法(...)可以将Set结构转为数组
let items = new Set([1, 2, 3, 2]);
let array = Array.from(items);
console.log(array); // [1, 2, 3]
let arr = [...items];
console.log(arr); // [1, 2, 3]
○ keys(): 返回 包含 所有键 的迭代器 (SetIterator {...})
○ values(): 返回 包含 所有值 的迭代器 (SetIterator {...})
○ entries(): 返回 包含 所有键值对 的迭代器 (SetIterator {...})
let items = new Set([7, 8, 9, 2]);
console.log(items.keys()); // SetIterator {7, 8, 9, 2}
console.log(items.values()); // SetIterator {7, 8, 9, 2}
console.log(items.entries()); // SetIterator {7 => 7, 8 => 8, 9 => 9, 2 => 2}
// 可以用for of编辑迭代器
for (let item of set.keys()) {
console.log(item); // 7 8 9 2
}
○ forEach(callbackFn, thisArg): 对集合成员执行callbackFn操作，没有返回值。如果有thisArg参数，回调中的this会是这个参数。
○ 可以默认遍历，默认迭代器生成函数是values()方法
○ 可以使用map、filter方法 ([...set])
let set = new Set([1, 2, 3])
set = new Set([...set].map(item => item * 2))
console.log(set); // Set(3) {2, 4, 6}
let set2 = [...set].map(item => item * 2)
console.log(set2); // [2, 4, 6]
○ 实现数组交集intersect、并集union、差集difference
let set1 = new Set([1, 2, 3]);
let set2 = new Set([4, 3, 2, 8]);
let intersect = [...set1].filter(val => set2.has(val));
let union = [...new Set([...set1, ...set2])];
let diffrence = [...set1].filter(val => !set2.has(val));
console.log(intersect); // [2, 3]
console.log(union); // [1, 2, 3, 4, 8]
console.log(diffrence); // [1]
WeakSet
特点
- 成员都是对象、都是弱引用 (弱引用是指向地址的变量?)
- 弱引用 并不会屏蔽 垃圾回收机制的。可以被垃圾回收机制回收
- 可以用来保存 DOM 节点，不容易造成内存泄漏
- 不能被遍历的
属性
- constructor：构造函数。任一个具有Iterable接口的对象，都可以作为参数
方法
一般都是用方法设置成员
- add(val)
- has(val)
- delete(val)
- clear()
WeakSet 和 Set 区别
- WeakSet只能存储对象引用，不能存放值
- WeakSet对象中储存的对象值都是被弱引用的
- WeakSet不会屏蔽垃圾回收机制
- 对于一个对象，如果没有其他变量或者属性引用该对象，则这个对象会被垃圾回收掉（注下一点）
- 垃圾回收机制不考虑对象是否存在于WeakSet
- WeakSet中有多少元素，取决于垃圾回收机制有没有运行
- WeakSet没有办法拿到它包含的所有元素
Map（字典）
特点
- 本质：键值对的集合，类似集合
- 可以遍历
- 可以和各种数据结构转换
- 类似对象
- 键：任意值（值-值）
- 键：有序的（FIFO原则）
- 键的个数：从Map的size属性获取
- 键：不可以重复，键名冲突，会覆盖原有的值
Object （对象）
- 本质：键值对的集合
- 键只能是字符串或者Symbols（字符串-值）
- 键：无序的
const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]']; // "metadata"
// 上述是将一个DOM节点作为data的键，但是由于对象只接受字符串作为建，所以element会被转为字符串[Object HTMLElement]
方法
- size：属性，取Map长度
- set(key, value)：添加
- get(key)：获取
- has(key)：判断是否存在键key
- deelte(key)：删除key对应的数据
- clear()：将Map中所有数据删除
遍历
- for...of
- forEach
Map 与 数组之间的转换
let arr = [[1,2], [3, 4], [5, 6]];
let map = new Map(arr);
let newMap = Array.from(map);
let newMap2 = [...map];
console.log(map);
console.log(newMap);
console.log(newMap2);
WeakMap
特点
- 键值对的集合
- 键：弱引用对象（null除外）
- 值：任意
- 键名所指向的对象可以被垃圾回收，此时键名是无效的
- 不能遍历
方法
- has(key)
- get(key)
- set(key)
- delete(key)
集合 和 字典 区别
- 共同点
○ 都可以存储不重复的值 - 不同点
○ 集合：以[value, value]的形式存储元素
○ 字典：以[key, value]的形式存储元素
总结
- Set
○ 成员：唯一、无序、不重复
○ [value, value]：键值键名一直，即只有键值
○ 方法：add\delete\has\clear
○ 可以遍历 - WeakSet
○ 成员：弱引用对象
○ 可以被垃圾回收机制回收（可以存储DOM节点，不容易造成内存泄露）
○ 方法：add\delete\has\clear
○ 不能遍历 - Map
○ 本质：键值对的集合，类似集合
○ 方法：size\set\get\has\delete\clear
○ 可以遍历 - WeakMap
○ 键：弱引用对象（null除外）
○ 值：任意
○ 键名所指向的对象可以被垃圾回收（此时键名是无效的）
○ 方法：get\set\has\delete\clear
○ 不能遍历
网友评论