数组去重实现类似ElementUI穿梭框

2023-12-06 18:46:12

前言

最近在项目开发中使用到了一个类似穿梭框的操作，再次记录下。主要的功能就是讲左边表格里面的数据通过筛选后放到右边表格，右边表格通过操作后进行相应的处理。之前在ElementUI官网和一些博客上面都有看到过使用ElementUI的穿梭框实现的功能，感觉比较符合需求，但是根据自己项目的需求，还是自己实现了一个数组去重的算法。

数组去重算法

数组去重算法是一种用来去除数组中重复元素的算法。最简单的数组去重算法是使用两个循环，第一个循环遍历数组，第二个循环遍历数组中每个元素，如果找到一个重复的元素，则将其从数组中删除。

function removeDuplicates(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

上面的算法时间复杂度为O(n^2)，其中n是数组的长度。

还有一种更快的数组去重算法是使用哈希表。哈希表是一种数据结构，它可以将元素映射到一个键。使用哈希表可以将数组中的元素映射到一个键，然后使用哈希表来检查元素是否重复。如果一个元素已经在哈希表中，则说明它是重复的，可以将其从数组中删除。

function removeDuplicates(arr) {
  const hashTable = {};
  const uniqueArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      uniqueArr.push(arr[i]);
    }
  }
  return uniqueArr;
}

上面的算法时间复杂度为O(n)，其中n是数组的长度。

穿梭框组件

穿梭框组件是一个常见的前端组件，它允许用户在两个列表之间移动数据。穿梭框组件通常由两个列表和一个按钮组成。用户可以将数据从左边列表拖动到右边列表，也可以将数据从右边列表拖动到左边列表。

<div class="shuttle-box">
  <div class="left-list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="right-list">
    <ul>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </div>
  <div class="button-container">
    <button class="add-button">+</button>
    <button class="remove-button">-</button>
  </div>
</div>

const shuttleBox = document.querySelector('.shuttle-box');
const leftList = shuttleBox.querySelector('.left-list');
const rightList = shuttleBox.querySelector('.right-list');
const addButton = shuttleBox.querySelector('.add-button');
const removeButton = shuttleBox.querySelector('.remove-button');

addButton.addEventListener('click', () => {
  const selectedItems = leftList.querySelectorAll('li.selected');
  selectedItems.forEach((item) => {
    rightList.appendChild(item);
  });
});

removeButton.addEventListener('click', () => {
  const selectedItems = rightList.querySelectorAll('li.selected');
  selectedItems.forEach((item) => {
    leftList.appendChild(item);
  });
});

leftList.addEventListener('click', (e) => {
  const target = e.target;
  if (target.tagName === 'LI') {
    target.classList.toggle('selected');
  }
});

rightList.addEventListener('click', (e) => {
  const target = e.target;
  if (target.tagName === 'LI') {
    target.classList.toggle('selected');
  }
});