Как удалить повторяющиеся элементы массива в JavaScript?

год назад·3 мин. на чтение

5 простых способов удаления дубликатов элементов в массиве JavaScript.

Введение

Массивы являются одной из наиболее часто используемых структур данных в JavaScript. Часто массив может содержать дубликаты элементов, которые необходимо удалить для эффективной обработки данных. В этом блоге мы рассмотрим пять способов удаления дубликатов элементов в массиве с помощью JavaScript, ранжированных от наиболее эффективных до наименее эффективных.

1. Использование объекта Set

Объект Set является наиболее эффективным способом удаления дубликатов из массива в JavaScript. Это коллекция уникальных значений, что означает, что она автоматически удаляет дубликаты. Используя spread оператор, мы можем преобразовать объект Set обратно в массив, в результате чего получается массив, содержащий только уникальные значения. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]
В этом примере мы сначала определяем массив с повторяющимися значениями. Затем мы создаем новый объект Set с помощью оператора spread (...). Наконец, мы снова преобразуем объект Set обратно в массив с помощью оператора spread. Результирующий массив содержит только уникальные значения.

2. Использование метода .filter

Метод .filter является вторым наиболее эффективным способом удаления дубликатов из массива в JavaScript. Он создает новый массив, который включает только элементы, отвечающие определенному условию, в данном случае элемент появляется в массиве только один раз. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(uniqueArr); // [1, 2, 3, 4, 5]
В этом примере мы используем метод .filter для создания нового массива uniqueArr, который включает только элементы, удовлетворяющие условию внутри функции. Условие проверяет, равен ли индекс текущего элемента индексу его первого появления в массиве. Если это так, это означает, что элемент не является дубликатом и может быть включен в новый массив.

3. Использование метода .reduce

Метод .reduce немного менее эффективен, чем метод .filter. Он позволяет свести массив к одному значению, применив функцию к каждому элементу массива. В этом случае мы можем использовать .reduce для создания нового массива, включающего только уникальные значения. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4, 5]
В этом примере мы используем метод .reduce для итерации по каждому элементу массива и применяем функцию, которая проверяет, находится ли текущий элемент уже в массиве аккумулятора (acc). Если это не так, мы добавляем его в массив аккумулятора. Метод .reduce возвращает конечное значение массива аккумулятора, который является массивом, содержащим только уникальные значения.

4. Использование метода .forEach

Метод .forEach менее эффективен, чем предыдущие методы, но он по-прежнему является жизнеспособным вариантом. Он позволяет перебирать каждый элемент массива и применять к нему функцию. В этом случае мы можем использовать .forEach для создания нового массива, содержащего только уникальные значения. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];

arr.forEach((item) => {
  if (!uniqueArr.includes(item)) {
    uniqueArr.push(item);
  }
});

console.log(uniqueArr); // [1, 2, 3, 4, 5]
В этом примере мы используем метод .forEach для итерации по каждому элементу массива и применения функции, которая проверяет, находится ли уже текущий элемент в массиве uniqueArr. Если это не так, мы добавляем его в массив uniqueArr. Результирующий массив содержит только уникальные значения.

5. Использование цикла for

Использование цикла for является наименее эффективным способом удаления дубликатов из массива. Он требует больше кода и вычислительной мощности, и он не такой лаконичный, как другие методы. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!uniqueArr.includes(arr[i])) {
    uniqueArr.push(arr[i]);
  }
}

console.log(uniqueArr); // [1, 2, 3, 4, 5]
В этом примере мы используем цикл for для итерации по каждому элементу массива. Проверяем, есть ли текущий элемент в массиве uniqueArr. Если это не так, мы добавляем его в массив uniqueArr. Результирующий массив содержит только уникальные значения.

Итоги

Удаление дубликатов из массива является распространенной задачей в JavaScript. В этой статье мы рассмотрели пять различных способов выполнения этой задачи с помощью JavaScript. Каждый метод имеет свои преимущества и недостатки, поэтому вам решать, какой метод наилучшим образом соответствует вашим потребностям. Независимо от того, используется ли объект Set, метод .filter, метод .reduce, метод .forEach или цикл for, можно легко удалить дубликаты из массива и более эффективно обрабатывать данные.

12 популярных вопросов с ответами на JavaScript собеседовании

год назад·4 мин. на чтение

Эта статья предназначена для junior разработчиков, которые хотят получить свою первую работу в качестве JavaScript разработчиков.

1. Что такое JavaScript и для чего он используется?

Javascript - это высокоуровневый, динамичный и интерпретируемый язык программирования, широко используемый для многих сред, таких как интерфейс веб-сайтов, backend службы, desktop и мобильные приложения. Но чаще всего JavaScript используется для создания динамических и интерактивных веб-сайтов.

2. Что такое замыкание в JavaScript?

Замыкание — это функция, которая имеет доступ к переменным своей внешней функции. Это важно, потому что это позволяет внутренней функции «запоминать» переменные из своей внешней области, поэтому она может продолжать получать к ним доступ и манипулировать ими даже после того, как внешняя функция была завершена.
function outerFunction(x) {
  return function innerFunction(y) {
    return x + y;
  };
}

const add5 = outerFunction(5);
console.log(add5(3)); // 8

3. Как this работает в JavaScript?

this важное ключевое слово в JavaScript. Его значение определяется тем, как вызывается функция. Его можно задать явно с помощью call(), apply() или bind(). По умолчанию его значение внутри функции устанавливается в глобальный объект (в браузере это объект window), за исключением того, когда функция вызывается как метод объекта. В этом случае this указывает на объект, методом которого он является.

4. Что такое поднятие (hoisting) в JavaScript?

В JavaScript поднятие — это поведение, при котором переменные и объявления функций в памяти автоматически перемещаются в верхнюю часть своей области. Что это значит? Ну, это означает, что эти переменные могут быть использованы до того, как они будут объявлены, и объявления функций также могут быть вызваны до их определения.

5. В чем разница между var, let и const?

  • var: Переменные, объявленные с помощью var, имеют функциональную область действия, что означает, что к ним можно получить доступ только в рамках функции, в которой они были объявлены. Внешняя переменная затеняется, когда переменная с тем же именем объявляется во вложенной функции.
  • let: Пусть переменные имеют блочную область действия, что означает, что они доступны только в том блоке, в котором они объявлены. Объявление переменной с тем же именем во вложенном блоке приведет к затенению внешней переменной.
  • const: переменные, объявленные с помощью const, также как let, имеют область действия блока, но их нельзя переназначить.
Вот пример:
function example() {
  var x = 1;
  let y = 2;
  const z = 3;

  if (true) {
    var x = 4;
    let y = 5;
    const z = 6;
  }

  console.log(x); // 4
  console.log(y); // 2
  console.log(z); // 3
}

example();

6. Какова разница между == и ===?

Оператор равенства == выполняет принудительное приведение типа, что означает, что он попытается преобразовать операнды в один и тот же тип перед их сравнением. С другой стороны, оператор строгого равенства ===, не выполняет приведение типа. Он возвращает значение true только в том случае, если оба операнда имеют одинаковый тип и значение. Например:
console.log(1 == '1'); // true
console.log(1 === '1'); // false

7. В чем разница между null и undefined?

undefined указывает, что переменная была объявлена, но ей не было присвоено значение. Значение nullпредставляет собой преднамеренное отсутствие какого-либо значения объекта. Другими словами, null — это явно заданное значение, указывающее на отсутствие значения.

8. Что такое событие в JavaScript?

В JavaScript событие — это любое действие в браузере, например нажатие пользователем кнопки, загрузка страницы или обновленный элемент. Слушатели событий обычно обрабатывают события, позволяя разработчикам указывать функции, которые должны выполняться при возникновении события. Пример:
const button = document.querySelector('button');

button.addEventListener('click', () => {
  console.log('Button was clicked!');
});

9. В чем разница между синхронным и асинхронным кодом в JavaScript?

Синхронный код выполняется блокирующим образом, что означает, что следующая строка кода будет выполнена после завершения текущей строки. С другой стороны, асинхронный код выполняется неблокирующим образом, что означает, что другой код может выполняться не ожидая завершения асинхронного кодом. Асинхронный код обычно реализуется в JavaScript с помощью обратных вызовов или Promises.

10. Что такое промисы (Promise) в JavaScript?

Объект Promise — это объект, представляющий успешное или неудачное завершение асинхронной операции. Promise позволяет регистрировать обратные вызовы для получения уведомлений о завершении или сбое асинхронной операции, а также обрабатывать ошибки более удобно и централизованно. Например:
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 1000);
  });
};

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

11. Что такое обратный вызов в JavaScript?

Функция обратного вызова передается в качестве аргумента другой функции и выполняется после завершения внешней функции. Разработчики могут использовать обратные вызовы для указания кода, который будет выполняться после завершения асинхронной операции. Пример:
const fetchData = (callback) => {
  setTimeout(() => {
    callback('Data fetched!');
  }, 1000);
};

fetchData(data => {
  console.log(data);
});

12. Что такое AJAX в JavaScript?

AJAX (асинхронный JavaScript и XML) — это метод выполнения асинхронных серверных запросов с веб-страницы без перезагрузки всей страницы. AJAX позволяет разработчикам динамически обновлять веб-страницу новыми данными без необходимости обновления страницы. Это достигается путем отправки HTTP-запроса из браузера на сервер и обновления только тех частей страницы, которые требуют его с ответом. Это улучшает взаимодействие с пользователем, поскольку страница не перезагружается, а обновляются только необходимые данные. Пример:
const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data');

xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.responseText);
  }
};

xhr.send();
Еще больше вопросов с собеседований можно найти здесь.