第七章 Map

---

Map与Object区别

• Map有序，Object无序
• 涉及大量增删 || 需要低内存占用，使用Map
• 涉及大量查找，使用Object

---

对象类型只有字符串才能作为键

而Map类型无论什么类型都可以作为键

定义： let map = new Map();(构造函数创建map)

使用： arr.map(function(value,index,arr){obj},{})
第二个参数赋值的话，function里的this会指向*map函数里*的对象。

---

链式操作

let map = new Map([]);
map.set("a").set("b").set("c")

map.set("a");
map.set

---

增删改查

获取值： ~.get()
增加：~.set(key,value);
删除：~。delete(); 		删除成功返回true
	全部删除：~.clear();
查看是否存在：~.has();

---

遍历

获取键： ~.keys()
获取值： ~.values();
获取键值对: ~.entries();

---

转换

有时候我们想对数据进行处理，A为想要处理的数据，但是对此方法不能适用于A的数据类型，只能适用于B的数据类型，所以我们的方法是将A的数据类型转换为B的数据类型，进而使用我们想用的方法去操作，最后输出转换回A的数据类型。

转数组
[...map]///[...map.entries()]
单独转换键：
[...map.keys()];
单独转换值：
[...map,values()];
注：以上均为数组

---

Map优势

获取元素属性:
~.getAttribute("")

使用Map类型进行操作：
	可以根原有属性隔离开来，不对原有属性进行破坏

---

表单提交

HTML部分
<form action="https://www.bing.com" onsubmit="post()">
        接受协议
        <input type="checkbox" name="first_input" error="Please accept the protocol">
        学生
        <input type="checkbox" name="second_input" error="Only open for students">yep
        <input type="submit">
    </form>


js部分
function post() {
            let map = new Map();
            let inputs = document.querySelectorAll("[error]");
            inputs.forEach(item => {
                map.set(item, {
                    error: item.getAttribute('error'),
                    status: item.checked
                })
            })
            // console.log(map)
            return [...map].every(([element, config]) => {
                config.status || alert(config.error);
                return config.status;
            })
            return false;
        }

---

WeakMap

用于课程表等保存受外部影响的数据

与set的WeakSet相似，WeakMap类型不支持字符串添加。
键必须为对象

弱引用类型，语法较少

.set()
.delete()
.has()

特性：
使用引用类型不增加计时器，即不触发垃圾回收机制
数据不准确，所以用不了类似与keys,values等方法

只是有大括号，没有值。

---

箭头函数

箭头函数不被this所搜索。

---

WeakMap课程表

//html部分
<ul>
        <li><span>www.bing.com</span><a href="#">+</a></li>
        <li><span>www.bilibili.com</span><a href="#">+</a></li>
        <li><span>www.houdunren.com</span><a href="#">+</a></li>
    </ul>

    <ul>
        <p id="ct">共选了2门课程</p>
        <p id="lists"></p>
    </ul>
//css部分
body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .remove {
            background-color: gray;
        }

        ul {
            list-style: none;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #5fa2c5;

        }

        li {
            padding-top: 20px;
            padding-left: 20px;
            margin: 20px;
            width: 220px;
            height: 40px;
            border: 3px solid #5fa2c5;
        }

        ul>li>a {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgb(119, 250, 186);
            right: 30px;
            border-radius: 50%;
        }

        span {
            background: #5fa2c5;
            border-radius: 20%;
            margin-left: 20px;
        }
//js部分
class Lesson {
            constructor() {
                this.lis = document.querySelectorAll("li");
                this.countElement = document.getElementById("ct");
                this.listsElement = document.getElementById("lists");
                this.map = new WeakMap();
            }
            run() {
                this.lis.forEach(li => {
                    li.querySelector("a").addEventListener('click', (event) => {
                        // console.log(event.target.parentElement)
                        const a = event.target;
                        // console.log(a)

                        const state = li.getAttribute("select");
                        if (state) {
                            li.removeAttribute('select');
                            this.map.delete(li);
                            a.innerHTMl = '+';
                            a.style.backgroundColor = "green";
                        }
                        else {
                            this.map.set(li);
                            li.setAttribute('select', true);
                            a.innerHTMl = '-';
                            a.style.backgroundColor = 'red';
                        }
                        this.render();
                    })
                })
            }
            render() {
                this.countElement.innerHTML = `共选了${this.count()}门课程`;
                this.listsElement.innerHTML = this.lists();
            }
            lists() {
                return [...this.lis].filter(li => {
                    return this.map.has(li);
                })
                    .map(li => {
                        return `<span>${li.querySelector('span').innerHTML}</span>`
                    })
                    .join('');
                console.log(lis)
            }
            count() {
                return [...this.lis].reduce((count, lis) => {
                    return count += (this.map.has(lis) ? 1 : 0);
                }, 0)
            }
        }
        new Lesson().run()

---