Удаление повторяющихся элементов с помощью JavaScript

Поскольку 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 в проекте, над которым мы сейчас работаем, по настоянию товарища по команде.