浅学JavaScript06

最新推荐文章于 2024-06-04 14:30:00 发布

Lamour99

最新推荐文章于 2024-06-04 14:30:00 发布

阅读量333

点赞数

分类专栏： js 文章标签： js es6

本文链接：https://blog.csdn.net/Lamour99/article/details/119546620

版权

js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的Set和WeakSet数据结构。Set用于存储唯一值，不考虑键，严格类型检查，支持遍历和转换为数组。 WeakSet则用于保存对象的弱引用，不考虑重复，不可遍历且不计入垃圾回收引用计数。文章通过实例展示了如何使用这两种数据结构，包括添加、删除元素、去重以及垃圾回收机制的理解。

摘要由CSDN通过智能技术生成

世界不止0和1 还有...

Set

用于存储任何类型的唯一值，无论是基本类型还是对象引用。

只能保存值没有键名

严格类型检测如字符串数字不等于数值型数字

值是唯一的

遍历顺序是添加的顺序，方便保存回调函数

基本使用

对象可以属性最终都会转为字符串

使用对象做为键名时，会将对象转为字符串后使用

使用数组做初始数据

Set 中是严格类型约束的，下面的数值1与字符串1属于两个不同的值

使用 add 添加元素，不允许重复添加hdcms值

获取数量

获取元素数量

元素检测

检测元素是否存在

删除元素

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

使用 clear 删除所有元素

数组转换

可以使用点语法 或 Array.form 静态方法将Set类型转为数组，这样就可以使用数组处理函数了

移除Set中大于5的数值

去除重复

去除字符串重复

去除数组重复

遍历数据

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

可以使用 forEach 遍历Set数据，默认使用 values 方法创建迭代器。

为了保持和遍历数组参数统一，函数中的value与key是一样的。

也可以使用 forof 遍历Set数据，默认使用 values 方法创建迭代器

搜索实例

<style>
  body {
      padding: 200px;
  }

  * {
      padding: 0;
      margin: 0;
  }

  input {
      width: 200px;
      border: solid 1px #d63031;
      outline: none;
      padding: 10px;
      box-sizing: border-box;
  }

  ul {
      list-style: none;
      width: 200px;
      padding-top: 20px;
  }

  ul li {
      border: solid 1px #ddd;
      padding: 10px;
      margin-bottom: -1px;
  }

  ul li:nth-of-type(odd) {
      background: #00b894;
  }
</style>

<body>
  <input type="text">
  <ul></ul>
</body>
<script>
  let obj = {
      words: new Set(),
      set keyword(word) {
          this.words.add(word);
      },
      show() {
          let ul = document.querySelector('ul');
          ul.innerHTML = '';
          this.words.forEach((item) => {
              ul.innerHTML += ('<li>' + item + '</li>');
          })
      }
  }

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

WeakSet

WeakSet结构同样不会存储重复的值，它的成员必须只能是对象类型的值。

垃圾回收不考虑WeakSet，即被WeakSet引用时引用计数器不加一，所以对象不被引用时不管WeakSet是否在使用都将删除
因为WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行forEach( )遍历等操作
也是因为弱引用，WeakSet 结构没有keys( )，values( )，entries( )等方法和size属性
因为是弱引用所以当外部引用删除时，希望自动删除数据时使用 WeakMap

声明定义

以下操作由于数据不是对象类型将产生错误

WeakSet的值必须为对象类型

将DOM节点保存到WeakSet

基本操作

下面是WeakSet的常用指令

垃圾回收

WeaSet保存的对象不会增加引用计数器，如果一个对象不被引用了会自动删除。

下例中的数组被 arr 引用了，引用计数器+1

数据又添加到了 hd 的WeaSet中，引用计数还是1

当 arr 设置为null时，引用计数-1 此时对象引用为0

当垃圾回收时对象被删除，这时WakeSet也就没有记录了

案例操作

<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    padding: 200px;
  }
  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;
  }
</style>

<body>
  <ul>
    <li>Lamour.com <a href="javascript:;">x</a></li>
    <li>nike.com <a href="javascript:;">x</a></li>
    <li>liming.com <a href="javascript:;">x</a></li>
  </ul>
</body>

<script>
  class Todos {
    constructor() {}
    run() {
      this.items = document.querySelectorAll("ul>li");
      this.lists = new WeakSet();
      this.record();
      this.addEvent();
    }
    addEvent() {
      this.items.forEach(item => {
        item.querySelector("a").addEventListener("click", event => {
          //检测WakeSet中是否存在Li元素
          const parentElement = event.target.parentElement;
          if (!this.lists.has(parentElement)) {
            alert("已经删除此TODO");
          } else {
            //删除后从记录的WakeSet中移除
            parentElement.classList.add("remove");
            this.lists.delete(parentElement);
          }
        });
      });
    }
    record() {
      this.items.forEach(item => this.lists.add(item));
    }
  }
  new Todos().run();
</script>