Методы массивов: 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

Поиск элементов в массиве JavaScript

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

Иногда нам необходимо осуществлять поиск по массиву, чтобы найти нужный 'товар' или 'фильм', или просто убедиться в наличии определенного элемента в массиве.

Метод indexOf - если нужно узнать индекс/порядок элемента. Если элемент не найден то вернет -1

const fruits = ["apple", "banana", "cherry"];
const index = fruits.indexOf("banana"); // 1

Метод find - находим первый подходящий элемент в массиве, если не найден то вернет undefined

const numbers = [1, 3, 5, 7];
const foundNumber = numbers.find(element => element > 4); // 5

Метод filter - этот метод уже возвращает массив подходящих элементов иначе пустой массив

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(number => number > 3); // [4, 5]

Метод includes - проверяем есть ли элемент в массиве, вернет true или false

const pets = ["cat", "dog", "bird"];
const hasDog = pets.includes("dog"); // true

Все эти методы внутренне используют традиционный цикл for для итерации по элементам массива и проверки условия. В зависимости от выбранного метода, результатом может быть индекс элемента, сам элемент, или булево значение (true/false).

#JavaScript #array #search

Реализация метода filter()

Метод filter() создаёт новый массив со всеми элементами исходного массива, которые удовлетворяют условию, заданному в функции обратного вызова.

#javascript #array #filter #methods