什么是Set
Set 是一系列无序、没有重复值的数据集合
Set 实例的方法和属性
1.方法
- add()
- has()
- delete()
- clear()
- forEach()
2.属性
- size
Set构造函数的参数
- 数组
const s = new Set([1, 2, 1]);
console.log(s);
- 字符串、arguments、Nodelist、Set等
console.log(new Set("hello"));
function fun() {
console.log(new Set(arguments));
}
fun(1, 2, 3, 4);
console.log(new Set(document.querySelectorAll("p")));
const s = new Set([1, 2, 1]);
console.log(new Set(s));
console.log(s);
Set的注意事项
1.判断重复的方式
Set对重复值的判断基本遵循严格相等 (===)
但是对于NaN的判断与 === 不同，Set中 NaN 等于 NaN
console.log(1 === 1);
console.log(NaN === NaN);
const s = new Set([NaN, 1, NaN]);
console.log(s);
const s = new Set();
s.add({}).add({});
console.log({} === {});
console.log(s);
2.什么时候使用Set
① 数组或字符串去重时
const arr = [1, 1, 2, 3, 4, 4, 5];
const s = new Set(arr);
const str = "aaabbbbccccddd";
const s = new Set(str);
console.log(s);
② 不需要通过下标访问，只需要遍历时
③ 为了使用 Set 提供的方法和属性时(add delete clear has forEach size等)
Set的应用
1.数组去重
const s = new Set([1, 2, 1]);
console.log(s);
const result = [];
2.字符串去重
const s = new Set("aaabbbcccddd");
console.log([...s].join(""));
console.log([...new Set("aaabbbcccddd")].join(""));
3.存放 DOM 元素
const s = new Set(document.querySelectorAll("p"));
s.forEach(function (ele) {
ele.style.color = "blue";
ele.style.backgroundColor = "red";
});
Map是什么
1.Map是什么
// 映射
// Map 和 对象都是键值对的集合
// 键 -> 值，key -> value
// const person = {
// name: "xiaoming",
// age: 18,
// };
// console.log(person);
// const m = new Map();
// m.set("name", "alex");
// m.set("age", 18);
// console.log(m);
2.Map和对象的区别
// 对象一般用字符串当做键
// const obj = {
// name: "alex",
// true: "true",
// [{}]: "object",
// };
// console.log(obj);
// console.log({}.toString());
const m = new Map();
m.set("name", "alex");
m.set(true, "true");
m.set({}, "object");
m.set(new Set([1, 2], "set"));
m.set(undefined, "undefined");
console.log(m);
Map实例的属性和方法
1.方法
- get
- has
- delete
- clear
- forEach
const m = new Map();
// 使用 set 添加的新成员，键如果已经存在，后添加的键值会覆盖已有的
m.set("name", "alex").set("age", 18).set("age", 20).set("gender", "man");
2.属性
- size
Map构造函数的参数
1.数组
// console.log(new Map(["name", "alex", "age", 18]));
// 只能传二维数组，而且必须体现出键和值
// console.log(
// new Map([
// ["name", "alex"],
// ["age", 18],
// ])
// );
2.Set Map 等
// Set
// set 中也必须体现出键和值
// const s = new Set([
// ["name", "alex"],
// ["age", 18],
// ]);
// console.log(new Map(s));
// Map
const m1 = new Map([
["name", "alex"],
["age", 18],
]);
const m2 = new Map(m1);
console.log(m1);
console.log(m2);
console.log(m1 === m2);
Map的注意事项
1.判断键名是否相同的方式
// 基本遵循严格相等 (===)
// 例外就是 NaN,Map中NaN也是等于NaN
// console.log(NaN === NaN);
// const m = new Map();
// m.set("NaN", 1).set("NaN", 1);
// console.log(m);
2.什么时候使用 Map
// 如果只是需要 Key -> value 的结构，或者需要字符串以外的值做键，使用Map更合适
// forEach
// size
// 只有模拟现实世界的实体时，才使用对象
// 只有模拟现实世界的实体时，才使用对象
const person = {};
Map的应用
const [p1, p2, p3] = document.querySelectorAll("p");
// const m = new Map();
// m.set("p1", "red");
// m.set("p2", "green");
// m.set("p3", "blue");
// const m = new Map([
// [
// p1,
// {
// color: "red",
// backgroundColor: "yellow",
// fontSize: "40px",
// },
// ],
// [
// p2,
// {
// color: "green",
// backgroundColor: "pink",
// fontSize: "40px",
// },
// ],
// [
// p3,
// {
// color: "blue",
// backgroundColor: "orange",
// fontSize: "40px",
// },
// ],
// ]);
// m.forEach((propObj, ele) => {
// for (let key in propObj) {
// ele.style[key] = propObj[key];
// }
// });
const m = new Map([
[
p1,
new Map([
["color", "red"],
["backgroundColor", "yellow"],
["fontSize", "40px"],
]),
],
[
p2,
new Map([
["color", "green"],
["backgroundColor", "pink"],
["fontSize", "40px"],
]),
],
[
p3,
new Map([
["color", "blue"],
["backgroundColor", "orange"],
["fontSize", "40px"],
]),
],
]);
m.forEach((propObj, ele) => {
propObj.forEach((value, key) => {
ele.style[key] = value;
});
});
iterator是什么
1.iterator的作用
// inerator:遍历器（迭代器）
// for
// [1,2].forEach
// new Set().forEach
// iterator 也是用来遍历的
2.寻找iterator
const it = [1, 2][Symbol.iterator]();
console.log(it);
3.使用 Iterator
const it = [1, 2][Symbol.iterator]();
console.log(it.next()); // {value: 1, done: false}
console.log(it.next()); // {value: 2, done: false}
console.log(it.next()); // {value: undefined, done: true}
4.什么是iterator
// Symbol.iterator(可遍历对象的生成方法) -> it(可遍历对象)-> it.next() -> it.next() -> ... (直到 done 为 true)
iterator解惑
1.为什么需要 iterator 遍历器
// 遍历数组：for 循环和 forEach 方法
// 遍历对象：for in 循环
// iterator 遍历器是一个统一的遍历方式
2.如何更方便的使用 lterator
// Symbol.iterator->it->next()
// 我们一般不会直接使用 Iterator 去遍历
// for..of
for...of的用法
1.认识 for...of
// const arr = [1, 2, 3];
// const obj = {
// name: "xiaoming",
// age: 18,
// render: "男",
// };
// const it = arr[Symbol.iterator]();
// let next = it.next();
// while (!next.done) {
// console.log(next.value);
// next = it.next();
// console.log(next);
// }
// for (let item of arr) {
// console.log(item);
// }
2.与break、continue 一起使用
const arr = [1, 2, 3];
// for (let item of arr) {
// if (item === 2) {
// continue;
// }
// console.log(item);
// }
3.在for...of中取得数组的索引
const arr = [1, 2, 3];
// keys()得到的是索引的可遍历对象，可以遍历出索引值
// for (let key of arr.keys()) {
// console.log(key);
// }
// values()得到的值的可遍历对象，可以遍历出值
// for (const value of arr.values()) {
// console.log(value);
// }
// for (let [index, value] of arr.entries()) {
// console.log(index, value);
// }
原生可遍历和非原生可遍历
1.什么是可遍历
// 只要有Symbol.iterator方法，并且这个方法可以生成可遍历对象，就是可遍历的
// 只要可遍历，就可以使用for...of循环来统一遍历
2.原生可遍历的有哪些
- 数组
- 字符串
- Set
- Map
- arguments
- NodeList
for (let item of document.querySelectorAll("p")) {
item.style.color = "red";
console.log(item);
dispa;
}
