Set

Set是什么

  1.       // 1.什么是 Set
  2.       // 集合
  4.       // [1, 2];
  5.       // 数组是一系列有序的数据集合
  7.       // Set 是一系列无序、没有重复值的数据集合
  9.       // 2.理解 Set
  10.       // console.log([1, 2, 1]);
  11.       // console.log(new Array(1, 2, 1));
  13.       const s = new Set();
  14.       s.add(1);
  15.       s.add(2);
  17.       // // Set 中不能有重复的成员
  18.       s.add(1);
  19.       console.log(s);
  21.       // Set 没有下标去标示每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员

Set实例的方法和属性

  1.       // 1.方法
  2.       // add
  3.       const s = new Set();
  4.       s.add(1).add(2).add(2);
  5.       // console.log(s);
  7.       // has
  8.       // console.log(s.has(1));
  9.       // console.log(s.has(3));
  11.       // delete
  12.       // s.delete(1);
  14.       // // 使用 delete 删除不存在的成员，什么都不会发生，也不会报错
  15.       // s.delete(3);
  16.       // console.log(s);
  18.       // clear
  19.       // s.clear();
  20.       // console.log(s);
  22.       // forEach
  23.       // s.forEach(function (value, key, set) {
  24.       //   // Set 中 value = key
  25.       //   // console.log(value, key, set === s);
  26.       //   // console.log(this);
  27.       // }, document);
  28.       // console.log(s);
  30.       // 按照成员添加进集合的顺序遍历
  32.       // 2.属性
  33.       // size
  34.       console.log(s.size);
  35.       console.log(s);

Set构造函数的参数

  1.       // 1.数组
  2.       // const s = new Set([1, 2, 1]);
  3.       // console.log(s);
  5.       // 2.字符串、arguments、NodeList、Set 等
  6.       // console.log(new Set('hi'));
  7.       // function func() {
  8.       //   console.log(new Set(arguments));
  9.       // }
  10.       // func(1, 2, 1);
  11.       console.log(new Set(document.querySelectorAll('p')));
  13.       const s = new Set([1, 2, 1]);
  14.       console.log(new Set(s) === s);
  15.       console.log(s);

Set的注意事项

  1.       // 1.判断重复的方式
  2.       // const s = new Set([1, 2, 1]);
  3.       // const s = new Set([NaN, 2, NaN]);
  5.       // console.log(1 === 1);
  6.       // console.log(NaN === NaN);
  8.       // Set 对重复值的判断基本遵循严格相等（===）
  9.       // 但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN
  10.       // console.log(s);
  12.       // const s = new Set();
  13.       // s.add({}).add({});
  14.       // console.log({} === {});
  15.       // console.log(s);
  17.       // 2.什么时候使用 Set
  18.       // ① 数组或字符串去重时
  19.       // ② 不需要通过下标访问，只需要遍历时
  20.       // ③ 为了使用 Set 提供的方法和属性时（add delete clear has forEach size 等）

Set的应用

  1.       // 1.数组去重
  2.       // [1, 2, 1];
  3.       // const s = new Set([1, 2, 1]);
  4.       // console.log(s);
  5.       // s.forEach
  7.       // console.log(...s);
  8.       // console.log([...s]);
  9.       // console.log([...new Set([1, 2, 1])]);
  11.       // 2.字符串去重
  12.       // 'abbacbd';
  13.       // const s = new Set('abbacbd');
  14.       // console.log([...s].join(''));
  15.       // console.log(s);
  17.       // console.log([...new Set('abbacbd')].join(''));
  19.       // 3.存放 DOM 元素
  20.       // console.log(document.querySelectorAll('p'));
  21.       // for()
  22.       const s = new Set(document.querySelectorAll('p'));
  23.       console.log(s);
  24.       s.forEach(function (elem) {
  25.         // console.log(elem);
  26.         elem.style.color = 'red';
  27.         elem.style.backgroundColor = 'yellow';
  28.       });

Map

Map是什么

  1.       // 1.认识 Map
  2.       // 映射
  4.       // Map 和对象都是键值对的集合
  6.       // 键->值，key->value
  7.       // const person = {
  8.       //   name: 'alex',
  9.       //   age: 18
  10.       // };
  12.       // const m = new Map();
  13.       // m.set('name', 'alex');
  14.       // m.set('age', 18);
  15.       // console.log(m);
  17.       // 2.Map 和对象的区别
  18.       // 对象一般用字符串当作键
  19.       // const obj = {
  20.       //   name: 'alex',
  21.       //   true: 'true',
  22.       //   [{}]: 'object'
  23.       // };
  24.       // console.log(obj);
  25.       // console.log({}.toString());
  27.       // 基本数据类型：数字、字符串、布尔值、undefined、null
  28.       // 引用数据类型：对象（[]、{}、函数、Set、Map 等）
  29.       // 以上都可以作为 Map 的键
  30.       const m = new Map();
  31.       m.set('name', 'alex');
  32.       m.set(true, 'true');
  33.       m.set({}, 'object');
  34.       m.set(new Set([1, 2]), 'set');
  35.       m.set(undefined, 'undefined');
  36.       console.log(m);

Map实例的属性和方法

  1.       // 1.方法
  2.       // set
  3.       const m = new Map();
  5.       // 使用 set 添加的新成员，键如果已经存在，后添加的键值对覆盖已有的
  6.       m.set('age', 18).set(true, 'true').set('age', 20);
  7.       // console.log(m);
  9.       // set get
  10.       // add
  12.       // get
  13.       // console.log(m);
  14.       // console.log(m.get('age'));
  15.       // // get 获取不存在的成员，返回 undefined
  16.       // console.log(m.get('true'));
  17.       // console.log(m.get(true));
  19.       // has
  20.       // console.log(m.has('age'));
  21.       // console.log(m.has('true'));
  23.       // delete
  24.       // m.delete('age');
  25.       // m.delete('name');
  27.       // // 使用 delete 删除不存在的成员，什么都不会发生，也不会报错
  28.       // console.log(m);
  30.       // clear
  31.       // m.clear();
  32.       // console.log(m);
  34.       // forEach
  35.       // m.forEach(function (value, key, map) {
  36.       //   // console.log(value, key, map === m);
  37.       //   console.log(this);
  38.       // }, document);
  40.       // 2.属性
  41.       // size
  42.       // 对象没有类似的属性
  43.       console.log(m.size);

Map构造函数的参数

  1.       // 1.数组
  2.       // console.log(new Map(['name', 'alex', 'age', 18]));
  3.       // 只能传二维数组，而且必须体现出键和值
  5.       // console.log(
  6.       //   new Map([
  7.       //     ['name', 'alex'],
  8.       //     ['age', 18]
  9.       //   ])
  10.       // );
  12.       // 2.Set、Map 等
  13.       // Set
  14.       // Set 中也必须体现出键和值
  15.       const s = new Set([
  16.         ['name', 'alex'],
  17.         ['age', 18]
  18.       ]);
  19.       console.log(new Map(s));
  20.       console.log(s);
  22.       // Map
  23.       // 复制了一个新的 Map
  24.       const m1 = new Map([
  25.         ['name', 'alex'],
  26.         ['age', 18]
  27.       ]);
  28.       console.log(m1);
  29.       const m2 = new Map(m1);
  30.       console.log(m2, m2 === m1);

Map的注意事项

  1.       // 1.判断键名是否相同的方式
  2.       // 基本遵循严格相等（===）
  3.       // 例外就是 NaN，Map 中 NaN 也是等于 NaN
  4.       console.log(NaN === NaN);
  5.       const m = new Map();
  6.       m.set(NaN, 1).set(NaN, 2);
  7.       console.log(m);
  9.       // 2.什么时候使用 Map
  10.       // 如果只是需要 key -> value 的结构，或者需要字符串以外的值做键，使用 Map 更合适
  11.       // forEach for in
  12.       // size
  14.       // 只有模拟现实世界的实体时，才使用对象
  15.       const person = {};

Map的应用

  1.       const [p1, p2, p3] = document.querySelectorAll('p');
  2.       // console.log(p1, p2, p3);
  3.       // const m = new Map();
  4.       // m.set(p1, 'red');
  5.       // m.set(p2, 'green');
  6.       // m.set(p3, 'blue');
  8.       const m = new Map([
  9.         [
  10.           p1,
  11.           {
  12.             color: 'red',
  13.             backgroundColor: 'yellow',
  14.             fontSize: '40px'
  15.           }
  16.         ],
  17.         [
  18.           p2,
  19.           {
  20.             color: 'green',
  21.             backgroundColor: 'pink',
  22.             fontSize: '40px'
  23.           }
  24.         ],
  25.         [
  26.           p3,
  27.           {
  28.             color: 'blue',
  29.             backgroundColor: 'orange',
  30.             fontSize: '40px'
  31.           }
  32.         ]
  33.       ]);
  35.       m.forEach((propObj, elem) => {
  36.         for (const p in propObj) {
  37.           elem.style[p] = propObj[p];
  38.         }
  39.       });
  41.       // m.forEach((color, elem) => {
  42.       //   elem.style.color = color;
  43.       // });
  44.       console.log(m);