Set

Set

用于存储任何类型的唯一值，可以是基本类型或者是对象引用

• 只能保存值没有键名
• 值是唯一的
• 遍历顺序是添加的顺序，方便保存回调函数

Set类型与Array和Object的对比

数组可以存放任何数据

let arr = [1, 1, 1, 1, 1, 1];
console.table(arr);

Set不能存放相同的数据

let set = new Set([1, 2, 3, 4, 5]);
set.add(1);
set.add("1");
console.log(set);

Set中只保存了一个1

对象中 存在相同的键，后面的会把前面的覆盖

let obj = {
    1: "a",
    "1": "b"
};

如果用一个对象作为另一个对象的属性，系统会把这个对象转换为字符串

let obj = {
    1: "a",
    "1": "b"
};

let hd = {
    [obj]: "小夜勃"
};

打印 hd

获取元素数量

let set = new Set(['a', 'b']);
console.log(set.size); //2

元素检测

检测元素是否存在

let set = new Set(['a', 'b']);
console.log(set.has("a")); True

删除元素

使用delete方法可以删除单个元素，返回值为boolean类型

let set = new Set(['a', 'b']);
console.log(set.delete("a")); //true
console.log(set.has("a")); //false

使用clear方法可以清除所有元素

let set = new Set(['a', 'b']);
set.clear();
console.log(set.values());

数组转换

使用点语法或者Array.form可以将Set类型转换为数据

const set = new Set(["boreas", "object"]);
console.log([...set]); //["boreas", "object"]
console.log(Array.from(set)); //["boreas", "object"]

去除重复

去除字符串重复

console.log([...new Set("object")].join(""));//object

去除数组重复

const arr = [1, 2, 3, 5, 2, 3];
console.log(...new Set(arr)); // 1,2,4,5

遍历数据

使用 keys()/values()/entries() 都可以返回一个迭代对象，因为set类型只有值，所以 keys与values 方法返回的结果一致

const hd = new Set(["baidu", "object"]);
console.log(hd.values()); //SetIterator {"baidu", "object"}

const hd = new Set(["baidu", "object"]);
console.log(hd.keys()); //SetIterator {"baidu", "object"}

const hd = new Set(["baidu", "object"]);
console.log(hd.entries()); //SetIterator {"baidu" => "baidu", "object" => "object"}

可以使用forEach遍历Set数据

let arr = [7, 6, 2, 8, 2, 6];
let set = new Set(arr);
//使用forEach遍历
set.forEach((item,key) => console.log(item,key));

使用forof也可以遍历Set

let set = new Set([7, 6, 2, 8, 2, 6]);

for (const value of set) {
	console.log(value);
}

Set搜索案例

HTML

 <input type="text" name="hd" />
  <ul></ul>

CSS

body {
    padding: 200px 800px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 200px;
}

li {
    border: solid 1px #ddd;
    padding: 10px;
}

li:nth-of-type(odd) {
    background: yellowgreen;
}

JavaScript

let obj = {
    // 声明一个Set,用来存放数据
    data: new Set(),
    // 往Set中添加数据
    keyword(word) {
        this.data.add(word);
    },
    // 显示Set数据
    show() {
        let ul = document.querySelector("ul");
        ul.innerHTML = "";
        this.data.forEach(function (value) {
            ul.innerHTML += `<li>${value}</li>`;
        });
    }
};
let input = document.querySelector("[name='hd']");
input.addEventListener("blur", function () {
    obj.keyword(this.value);
    obj.show();
});

WeakSet

WeakSet结构同Set一样,不会保存相同的值，但是它的值必须只能是对象类型的值。

• WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不能进行forEach( )遍历等操作
• WeakSet 是弱引用，WeakSet 结构没有keys( )，values( )，entries( )等方法和size属性

声明定义

下列操作会触发报错,因为存储的值不是对象类型

new WeakSet(["baidu", "object"]); //Invalid value used in weak set

new WeakSet("baidu"); //Invalid value used in weak set

WeakSet的值必须为对象类型

new WeakSet([["baidu"], ["object"]]);

将DOM节点保存到WeakSet

document.querySelectorAll("button").forEach(item => Wset.add(item));

基本语法

添加操作

  let set = new WeakSet();
  set.add(['object'])

删除操作

  let set = new WeakSet();
  set.add(['object'])
  set.delete(arr);

检索操作

  let set = new WeakSet();
  set.add(['object'])
  console.log(set.has(object)); true

WeakSet案例

HTML

 <ul>
    <li>baidu.com <a href="javascript:;">x</a></li>
    <li>taoabo.com <a href="javascript:;">x</a></li>
    <li>meituan.com <a href="javascript:;">x</a></li>
  </ul>

CSS

  * {
    padding: 0;
    margin: 0;
  }

  body {
    padding: 100px;
  }

  ul {
    list-style: none;
    display: flex;
    width: 200px;
    flex-direction: column;
  }

  li {
    height: 30px;
    border: solid 2px #e67e22;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    color: #333;
    transition: 1s;
  }

  a {
    border-radius: 3px;
    width: 20px;
    height: 20px;
    text-decoration: none;
    text-align: center;
    background: #16a085;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
  }

  .remove {
    border: solid 2px #eee;
    opacity: 0.8;
    color: #eee;
  }

  .remove a {
    background: #eee;
  }

JavaScript

class Todo {
    constructor() {
        this.items = document.querySelectorAll("ul>li");
        this.lists = new WeakSet();
        this.items.forEach(item => this.lists.add(item));
    }
    run() {
        // console.log(this)
        this.addEvent();
    }
    addEvent() {

        this.items.forEach(item => {
            console.log(item)
            let a = item.querySelector("a");
            a.addEventListener("click", event => {
                const parentElement = event.target.parentElement;
                if (this.lists.has(parentElement)) {
                    parentElement.classList.add("remove");
                    this.lists.delete(parentElement);
                } else {
                    parentElement.classList.remove("remove");
                    this.lists.add(parentElement);
                }
            });
        });
    }
}
new Todo().run();

nt.target.parentElement;
if (this.lists.has(parentElement)) {
parentElement.classList.add(“remove”);
this.lists.delete(parentElement);
} else {
parentElement.classList.remove(“remove”);
this.lists.add(parentElement);
}
});
});
}
}
new Todo().run();