【Javascript】集合与映射

最新推荐文章于 2024-01-02 15:50:48 发布

不要香菜葱花

最新推荐文章于 2024-01-02 15:50:48 发布

阅读量979

点赞数 1

分类专栏：学习总结文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/dhhka/article/details/121385373

版权

学习总结专栏收录该内容

21 篇文章 0 订阅

订阅专栏

`Map`

JavaScript对象，本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

特殊情况

如果使用对象或数组作为键，那么其他的对象或数组即使与其有完全相同的属性或元素，他们也是不同的。原因是表面上是同一个键，但实际的内存地址不同。

m.set([],1).set([],2)
console.log (m.size)    // 2
console.log (m.get([])) // undefined

m.set(m,undefined)  // 把映射自身映射到值undefined中
console.log (m.has(m))  // true
console.log (m.get(m))  // undefined

接受数组作为参数

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

map.size // 2
map.has('name') // true
map.get('name') // "张三"

事实上，不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数。这就是说，Set 和 Map 都可以用来生成新的 Map。

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

迭代

let m = new Map();
m.set("one", 1).set("two", 2).set("three", 3)

// for...of
for (let [key, value] of m) {
    console.log(key);   // one two three
    console.log(value); // 1 2 3
    console.log([key, value]);
}

console.log([...m.keys()])  // 'one', 'two', 'three'
console.log([...m.values()])    // 1, 2, 3
console.log([...m.entries()])   // ['one', 1] ['two', 2] ['three', 3]
console.log([...m]) // 同上

m.forEach((value,key)=>{
    console.log(value,key)
}) // 同上

// forEach方法还可以接受第二个参数，用来绑定this
const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

类型转换

`Map` 转为对象

let obj = Object.create(null);
for(let[k,v] of m){
    obj[k] = v
}
console.log(obj)

对象转为 `Map`

let obj = {"a":1,"b":2}
let map = new Map(Object.entries(obj))
console.log(map)

`Set`

Set类似于数组，但是成员的值都是唯一的，没有重复的值。
因此可以利用Set 做到数组去重以及字符串去重

[...new Set(array)]
[...new Set('ababbc')].join('')

Set内部判断两个值是否相同类似与 ===，主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。

迭代

类似于 Map 有四种遍历方法可以使用

Set.prototype.keys()
Set.prototype.values()
Set.prototype.entries()
Set.prototype.forEach()

类型转换

`Set` 转换为数组

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

应用

将Set 转换为数组后使用 map 和 filter 方法,方便的实现交并差集

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

// 并集
let union = new Set([...a, ...b]);
console.log(union)  // Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect)  // Set {2, 3}

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference) // Set {1}

`WeakMap`(弱映射)

常规映射对自己的键值保持着强引用，即使对他们的所有其他引用都不在了，仍然可以通过映射访问这些键。相对而言，WeakMap 则是弱引用，因此无法通过 WeakMap 访问这些键。也就是说 WeakMap 的存在并不妨碍他们的键值被回收。

特点

WeakMap 的键必须是对象或数组，原始值不受垃圾收集控制，因此不能作为键
WeakMap 只实现了 get() set() has() delete() 是不可迭代对象
同样 WeakMap 也没有 size 属性，因为其大小可能随着对象被回收而随时改变

应用

WeakMap 的主要应用场景是额外数据的存储.例如，我们有用于处理用户访问计数的代码。收集到的信息被存储在 map 中：一个用户对象作为键，其访问次数为值。当一个用户离开时（该用户对象将被垃圾回收机制回收），这时我们就不再需要他的访问次数了。
另外一个普遍的例子是缓存：当一个函数的结果需要被记住，这样在后续的对同一个对象的调用时，就可以重用这个被缓存的结果。使用 WeakMap 的好处是当对象被垃圾回收时，对应的缓存的结果也会被自动地从内存中清除。

// 📁 cache.js
let cache = new WeakMap();

// 计算并记结果
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* calculate the result for */ obj;

    cache.set(obj, result);
  }

  return cache.get(obj);
}

// 📁 main.js
let obj = {/* some object */};

let result1 = process(obj);
let result2 = process(obj);

// ……稍后，我们不再需要这个对象时：
obj = null;

// 无法获取 cache.size，因为它是一个 WeakMap，
// 要么是 0，或即将变为 0
// 当 obj 被垃圾回收，缓存的数据也会被清除