Set&Map

Set

是一系列无序的、无重复值的数据集合
无序的：没有下标索引
数组是一系列有序的数据集合

const s = new Set([1, 2, 1]);
console.log(new Set(s));//Set(2) {1, 2}

应用-复制数组

const s = new Set([1, 2, 1]);
console.log(new Set(s) === s);//false

方法

添加add()一个个加

查找has()-存在否

删除delete()一个个删

不存在的，不提示不报错

清除clear()

遍历forEach()

按照成员添加的顺序遍历

const s = new Set();
// add可连续加入
//无重复值：只传入一个2
s.add(1).add(2).add(2);
console.log(s);//[1,2]
s.forEach(function (value, key, set) {
    //Set中，value=key
    //Set中，key无含义，为和map参数格式一致
    console.log(value, key, set);
        //两次输出
        //1,1,[1,2]
        //2,2,[1,2]
    console.log(set === s);//true
    console.log(this);//#document
//设置this指向
}, document);
console.log(s.size);//2

属性-size成员个数

值

包含JS任意数据类型
例：
1.数组

const s = new Set([1, 2, 1]);
console.log(s);//[1,2]

2.字符串

console.log(new Set('hi'));//{'h','i'}

3.类数组
1）arguments

function func() {
    console.log(new Set(arguments));//{1,2}
};
func(1, 2, 1);

2）NodeList

<p>我</p>
<p>在</p>
<p>哪</p>
console.log(new Set(document.querySelectorAll('p')));
//Set(3) {p, p, p}

Set中NaN自等

会被判定重复
一般地，NaN不自等

const b = new Set([NaN, 2, NaN]);
console.log(b);//Set(2) {NaN, 2}

何时用Set

1.数组、字符串去重
2不访问下标，只需遍历时
3.使用Set特有的方法/属性时

应用-数组去重

利用Set无重复值的特点

console.log([...new Set([1, 2, 1])]);

应用-字符串去重

先实例化，再转为数组，join()转为字符串

 console.log([...new Set(['abbacbd'])].join(''));

应用-遍历Dom元素，无需访问下标时

<p>我</p>
<p>在</p>
<p>哪</p>
<script>
    const s = new Set(document.querySelectorAll('p'));
    s.forEach(function (elem) {
        elem.style.color = 'red';
        elem.style.background = 'blue';
    });
</script>

Map

只能用构造函数实例化进行初始化，不能用字面量初始化
和对象的关系：
Map和对象，都是键值对的集合；
Map键可是基本数据类型也可是引用数据类型

const m = new Map();
m.set('name', 'alex');
m.set(true, 'true');
m.set({}, 'object');
m.set(new Set([1, 2]), 'set');
console.log(m);
//Map(4) {'name' => 'alex', true => 'true', {…} => 'object', Set(2) => 'set'}

对象的键本质是字符串

const obj = {
   name: 'alex',
   true: 'true',
//方括号表示法，{}是非法标识符，不带[]报错
   [{}]: 'object'
};
console.log(obj);//{name: 'alex', true: 'true', [object Object]: 'object'}
console.log({}.toString());//[object Object]

方法

添加set()

若该键已存在，后添加的键值对会覆盖原有的

  const m = new Map();
    m.set('age', 18).set(true, 'true').set('age', 20);
    console.log(m);
    //Map(2) {'age' => 20, true => 'true'}

获取get()

若该键不存在，返回undefined

console.log(m.get('age'));//20
console.log(m.get('true'));//undefined
console.log(m.get(true));//true

查找has()-存在否

删除delete()-一个一个删

不存在的，不提示不报错

遍历forEach()

三参数：值，键，实例化对象

const m = new Map();
m.set('age', 18).set(true, 'true').set('age', 20);
m.forEach(function (value, key, map) {  
    console.log(value, key, map);
    console.log(this);
    //指定this
}, document);

属性-成员个数size

对象没有类似属性

值

包含JS任意数据类型
例:
1.数组
一维不可
二维可，二维能体现键和值

//报错
    console.log(new Map(['name', 'alex', 'age', 18]));
    //正确
    console.log(new Map([
        ['name', 'alex'],
        ['age', 18]
    ])
    );

2.Set实例

const s = new Set([
    ['name', 'alex'],
    ['age', 18]
]);
console.log(new Map(s));

3.Map实例

const m = new Map([
    ['name', 'alex'],
    ['age', 18]
]);

console.log(new Map(m));
// 实现了Map实例m的复制
console.log(new Map(m) === m);//false

Map中NaN自等

会被判定重复
一般地，NaN不自等

const m = new Map();
m.set(NaN, 1).set(NaN, 2);
console.log(m);//Map(1) {NaN => 2}

何时用Map

1）只需要键值对的解构
2）需要字符串以外的值作键
3）需要使用Map特有的方法、属性时
4用对象：模拟现实世界实体时

<p>1</p>
<p>2</p>
<p>3</p>

应用-批量改p元素内容的颜色

<script>
    // 获取元素
    const [p1, p2, p3] = document.querySelectorAll('p');
    const m = new Map([
        [p1, 'red'],
        [p2, 'green'],
        [p3, 'pink']
    ]);
    m.forEach(function (color, elem) {
        elem.style.color = color;
    });  
</script>     

应用-批量改p元素内容&背景色的颜色

<script>
    // 获取元素
    const [p1, p2, p3] = document.querySelectorAll('p');    
	const m = new Map([
	        [p1, {
	            color: 'red',
	            backgroundColor: 'blue'
	        }],
	        [p2, {
	            color: 'green',
	            backgroundColor: 'yellow'
	        }],
	        [p3, {
	            color: 'pink',
	            backgroundColor: 'purple'
	        }]
	    ]);
	   m.forEach(function (propObj, elem) {
       console.log(propObj, elem);
       for (const k in propObj) {
           console.log(propObj[k]);
           // 方括号表示法
           elem.style[k] = propObj[k];
        });
</script>