Set與WeakSet型別在JavaScript中的使用-有解無憂

set型別與array與object對比分析：

<!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 arr = [1, 1, 1, 1, 1];
        // console.table(arr);

        // set集合
        // let set = new Set([1, 2, 3, 4, 5]);
        // console.log(set);

        // 區分型別，相同型別的不可重復
        // let set = new Set();
        // set.add(1);
        // set.add(1);
        // set.add('1');
        // console.log(set);

        // set和object的區別
        // 物件中：不同型別可隱式轉換的也不可重復，否則前面的會被后面的覆寫
        // let obj = {
        //     1: 'cyy1',
        //     '1': 'cyy2'
        // };
        // console.log(obj);

        let obj = {
            1: 'cyy1',
            '1': 'cyy2'
        };
        // let cyy = {
        //     obj: 'yaya'
        // };
        // console.log(cyy.obj);
        // 變數需要用方括號
        let cyy = {
            [obj]: 'yaya'
        };
        // 物件作為屬性名，會自動呼叫toString()，轉為字串
        console.log(cyy);//[object Object]
        console.log(obj.toString());
        console.log(cyy[obj.toString()]);
    </script>
</body>

</html>

set元素檢測與管理：

<!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 set = new Set('cyy');
        // console.log(set);
        // 字串會轉陣列，且不可重復；相當于以下寫法
        // let set = new Set([...'cyy']);
        // console.log(set);

        //通常還是用陣列形式
        // 獲取set長度
        let set = new Set([1, 2, 3]);
        console.log(set.size);
        // 判斷set是否含有某個值
        console.log(set.has(1));
        console.log(set.has(11));
        // 洗掉set中的某個值
        set.delete(2);
        console.log(set);
        // 獲取set的值
        console.log(set.values());
        // 清空set
        set.clear();
        console.log(set.size);
    </script>
</body>

</html>

型別之間互相幫助才是好兄弟：

<!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>
        // set轉陣列
        // let set = new Set([1, 2, 3, 4]);
        // console.log(Array.from(set));
        // console.log([...set]);

        // let set = new Set('123456789');
        // let res = [...set].filter((item) => item < 5);
        // console.log(new Set(res));

        // 通過set幫助array去重
        let arr = [1, 2, 3, 5, 2, 4, 1];
        console.log([...new Set(arr)]);
    </script>
</body>

</html>

遍歷set型別的方式：

<!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>
        // set沒有鍵名，key和value都是鍵值
        // let set = new Set([11, 22, 33, 44]);
        // console.log(set.keys());
        // console.log(set.values());
        // console.log(set.entries());

        let set = new Set([11, 22, 33, 44]);
        // set.forEach(function (value, index, arr) {
        //     console.log(value, index, arr);
        // });

        for (let value of set) {
            console.log(value);
        }
    </script>
</body>

</html>

使用set處理網站關鍵詞：

<!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>
        body {
            padding: 200px;
        }
        
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        li {
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
    <input type="text" name="keyword">
    <ul></ul>

    <script>
        // let obj = {
        //     data: new Set(),
        //     set keyword(value) {
        //         this.data.add(value);
        //     },
        //     show() {
        //         let ul = document.querySelector('ul');
        //         ul.innerHTML = '';
        //         this.data.forEach(function(value) {
        //             ul.innerHTML += `<li>${value}</li>`;
        //         });
        //     }
        // }

        // let input = document.querySelector('[name=keyword]');
        // input.addEventListener('blur', function() {
        //     obj.keyword = this.value;
        //     obj.show();
        // });


        let obj = {
            data: new Set(),
            keyword(value) {
                this.data.add(value);
            },
            show() {
                let ul = document.querySelector('ul');
                ul.innerHTML = '';
                this.data.forEach(function(value) {
                    ul.innerHTML += `<li>${value}</li>`;
                });
            }
        }

        let input = document.querySelector('[name=keyword]');
        input.addEventListener('blur', function() {
            obj.keyword(this.value);
            obj.show();
        });
    </script>
</body>

</html>

并集-交集-差集，演算法實作

<!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 a = new Set([1, 2, 3, 4, 5]);
        let b = new Set([4, 5, 9, 6]);
        // 并集
        console.log(new Set([...a, ...b]));
        // 差集，a有，b沒有
        console.log(new Set([...a].filter(function(item) {
            return !b.has(item);
        })));
    </script>
</body>

</html>

WeakSet語法介紹：

<!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></div>
    <div></div>

    <script>
        // WeakSet 跟 set 差不多，但是WeakSet的元素只能是參考型別
        // let set = new WeakSet([1, 2]);
        // let set = new WeakSet();
        // set.add([1, 2, 3]);

        let nodes = new WeakSet();
        let divs = document.querySelectorAll('div');
        divs.forEach(function(item) {
            // console.log(item);
            // WeakSet的元素可以是dom節點
            nodes.add(item);
        });
        console.log(nodes);

        // 洗掉元素
        nodes.delete(divs[0]);
        // nodes.delete(nodes[1]);
        console.log(nodes);

        // 判斷是否含有元素
        console.log(nodes);
        console.log(nodes.has(divs[0]));
        console.log(nodes.has(divs[1]));
    </script>
</body>

</html>

參考型別的垃圾回收原理：

<!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></div>
    <div></div>

    <script>
        let a = {
            name: 'cyy'
        };
        let b = a;
        let arr = [a]; //被參考第三次
        arr[0] = null; //解除該參考
        // 此時該記憶體地址被a參考一次，被b參考一次，共參考2次
        a = null;
        console.log(b);
        // 次數a的參考斷開，該記憶體地址只被b參考1次
        b = null;
        // 此時該記憶體地址沒有被參考，因此屬于垃圾
        console.log(a, b);
        //系統會自動檢測記憶體有沒有被參考，沒有的話會自動垃圾回收
    </script>
</body>

</html>

WeakSet弱參考型別：

<!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>
        // WeakSet是弱參考型別，因此無法使用keys，values，以及迭代方法

        // WeakSet不會增加參考次數
        // let a = {
        //     name: 'cyy'
        // };
        // let b = a;
        // let set = new WeakSet();
        // set.add(a);
        // // 此時該記憶體被參考次數為2,
        // a = null;
        // b = null;
        // // 此時該記憶體沒有被參考，但是WeakSet并不知情，導致WeakSet內顯示空元素
        // console.log(set);

        // WeakSet的弱參考特性會導致回圈出問題，因此無法進行回圈操作
        // console.log(set.keys());
        // console.log(set.values());

        // let set = new WeakSet();
        // set.add([1, 2, 3]);
        // console.log(set.keys());
        // console.log(set.values());
        // for (const item of set) {
        //     console.log(item);
        // }
        // console.log(set.size);


        let a = {
            name: 'cyy'
        };
        let b = a;
        let set = new WeakSet();
        set.add(a);
        a = null;
        b = null;
        console.log(set);
        // WeakSet在一定時間之后，也是能夠讀取到被回收的垃圾，然后同步清空
        setTimeout(function() {
            console.log(set);
        }, 2000);
    </script>
</body>

</html>

todo任務串列中使用WeakSet：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 200px;
        }
        
        ul {
            list-style: none;
        }
        
        li {
            width: 200px;
            border: 1px solid orange;
            position: relative;
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            padding: 10px;
        }
        
        li a {
            display: inline-block;
            color: white;
            position: absolute;
            right: 5px;
            top: 15px;
            background: green;
            border-radius: 5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
        }
        
        li.remove {
            opacity: .1;
        }
    </style>
</head>

<body>
    <ul>
        <li>baidu.com
            <a href="javascript:;">x</a>
        </li>
        <li>google.com
            <a href="javascript:;">x</a>
        </li>
        <li>taobao.com
            <a href="javascript:;">x</a>
        </li>
    </ul>

    <script>
        class Todo {
            // 建構式
            constructor() {
                this.items = document.querySelectorAll('li');
                // console.log(this.items);

                this.lists = new WeakSet();
                // 只能用箭頭函式，因為this指向不能變
                this.items.forEach((item) => this.lists.add(item));
                console.log(this.lists);
            }
            run() {
                this.addEvent();
            }
            addEvent() {
                this.items.forEach((item) => {
                    let a = item.querySelector('a');
                    // 只能用箭頭函式，因為this指向不能變
                    a.addEventListener('click', (e) => {
                        // console.log(e.target);
                        let li = e.target.parentElement;
                        if (this.lists.has(li)) {
                            li.classList.add('remove');
                            this.lists.delete(li);
                        } else {
                            // 提示已洗掉
                            // alert('todo已經洗掉');

                            // 恢復被洗掉的
                            li.classList.remove('remove');
                            this.lists.add(li);
                        }
                    })
                })
            }
        }
        new Todo().run();
    </script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/222254.html

標籤：其他

上一篇：企業作業流設計原則及注意事項

下一篇：企業作業流設計原則及注意事項