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

Поскольку мы чаще всего работаем с массивами для сбора связанных данных, многие сценарии требуют работы с массивами, что включает в себя преобразование массива, применение фильтров или извлечение из него некоторых данных.

Эти методы во многих отношениях избавляют нас от необходимости делать это чище и лаконичнее, без каких-либо побочных эффектов.

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

Сценарий. Получив массив с радиусом окружности, выведите два массива: один с площадью круга, а другой с окружностью.

Используемые формулы:

  • Значение PI = 3,14
  • Площадь круга = PI * радиус * радиус
  • Диаметр = 2 * PI * радиус

Старый школьный метод с использованием цикла for:

// calculating circle area
const radius = [1, 2, 3, 4, 5];
const area = [];
for (let i = 0; i < radius.length; i++) {
  area.push(Math.PI * Math.pow(radius[i], 2));
}
// calculating circle circumference
const circumference = [];
for (let i = 0; i < radius.length; i++) {
  circumference.push(2 * Math.PI * radius[i]);
}

Использование карты:

const radius = [1, 2, 3, 4, 5];
const area = radius.map(r => Math.PI * r * r);
const circumference = radius.map(r => 2 * Math.PI * r);

Как вы можете заметить, при использовании подхода с циклом for есть только одно изменение в вычислении площади и окружности — это сама формула, а часть итерации является общей и повторяющейся.

В этом суть использования map, поскольку он абстрагирует часть итерации для вас, и все, на чем вам нужно сосредоточиться, — это логика преобразования. Таким образом, ваши многочисленные строки кода умещаются всего в две строки. Разве это не похоже на волшебную палочку?

Обобщая преимущества использования map по сравнению с циклом for:

Очень читаемый и лаконичный, поскольку он хорошо согласуется с функциональным программированием.

Не изменяет исходный массив, а возвращает новый массив с преобразованными значениями.

Встроенная возможность итерации; все, о чем мне нужно заботиться, это передать мою функцию преобразования.

Поддерживает цепочку с другими методами массива, такими как filter, reduce и т. д.

Filter и reduce обеспечивают те же преимущества, что и map, но эти два варианта предназначены для разных вариантов использования, как показано ниже:

Фильтр: перебирает элементы массива и возвращает только те элементы, которые проходят логику фильтра.

// Filter only even numbers from the given array
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(n => n % 2 === 0);

Reduce: его можно использовать для получения некоторых данных из массива на основе переданной логики.

// Calculate the sum of array elements
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num);

Также сделал несколько короткометражек для ютуба на моем канале. Пожалуйста, проверьте, поможет ли это вам понять больше.



Вопросы для интервью по Javascript 1
Изменить описаниеyoutube.com





Вопросы для интервью по Javascript 2
Изменить описаниеyoutube.com



Если вы найдете этот пост достойным прочтения, пожалуйста, поделитесь им и подпишитесь на меня, чтобы увидеть больше таких постов в будущем. 😎