2025-01-03 日报 Day55

2025-01-03 日报 Day55

Yuyang 前端小白🥬

今日的鸡汤

往后时光,愿你能扛事、懂翻篇,有静下来的力量,也有向内看的能力。

今日学习内容

1、JS红皮书P173-175 第六章:集合引用类型

今日笔记

1、ECMAScript 6 新增的 Set 是一种新集合类型,为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map,这是因为它们的大多数 API 和行为都是共有的。
基本API:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 使用 new 关键字和 Set 构造函数可以创建一个空集合:
const m = new Set();
// 如果想在创建的同时初始化实例,可以给 Set 构造函数传入一个可迭代对象,需要包含值数组。可迭代对象中的每个值都会按照迭代顺序插入到新集合实例中:
const s1 = new Set(["val1", "val2", "val3"]);
alert(s1.size); // 3
// 使用自定义迭代器初始化集合
const s2 = new Set({
[Symbol.iterator]: function*() {
yield "val1";
yield "val2";
yield "val3";
}
});
alert(s2.size); // 3

初始化之后,可以使用 add()方法添加值。另外,可以使用 has()进行查询,可以通过 size 属性获取集合中的值的数量,还可以使用 delete()和 clear()删除值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const s = new Set(); 
alert(s.has("Matt")); // false
alert(s.size); // 0
s.add("Matt")
.add("Frisbie");
alert(s.has("Matt")); // true
alert(s.size); // 2
s.delete("Matt");
alert(s.has("Matt")); // false
alert(s.has("Frisbie")); // true
alert(s.size); // 1
s.clear(); // 销毁集合实例中的所有值
alert(s.has("Matt")); // false
alert(s.has("Frisbie")); // false
alert(s.size); // 0

与 Map 类似,Set 可以包含任何 JavaScript 数据类型作为值。集合也使用 SameValueZero 操作(ECMAScript 内部定义,无法在语言中使用),基本上相当于使用严格对象相等的标准来检查值的匹配性。

1
2
3
4
5
6
7
8
9
10
11
12
const s = new Set(); 
const functionVal = function() {};
const symbolVal = Symbol();
const objectVal = new Object();
s.add(functionVal);
s.add(symbolVal);
s.add(objectVal);
alert(s.has(functionVal)); // true
alert(s.has(symbolVal)); // true
alert(s.has(objectVal)); // true
// SameValueZero 检查意味着独立的实例不会冲突
alert(s.has(function() {})); // false

与严格相等一样,用作值的对象和其他“集合”类型在自己的内容或属性被修改时也不会改变:

1
2
3
4
5
6
7
8
9
const s = new Set(); 
const objVal = {},
arrVal = [];
s.add(objVal);
s.add(arrVal);
objVal.bar = "bar";
arrVal.push("bar");
alert(s.has(objVal)); // true
alert(s.has(arrVal)); // true

add()和 delete()操作是幂等的。delete()返回一个布尔值,表示集合中是否存在要删除的值:

1
2
3
4
5
6
7
8
9
const s = new Set(); 
s.add('foo');
alert(s.size); // 1
s.add('foo');
alert(s.size); // 1
// 集合里有这个值
alert(s.delete('foo')); // true
// 集合里没有这个值
alert(s.delete('foo')); // false

Set 会维护值插入时的顺序,因此支持按顺序迭代。集合实例可以提供一个迭代器(Iterator),能以插入顺序生成集合内容。可以通过 values()方法及其别名方法 keys()(或者 Symbol.iterator 属性,它引用 values())取得这个迭代器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const s = new Set(["val1", "val2", "val3"]); 
alert(s.values === s[Symbol.iterator]); // true
alert(s.keys === s[Symbol.iterator]); // true
for (let value of s.values()) {
alert(value);
}
// val1
// val2
// val3
for (let value of s[Symbol.iterator]()) {
alert(value);
}
// val1
// val2
// val3

因为 values()是默认迭代器,所以可以直接对集合实例使用扩展操作,把集合转换为数组:

1
2
3
const s = new Set(["val1", "val2", "val3"]);
const arr = [...s];
alert(arr); // ["val1", "val2", "val3"]

集合的 entries()方法返回一个迭代器,可以按照插入顺序产生包含两个元素的数组,这两个元素是集合中每个值的重复出现:

1
2
3
4
5
6
7
const s = new Set(["val1", "val2", "val3"]); 
for (let pair of s.entries()) {
console.log(pair);
}
// ["val1", "val1"]
// ["val2", "val2"]
// ["val3", "val3"]

如果不使用迭代器,而是使用回调方式,则可以调用集合的 forEach()方法并传入回调,依次迭代每个键/值对。传入的回调接收可选的第二个参数,这个参数用于重写回调内部 this 的值:

1
2
3
4
5
const s = new Set(["val1", "val2", "val3"]); 
s.forEach((val, dupVal) => alert(`${val} -> ${dupVal}`));
// val1 -> val1
// val2 -> val2
// val3 -> val3

修改集合中值的属性不会影响其作为集合值的身份:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const s1 = new Set(["val1"]); 
// 字符串原始值作为值不会被修改
for (let value of s1.values()) {
value = "newVal";
alert(value); // newVal
alert(s1.has("val1")); // true
}
const valObj = {id: 1};
const s2 = new Set([valObj]);
// 修改值对象的属性,但对象仍然存在于集合中
for (let value of s2.values()) {
value.id = "newVal";
alert(value); // {id: "newVal"}
alert(s2.has(valObj)); // true
}
alert(valObj); // {id: "newVal"}
此页目录
2025-01-03 日报 Day55