Видалення повторюваних елементів за допомогою JavaScript

Останнє оновлення Лис 9, 2022

Зміст

Видалення повторюваних елементів (через jQuery)

Оскільки ES6 стає все більш популярним у веб-розробці, ми, ймовірно, побачимо – і будемо писати – менше коду з використанням інших бібліотек. Що стосується WordPress, то jQuery все ще дуже поширений.

Особисто я не вважаю, що у використанні jQuery немає нічого поганого (хоча він може вам і не знадобитися ), але я також вважаю, що важливо підтримувати свої навички та бути в курсі новітніх технологій.

Але навчитися писати код ES6 не є метою цієї публікації, як і те, як чогось досягти за допомогою ES6.

Замість цього все ще йдеться про WordPress і jQuery. Я повернуся до ES6 в кінці публікації. Однак одна з речей, про які я хотів би поговорити, це те, як видалити повторювані елементи зі списку зі спільною властивістю.

Видалення повторюваних елементів (через jQuery)

Точніше, припустімо, що у вас є список елементів – можливо, це впорядкований список, упорядкований список або навіть просто контейнер із набором дочірніх елементів – і кожен дочірній елемент має набір властивостей.

Ці властивості можуть бути атрибутами класу, властивостями спеціальних даних або чимось подібним. Наприклад, припустимо, що у нас є невпорядкований список і кожен дочірній елемент має властивість data-id.

Крім того, припустимо, що список елементів створено на основі відповіді будь-якого даного API, де існують дублікати в даних. Звичайно, серверна сторона повинна впоратися з цим, але у випадках, коли це не зроблено, це все ще можна зробити на стороні клієнта.

Ось код для цього з коментарем під ним:


/**
 * Removes duplicates from the specified array of items; however, this function
 * assumes that $items is an unordered list of items with child elements.
 *
 * @param  $items An unordered list of products with duplicaten children.
 * @return $items An unordered list of products no duplicate children.
 *
 * @private
 */
var _removeDuplicates = function($items) {

  var unique = {},
      dataItemId = -1;

  $items
    .children()
    .each(function() {
      dataItemId = $(this).attr('data-id');
      if (unique[dataItemId]) {
        $(this).remove();
      } else {
        unique[dataItemId] = true;
      }
    });

  return $item;
};

Зверніть увагу на наступне:

функція приймає обернутий в jQuery список елементів із дочірніми елементами,
дочірні елементи елемента data-id, який використовується для визначення наявності повторюваних елементів,
ми встановлюємо масив, щоб визначити, чи бачили ми цей елемент раніше,
якщо ні, ми додаємо його до списку; інакше ми видаляємо його,
нарешті, ми повертаємо модифікований, більш оновлений список.

І це майже рядок за рядком те, що робить код.

Особисто я намагаюся не використовувати оператори if/else у контексті циклу (або навіть поза циклом), але бувають випадки, коли це непогано робити, і це один із них.

Отже, що це було про ES6?

Раніше я згадував, що ES6 знаходиться на підйомі, і це те, чого ми, як розробники, повинні вивчати. Оскільки я продовжую це робити, можливо, я перегляну цей пост і розповім, як досягти тієї ж функціональності за допомогою ES6, а не jQuery, щоб показати, як це можна зробити.

Незважаючи на це, якщо ви користуєтеся WordPress і використовуєте jQuery протягом багатьох років, з якими він використовувався, я закликаю вас вийти за межі бібліотеки та вивчити деякі з нових функцій мови.

Особисто я вчуся на практиці, і хоча я спочатку мав схильність до jQuery за замовчуванням, я вирішив піти з ES6 у проекті, над яким ми зараз працюємо, за наполяганням товариша по команді.

Джерело запису: tommcfarlin.com