Методы массивов: map и filter

map и filter - это встроенные методы массивов в JavaScript, позволяющие работать с каждым элементом массива без необходимости использовать циклы.

1️⃣ Map (.map())

Назначение: Преобразует каждый элемент массива.
Как работает: Применяет функцию к каждому элементу и возвращает новый массив с преобразованными элементами.
Пример: У вас есть массив чисел, и вы хотите увеличить каждое число в два раза. Используйте map!

2️⃣ Filter (.filter())

Назначение: Отбирает элементы, соответствующие определенному условию.
Как работает: Применяет функцию-предикат к каждому элементу. Если функция возвращает true, элемент остается в новом массиве. Если false - элемент отбрасывается.
Пример: У вас есть массив чисел, и вы хотите оставить только четные. Используйте filter!

Их преимущества:

✅ Читаемость: Ваш код становится короче и легче для чтения.
✅ Немутабельность: Эти методы не изменяют исходный массив, а создают новый. Это хорошо для функционального программирования.
✅ Цепочные вызовы: Можно комбинировать эти методы для создания сложных трансформаций.

🚀 Методы map и filter делают ваш код чистым, эффективным и легко масштабируемым. Они - мощные инструменты в арсенале каждого JavaScript-разработчика!

#ОбучающийПост #JavaScript #Array

Привет всем! Сегодня поговорим про два очень часто используемых метода массивов в JavaScript: forEach и map. Почему бы их не сравнить, чтобы вы точно знали, когда какой использовать? 🤔

forEach
Этот метод просто проходится по всем элементам массива и делает с ними что-то полезное. Но сам массив при этом не изменяет. Он просто как турист: прошёл, посмотрел, но ничего не тронул.

const numbers = [1, 2, 3];
numbers.forEach(num => {
console.log(num * 2);
});

map
Этот метод похож на forEach, но с одним важным отличием: он создаёт новый массив на основе старого. Как будто клонирует массив, но при этом может что-то изменить в клонах.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

Когда что использовать?

Используйте forEach, когда: вам нужно просто что-то сделать с каждым элементом массива, но не нужен новый массив.

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

#JavaScript #обучающийПост #Array #methods

Применение

Различие заключается в том, что map возвращает новый преобразованный массив, а forEach позволяет просто итерироваться по массиву и добавлять свою логику.

В примере мы решили одну и ту же задачу разными методами.

В данном случае map является предпочтительным.

#JavaScript #обучающийПост #Array #methods

Мутирующие и не мутирующие методы массивов.

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

Мутирующие Методы

push - добавляет элементы в конец массива.
pop - удаляет последний элемент массива.
splice - удаляет, заменяет или добавляет элементы.

Не Мутирующие Методы

slice - возвращает новый массив, "нарезая" старый.
map - создает новый массив, преобразуя каждый элемент старого.
filter - создает новый массив с элементами, которые прошли проверку.

В чем разница?

Мутирующие методы изменяют исходный массив, а не мутирующие - не изменяют.

Хороший пример: slice и splice. Оба вырезают кусок массива, но splice изменит исходный массив, а slice оставит его нетронутым.

#обучающийПост #JavaScript #Array #methods

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

Это избавит вас от головной боли, если исходный массив используется ещё где-то в программе.

И вот это именно то, что называют иммутабельностью. Это не просто модное словечко, это хорошая практика. Функции, которые не меняют входные данные, называют чистыми. Они проще в отладке и тестировании.

Есть мутирующие методы sort(), reverse(), splice(), недавно были добавленны новые методы toSorted(), toReversed(), toSpliced(). Они как раз не мутируют массив, а создают новый.

Раньше нам приходилось с помощью ... (spread operator) создавать новый массив.
Каждый раз, когда этот код выполняется, создаётся новый массив, что потребляет дополнительную память. К тому же, метод .sort() сам по себе тоже требует ресурсов для выполнения сортировки.

const numbers = [3, 1, 4];
const sortedNumbers = [...numbers].sort();

Теперь мы можем использовать toSorted():

const numbers = [3, 1, 4];
const sortedNumbers = numbers.toSorted();

#обучающийПост #JavaScript #Array #methods

Новички часто делают так в React, забывают про иммутабельность. Может вызвать непредвиденные ошибки или поведение приложения.

Раньше делали так (spread оператор):
[...people].sort()

Теперь же можно делать так:
people.toSorted()

#code #JavaScript #Array #methods

for... а что дальше in или of?

for...in цикл перебирает все перечислимые свойства объекта, включая свойства, унаследованные от прототипов. Он чаще всего используется для перебора свойств объекта. (Для каждого В объекте)

for...of цикл используется для перебора итерируемых объектов, таких как массивы, строки, Map, Set и др. Он не может использоваться для перебора объектов. (Для каждого ИЗ элементов)

#JavaScript #обучающийПост #цикл #array #object

Это массив?

В JavaScript вы можете проверить, является ли объект массивом, используя несколько различных методов. Самый надежный из них — это статический метод Array.isArray()



const myArray = [1, 2, 3];
const notArray = {key: "value"};

Array.isArray(myArray)); // true
Array.isArray(notArray)); // false

Другие способы:

1. Этот метод может быть ненадежным, если контекст выполнения содержит несколько глобальных сред, как, например, в случае с фреймами на веб-странице.

const

myArray = [1, 2, 3];
myArray.constructor === Array; // true

2. Это более надежный метод до появления Array.isArray, но сейчас он считается избыточным и менее читаемым. Так что лучше всего использовать Array.isArray()

const

myArray = [1, 2, 3];
Object.prototype.toString.call(myArray) === '[object Array]'; // true

#обучающийПост #JavaScript #array #isArray

Метод splice в JavaScript

Он выполняет три основные функции: добавляет, удаляет и заменяет элементы в массиве.

Удаление

splice(start, deleteCount) - удалим элементы начиная с индекса start и количество deleteCount

Добавление

splice(start, 0, item1, ..., itemN) - добавляет элементы (item1, ..., itemN) в массив, начиная с индекса start, без удаления существующих.

Изменение

splice(start, deleteCount, item1, ..., itemN) - заменяет deleteCount элементов в массиве, начиная с индекса start, на новые элементы (item1, ..., itemN).

#обучающийПост #JavaScript #array #splice

Реализуйте функцию map в JavaScript

Когда на собеседованиях просят реализовать какой-либо существующий метод JavaScript, это не только проверка ваших знаний языка, но и способ увидеть, насколько хорошо вы понимаете, как методы работают «под капотом». Давайте рассмотрим такой пример на методе map.

Метод map — это стандартный метод массивов в JavaScript, который используется для преобразования элементов массива. Он делает это, применяя предоставленную функцию обратного вызова (callback) к каждому элементу исходного массива и формируя новый массив из возвращаемых значений этой функции.

Основной принцип работы метода map заключается в том, что он создает новый массив, не изменяя исходный. Это важно для функционального стиля программирования, где неизменяемость данных является ключевой концепцией. Функция обратного вызова, которую вы передаете в map, получает три аргумента: текущий элемент массива, его индекс и сам массив. Вы можете использовать эти данные для создания нового элемента в результирующем массиве.

#JavaScript #собеседование #map #array