В этой статье мы быстро рассмотрим какой-нибудь метод массива Javascript, который будет всегда под рукой. Я уверен, что они не новые, но иногда нам нужно что-то напомнить.

Это пример массива: [‘a’, ‘b’, ‘c’, ‘d’].

Приведенный выше массив содержит четыре элемента. «A» находится в позиции 0, «b» - в позиции 1, «c» 2, «d» 3. В массивах счет начинается с нуля. Положение элемента - это индекс этого элемента. Вы правы, элемент "c" имеет индекс 2.

  1. forEach

Array Foreach - это метод массива javascript, который существует в Array.prototype. Поддерживается всеми современными браузерами. Array forEach выполняет итерацию по элементам массива один за другим и помогает делать интересные вещи с каждым из них.
NB: Как и другие методы массива, forEach не возвращает никакого значения.

Синтаксис для Array forEach
array .forEach (function (currentArrayElement, index, array), thisElement).

Первый аргумент - это обратный вызов (проще говоря, функция без имени), который предоставляет элемент массива. Обратный вызов принимает эти аргументы.
- currentArrayElement (обязательный): это текущий элемент массива.
- index (необязательно): индекс элемента (Положение элемента в массиве).
- array (необязательно): Массив, по которому выполняется итерация.
Второй аргумент - thisElement, , который позволяет нам изменять контекст this. Пока вам не нужно об этом беспокоиться.
Давайте рассмотрим пример кода.

Допустим, у нас есть коллекция книг, возможно, из базы данных или API.

Это массив объектов, мы можем перебирать его с помощью forEach.

После завершения цикла forEach выйдет, и программа продолжится. Обратите внимание, forEach удобен для простого цикла, break или continue нельзя использовать в forEach, и, наконец, forEach не возвращает новое значение или массив.

2. Array Map
Итак, что делает Array Map? Карта массива позволяет нам перебирать каждый элемент массива и вносить в них изменения. Изменения, внесенные в каждый элемент массива, сохраняются в другом массиве. Таким образом, Array Map возвращает новый массив, содержащий изменения, внесенные в исходный массив, который был повторен.
Допустим, в нашем магазине цены на книги выросли, возможно, еще на 200 долларов США. Нам потребуется обновить наши данные или API, чтобы отразить новое изменение цен на все книги. Мы можем сделать это с помощью карты массива.
Мы перебираем каждую книгу в нашем массиве и добавляем к цене 200 долларов США.
Синтаксис для карты массива:
массив .map (функция (currentArrayElement, index, array), thisElement).

Имейте в виду, что карта массива возвращает новый результат массива, в то время как исходный массив остается нетронутым (это называется неизменяемой операцией).
В показанном примере я использую сокращенную запись функции массива ES5.
Вы также можете вернуть новый массив, полученный в результате сопоставления с исходной коллекцией.
Следующий пример продемонстрирует именно это.
Здесь мы хотим дать скидку 20% на все книги дороже 100 грн.

Здесь мы не сохраняем результат Array Map в новом массиве, скорее, мы возвращаем значения обратно в наш исходный массив.

3. Фильтр массива
Следующим в списке идет фильтр массива. Это удобный метод массива, который можно держать в заднем кармане.
Используйте фильтр массива, когда вам нужны определенные элементы из вашего массива.

Синтаксис для фильтра массива.
array .filter (function (currentArrayElement, index, array), thisElement).
или
array .filter ((currentArrayElement, index, array) = ›{…}, thisElement) одинаковы. Во втором синтаксисе мы используем сокращение функции стрелки. То же самое относится и к другому методу массива, который мы рассмотрели.
Фильтр массива вернет новый массив элементов в исходном массиве, который соответствует указанному условию. Здесь условие, если цена книги ›100 долларов США. Любой элемент массива, который возвращает истину для этого условия, собирается в новый массив. Думайте об этом как о реальном фильтре, только элементы (элементы), которые мы хотим, передаются / фильтруются в новый массив.

В результате вы можете увидеть только «Призыв к милосердию» и «Слепота сердца», цена которого превышает 100 долларов США. Итак, эти два собираются в новый массив.
Таким образом, когда вы намереваетесь возвращать определенные значения на основе условия, используйте фильтр массива.

4. Поиск по массиву

Поиск массива получает определенный элемент в вашем массиве. Если элемент не найден, возвращается undefined. Find может возвращать любое значение, число, строку или объект.
Find аналогичен Filter, который только что обсуждался выше, однако find возвращает только первый элемент, который соответствует условию, а Filter возвращает все элементы, которые удовлетворяют условию . Итак, в то время как Find возвращает только один элемент, Filter может возвращать многие.

Синтаксис для поиска по массиву.
array .find (function (currentArrayElement, index, array), thisElement).
или
array .find ((currentArrayElement, index, array) = ›{…}, thisElement).
Объяснение и структура синтаксиса для Find такие же, как и для других выше.
Давайте рассмотрим пример кода.

В большинстве случаев вы будете использовать фильтр для манипуляций с массивом по сравнению с поиском, так как вы не обязательно будете искать первый элемент, который пройдет ваш тест, или вы не будете знать заранее, какой элемент первым пройдет условие. Найти пригодится, когда вы хотите получить элементную базу на вводе пользователя, скажем, пользователь нажимает кнопку, которая отправляет id = 5, чтобы найти эти данные / запись. Вы можете делать data.find(item =>item.id == id); Здесь id равен 5 от ввода пользователя (щелчок или выбор).

5. Array Some
Что делает Array Some? Array Some возвращает логическое значение (истина или ложь), если какой-либо элемент в вашем массиве проходит проверку. Используйте Array Some, если вы хотите узнать, соответствует ли какой-либо элемент в вашей коллекции массивов условию. Array Some - это хороший способ проверить, соответствует ли какой-либо элемент вашего массива условию, прежде чем продолжить операцию. Из коллекции книг, которую мы использовали, вы можете проверить, подходит ли какая-либо книга для получения скидки, прежде чем предлагать пользователям применить купон на скидку.
Синтаксис для Array Some.
массив .some (function (currentArrayElement, index, array), thisElement).
или
array .some ( (currentArrayElement, index, array) = ›{…}, thisElement).

6. Array Every
Array Every похож на Array Some, однако Array Every проверяет, все ли элементы в вашем массиве соответствуют определенному условию или проходят проверку.
Синтаксис для Array Every.
array .every (function (currentArrayElement, index, array), thisElement) .
или
массив .every ((currentArrayElement, index, array) = ›{…}, thisElement).

7. Array Reduce
Мне пришлось оставить это напоследок. Array Reduce немного сложнее, чем другие. Но не волнуйтесь, просто следуйте, и вы это поймете.
Array Reduce, как следует из названия, имеет эффект уменьшения. Он сокращает массив до одного значения.
Array reduce удобно, когда вы хотите выполнить математическое выражение или уравнение.
Синтаксис для Array Reduce.
array .reduce (function ( аккумулятор , currentValue, currentIndex, массив), начальное значение).
или
массив .reduce (( аккумулятор , currentValue, currentIndex, array) = ›{…}, InitialValue).
Для массива учеников: let pupils = [2, 3, 1, 3];
Если бы мы хотели найти сумму, мы бы сложили все значения массива. Сумма будет 9 (2 + 3 + 1 + 3).
Вот как мы получили сумму:
Мы взяли первое число (2) и добавили следующее число (3), затем мы добавили следующее (1), затем следующее, затем следующее, пока мы исчерпали элементы. Таким образом, мы смогли reduce четыре элемента в массиве учеников к одному единственному значению (9).

2 (начальное или первое значение)
2 (предыдущий) + 3 (следующий) = 5 (аккумулятор)
5 (предыдущий) + 1 (следующий) = 6 (соответственно)
6 (пред.) + 3 (след.) = 9 (соотв.)

Это простое арифметическое право, просто сложение чисел. Но также обратите внимание, что умножение и вычитание также могут уменьшить число до единственного значения. Если вы помните, большинство математических уравнений / формул в то время приводили к одному значению. Когда вы получили это единственное значение, вы бы сказали, что получили правильный ответ. Таким образом, Array Reduce можно применить к любому математическому уравнению. Это простые варианты использования Array Reduce.
Точно так же массив нашего ученика может быть уменьшен следующим образом: 2 * 3 * 1 * 3 = 18. По сути, именно так работает Array Reduce.
первым аргументом для Array Reduce является обратный вызов с некоторыми параметрами.
-accumulator (обязательный): накапливает значения массива. Он возвращается как предыдущее значение для следующей итерации. Как и в приведенном выше примере, 5 - это аккумулятор, мы могли видеть, что 5 также появляется в следующей строке как предыдущее значение, а 1 - следующее значение, 6 становится новым аккумулятором. В этом весь смысл.
-currentValue (обязательно): текущее значение или элемент массива.
-index (необязательно): текущий индекс текущего элемента, который используется редко.
-array: массив был перебран.
Второй аргумент - это initialValue. По умолчанию это первый элемент массива. Иногда бывает полезно указать это значение или установить его равным нулю.

Применение Array Reduce к массиву нашего ученика
let pupils = [2, 3, 1, 3];
let sum = pupils.reduce((acc, next) => {console.log(`acc: ${acc}, next: ${next}`);
return acc + next;
});
console.log(sum);

// console result

“acc: 2, next: 3”
"acc: 5, next: 1"
"acc: 6, next: 3"
9

аналогично
let multiply = pupils.reduce((acc, next) => {
console.log(`prev: ${acc}, next: ${next}`);
return acc * next;
},1);
console.log(multiply);

// console result:

"prev: 1, next: 2"
"prev: 2, next: 3"
"prev: 6, next: 1"
"prev: 6, next: 3"
18

Теперь давайте просуммируем стоимость нашей коллекции книг с помощью Array Reduce.

Примечание. вы можете использовать prev. (предыдущий) для соотв. (накопитель), и это все равно будет хорошо, поскольку роль динамическая - соотв. становится пред. на следующей итерации.
Обратите внимание, что в этом примере мы должны указать начальное значение как 0, чтобы он не выбирал первый элемент в массиве, который является объектом. Во втором примере вы можете видеть, что когда начальное значение не указано, он выбирает первый элемент массива, который является объектом, и, поскольку он не может его добавить, он объединяется до последнего элемента.
Вот и все. , а пока, ребята, спасибо за чтение. Надеюсь, вам понравится статья. Пожалуйста, сделайте добро, добавив те, которые вам пригодились. Комментарии и отзывы приветствуются.