Array.push() в JavaScript: добавление объекта при его отсутствии

Быстрый ответ

Для минимизации дубликатов и поддержки уникальности элементов, применяйте метод includes до выполнения push:

let array = [1, 2];
let itemToAdd = 2;

if (!array.includes(itemToAdd)) {
    array.push(itemToAdd);
}
// Массив останется таким же: [1, 2]

В случае массивов с объектами, лучше использовать find или findIndex, чтобы сравнить свойства объектов перед их вводом:

let objectArray = [{ name: "Alice", text: "Hello" }];
let objectToAdd = { name: "Bob", text: "Hi" };

if (!objectArray.find(obj => obj.name === objectToAdd.name && obj.text === objectToAdd.text)) {
    objectArray.push(objectToAdd);
}
// В objectArray появится новый элемент: objectToAdd

Эффективное исправление: Массивы строк и чисел

Устранение повторений

Использование includes или indexOf поможет предотвратить дублирование при добавлении уже существующих элементов. Этот способ особенно подходит для обработки строк и чисел.

if (!array.includes(itemToAdd)) {
    array.push(itemToAdd);
}

Подробнее об этом расскажет наш спикер на видео

Обеспечение уникальности

Применяйте Set, чтобы обеспечить уникальность элементов в массиве и избежать дубликатов при добавлении.

let uniqueSet = new Set(array);
uniqueSet.add(itemToAdd);
array = [...uniqueSet];

Работа с объектами в массивах

Внимание свойствам

От повторяющихся объектов в массиве можно защититься, проверяя их свойства.

if (!objectArray.some(obj => obj.name === objectToAdd.name && obj.text === objectToAdd.text)) {
    objectArray.push(objectToAdd);
}

Функция для повторного применения

Для упрощения повторного использования кода можно вынести проверку на уникальность в функцию pushIfNotExist.

function pushIfNotExist(array, element, comparer) {
    if (!array.some(el => comparer(el, element))) {
        array.push(element);
    }
}

pushIfNotExist(objectArray, objectToAdd, (a, b) => a.name === b.name && a.text === b.text);

Код на базе ES6

Для производства более лаконичного кода, советуем использовать функциональность ES6, например методы filter и concat.

let filteredArray = objectArray.concat(
    objectArray.filter(obj => 
        !objectArray.some(existingObj => existingObj.name === obj.name)
    )
);

Визуализация

Представьте ваш массив как закрытый клуб со списком VIP-персон. Правило простое: допустим только новые лица!

Список VIP: [Alice 👩, Bob 👨, Clara 👩‍🦰]
Новый гость: Dave 👨‍🦱

Если он еще не в клубе, впускаем!

if (!vipList.includes("Dave")) {
    vipList.push("Dave");
}

В итоге список VIP обновляется новым именем:

Обновленный список VIP: [Alice 👩, Bob 👨, Clara 👩‍🦰, **Dave 👨‍🦱**]

Теперь Dave является членом загогулинного сообщества, и он может войти в клуб только один раз!

Уголок ботана: Суеверия о производительности

Анализируйте размер и сложность используемых массивов, когда производительность имеет важное значение. Методы indexOf, find и includes работают с различной скоростью, что является критичным при работе с большими массивами.

Чистота кода и совершенство

Не рекомендуется расширять базовые объекты, например Array.prototype, чтобы предотвратить потенциальные коллизии. Писание удобного для поддержки кода и создание вспомогательных функций, таких как pushIfNotExist, упрощают тестирование и чтение кода.