zoukankan html css js c++ java

Map与WeakMap类型在JavaScript中的使用

map类型特点与创建方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>Document</title>
    <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>Document</title>
    <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>Document</title>
    <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>Document</title>
    <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">cyy1</div>
    <div name="cyy2">cyy2</div>

    <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>Document</title>
    <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>

WeakMap的语法使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>
    <div>cyy</div>
    <div>cyy2</div>

    <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>Document</title>
    <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>Document</title>
    <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>html</span><a href="javascript:;">＋</a></li>
                <li><span>css</span><a href="javascript:;">＋</a></li>
                <li><span>js</span><a href="javascript:;">＋</a></li>
            </ul>
        </section>
        <section>
            <strong id="count">共选了2门课</strong>
            <p id="list">
                <!-- <span>111</span> -->
            </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>

查看全文

相关阅读:
缓冲流
 properties类
 io流
 异常处理
 file的概述和作用
 map集合和set集合
 js 判断是否是undefined null NaN
java instanceof 判断是否是String
ajax获取数据中文乱码问题最简单的完美解决方案
 if else if else if else 的用法

原文地址：https://www.cnblogs.com/chenyingying0/p/13995123.html