Map与WeakMap类型在JavaScript中的使用

转载

mob604756fb6267 2021-04-27 09:36:26

文章标签 Map WeakMap JavaScript 文章分类 JavaScript 前端开发

map类型特点与创建方法：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>


    <script>
        // 对象的键名会自动转为字符串
        // let obj = {
        //     1: 'cyy1',
        //     '1': 'cyy2'
        // };
        // console.log(obj);

        // 对象的键名是对象时，会自动转为字符串
        // 读取时也要先转为字符串再读取
        //         let obj = {
        //             name: 'cyy'
        //         };
        //         let obj2 = {
        //             obj: 'cyy2',
        //             [obj]: 'cyy3'
        //         };
        //         console.log(obj2);
        //         console.log(obj2[obj.toString()]);

        // map类型，什么都可以作为键，键名可以是任何类型
        // let map = new Map();
        // map.set('name', 'cyy');
        // map.set(function() {}, 'cyy2');
        // map.set({}, 'cyy3');
        // map.set(1, 'cyy4');
        // console.log(map);

        // 构造函数创建时加入数据        let map = new Map([
            ['name', 'cyy'],
            ['age', 18]
        ]);
        console.log(map);        // 支持链式操作        let str = 'cyy';
        let str2 = str.toUpperCase().substr(1, 2);
        console.log(str2);

        map.set('11', 11).set('22', 22);
        console.log(map);    script>body>html>

map类型增删改查操作：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>


    <script>
        let obj = {
            name: 'cyy'
        };
        let map = new Map();
        map.set(obj, 'obj');
        console.log(map.has(obj));
        console.log(map);
        console.log(map.get(obj));
        console.log(map.delete('abc'));
        console.log(map.delete(obj));
        map.clear();
        console.log(map);    script>body>html>

遍历map类型数据：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>


    <script>
        let map = new Map([
            [1, 11],
            [2, 22]
        ]);        // console.log(map.keys());
        // console.log(map.values());
        // console.log(map.entries());

        // for (let k of map.keys()) {
        //     console.log(k);
        // }
        // for (let v of map.values()) {
        //     console.log(v);
        // }
        // for (let e of map.entries()) {
        //     console.log(e);
        // }
        // for (let [k, v] of map.entries()) {
        //     console.log(`${k}--${v}`);
        // }
        map.forEach((item, key) => {
            console.log(item + '--' + key);
        })    script>body>html>

map类型转换操作：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>

    <script>
        let map = new Map([
            ['name', 'cyy'],
            ['age', '18']
        ]);        // console.log(...map);
        // console.log([...map]);
        // console.log([...map.entries()]);
        // console.log([...map.keys()]);
        // console.log([...map.values()]);

        // let arr = [...map].filter(item => item[1].includes('cyy'));        let arr = [...map].filter(item => {            return item[1].includes('cyy');
        });        // console.log(arr);        let new_map = new Map(arr);
        console.log(new_map);
        console.log(new_map.values());        // ...是展开语法        console.log(...new_map.values());    script>body>html>

map类型管理DOM节点：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>
    <div name="cyy1">cyy1div>
    <div name="cyy2">cyy2div>

    <script>
        let map = new Map();
        let divs = document.querySelectorAll('div');
        divs.forEach(item => {            // 往map中压入数据            map.set(item, {
                content: item.getAttribute('name')
            });
        });        // console.log(map);        map.forEach((config, elem) => {            // console.log(config, elem);            elem.addEventListener('click', function() {
                console.log(config.content);
            });
        })    script>body>html>

使用map类型控制网站表单提交：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>
    <form action="#" onsubmit="return post()">
        接受协议：        <input type="checkbox" name="agreement" error="请接受协议"> 我是学生：        <input type="checkbox" name="student" error="网站只对学生开放">
        <input type="submit" value="提交">
    form>

    <script>
        function post() {
            let map = new Map();
            let inputs = document.querySelectorAll('[error]');
            console.log(inputs);
            inputs.forEach(item => {
                map.set(item, {
                    error: item.getAttribute('error'),
                    status: item.checked
                });
            });            // console.log(map);
            return [...map].every(([elem, config]) => {                // 短路操作，前面为真，则不会执行后面
                // 前面会假，则执行后面                config.status || alert(config.error);                return config.status;                // console.log(config);            });

        }    script>body>html>

Map与WeakMap类型在JavaScript中的使用_JavaScript

WeakMap的语法使用：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    style>head><body>
    <div>cyydiv>
    <div>cyy2div>

    <script>
        // WeakMap的键只能是引用对象
        // let map = new WeakMap();
        // map.set('name');
        // console.log(map);

        // map.set([]);
        // console.log(map);

        // let map = new WeakMap();
        // let divs = document.querySelectorAll('div');
        // divs.forEach(item => map.set(item, item.innerHTML));
        // console.log(map);

        // WeakMap也是弱引用类型
        // let arr = [];
        // let map = new WeakMap();
        // map.set(arr, 'cyy');
        // map.delete(arr);
        // console.log(map.has(arr));
        // console.log(map);

        // 弱引用类型，values、keys、entries、迭代循环都用不了        let map = new WeakMap();        // console.log(map.keys());

        for (const iterator of map) {
            console.log(iterator);
        }    script>body>html>

WeakMap弱引用类型体验：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    style>head><body>


    <script>
        let a = { name: 'cyy' };
        let b = a;
        let map = new WeakMap();
        map.set(a, 'cuu2');
        console.log(map);
        a = null;
        b = null;
        console.log(map);
        setTimeout(function () {
            console.log(map);
        }, 1000);    script>body>html>

使用WeakMap开发选课组件：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        main {
            width: 100%;
            display: flex;
            flex: 1;
        }

        section {
            border: 2px solid #ddd;
            width: 50%;
            padding: 10px;
        }

        ul {
            list-style: none;
        }

        li {
            padding: 10px;
            border: 2px solid orange;
            margin-bottom: 5px;
            position: relative;
        }

        a {
            display: inline-block;
            position: absolute;
            right: 10px;
            width: 20px;
            height: 20px;
            background: green;
            color: white;
            text-decoration: none;
            line-height: 20px;
            text-align: center;
        }

        #list span {
            background: green;
            border-radius: 5px;
            padding: 5px;
            color: white;
            margin: 5px;
        }

        #list {
            margin-top: 20px;
        }
    style>head><body>
    <main>
        <section>
            <ul>
                <li><span>htmlspan><a href="javascript:;">＋a>li>
                <li><span>cssspan><a href="javascript:;">＋a>li>
                <li><span>jsspan><a href="javascript:;">＋a>li>
            ul>
        section>
        <section>
            <strong id="count">共选了2门课strong>
            <p id="list">
                 111 -->
            p>
        section>
    main>

    <script>
        class Lesson {            // 构造函数            constructor() {                this.lis = document.querySelectorAll('li');                this.countElem = document.getElementById('count');                this.listElem = document.getElementById('list');                // console.log(this.lis, this.countElem, this.listElem);
                this.map = new WeakMap();
            }
            run() {                this.lis.forEach(li => {
                    li.querySelector('a').addEventListener('click', event => {
                        let a = event.target;                        // console.log(li);
                        // console.log(event.target.parentElement);                        const state = li.getAttribute('select');                        if (state) {                            // 移除                            li.removeAttribute('select');                            this.map.delete(li);
                            a.style.backgroundColor = 'green';
                            a.innerHTML = '＋';
                        } else {                            // 添加                            li.setAttribute('select', true);                            this.map.set(li);
                            a.style.backgroundColor = 'red';
                            a.innerHTML = '-';
                        }                        // console.log(this.map);
                        this.render();
                    });
                })
            }
            render() {                this.countElem.innerHTML = `共选了${this.count()}门课`;                // console.log(this.count());
                this.listElem.innerHTML = this.list();
            }
            count() {                return [...this.lis].reduce((count, li) => {                    return count += this.map.has(li) ? 1 : 0;
                }, 0);
            }
            list() {
                let lis = [...this.lis].filter(li => {                    return this.map.has(li);
                }).map(li => {                    return `<span>${li.querySelector('span').innerHTML}</span>`;                }).join('');                // console.log(lis);
                return lis;
            }
        }        new Lesson().run();    script>body>html>

Map与WeakMap类型在JavaScript中的使用_Map_02