Здесь мы рассмотрим, как нам нужно использовать функции map, forEach, filter, find и findIndex в нужных местах.

ECMAScript 6, также называемый ES6 или ECMAScript 2015, представляет собой стандарт спецификации, в котором представлены некоторые новые интересные функции языка программирования JavaScript, предназначенные для того, чтобы сделать ваш код более современным, читабельным и универсальным, особенно при создании крупномасштабных приложений.

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

1. Для каждого

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

const array = [10, 20, 30, 40, 50]
const result = array.forEach( (number, index) => {
  console.log( "[" + index + "] =" + number)
})
console.log("final result : " + result)

Вывод:

/* Loop through the array */
[0] = 10
[1] = 20
[2] = 30
[3] = 40
[4] = 50
/* finally print the value of the result */
final result : undefined

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

Давайте попробуем тот же пример с оператором return внутри цикла, чтобы проверить результат.

const array = [10, 20, 30, 40, 50]
const result = array.forEach( (number, index) => {
  console.log( "[" + index + "] =" + number)
  return number;
})
console.log("final result : " + result)

Вывод :

/* Loop through the array */
[0] = 10
[1] = 20
[2] = 30
[3] = 40
[4] = 50
/* finally print the value of the result */
final result : undefined

Все равно результат тот же. Это означает, что даже если попытаться вернуть какое-то значение внутри цикла forEach, это невозможно. В этом примере следует отметить еще одну вещь. Дело в том, что оператор return не прерывает цикл. Цикл выполняется до конца массива.

Это означает, что функции, которые возвращают значение при переборе массива в цикле, не будут работать с forEach. Посмотрите на приведенный ниже пример.

const array = [10, 20, 30, 40, 50]
const findEqual = (array, number) => {
    array.forEach(item => {
        if(item === number ){
            return true;
        }
    })
}
const result = findEqual(array, 10)
console.log(result);

вывод:

undefined

2. карта

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

Давайте попробуем это на примере кода.

const array = [10, 20, 30, 40, 50]
const result = array.map( (number, index) => {
  console.log( "[" + index + "] =" + number)
})
console.log(result)

вывод

/* Loop through the array */
[0] =10
[1] =20
[2] =30
[3] =40
[4] =50
/* finally print the value of the result */
[ undefined, undefined, undefined, undefined, undefined ]

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

Итак, давайте вернем значения, изменяя их на каждой итерации.

const array = [10, 20, 30, 40, 50]
const result = array.map( (number, index) => {
  console.log( "[" + index + "] =" + number)
  return number + 100
})
console.log(result)

Вывод:

/* Loop through the array */
[0] =10
[1] =20
[2] =30
[3] =40
[4] =50
/* finally print the value of the result */
[ 110, 120, 130, 140, 150 ]

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

Давайте попробуем другой пример, где нам нужно проверить, что значения внутри массива являются «четными». Если даже значение равно, поставьте «истину» в соответствующий индекс в новом массиве. Если значение нечетное, добавьте false в массив результатов.

const array = [10, 23, 30, 41, 50]
const result = array.map( (number, index) => {
  if(number % 2 === 0){
   return true;
  }else {
   return false;
  }
})
console.log(result)

Вывод :

[true, false, true, false, true]

3. фильтр

Основная идея словесного фильтра заключается в выборе одного или нескольких элементов из набора на основе условия.

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

Этот метод фильтрации ES6 работает одинаково? Давайте разберемся.

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

const array = [10, 20, 30, 40, 50]
const result = array.filter(item => {
    if(item > 30){
        return true;
    }else {
        return false
    }
})
console.log(result)

Вывод :

[ 40, 50 ]

Здорово ! функция фильтра работает так, как мы и ожидали. Но нужно ли нам столько строк кода для фильтрации этого массива?

есть ли более простой способ, чем использовать весь блок if else?

да мы можем !. Мы можем сократить всю эту функцию фильтра до одной строки кода.

const result = array.filter(item => item > 30)

Здесь, если элемент больше 30, он возвращает true, иначе возвращает false. То же самое, что и блок if else!

4. найти

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

const array = [10, 20, 30, 40, 50]
const result = array.find(item => item > 30)
console.log(result)

Вывод :

40

Даже если 50 больше 30, метод find выводит только первый элемент (40), который удовлетворяет заданному условию.

5. найтииндекс

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

const array = [10, 20, 30, 40, 50]
const result = array.findIndex(item => item > 30)
console.log(result)

Вывод:

3

Применение этих функций в нужных местах уменьшит ненужные сложности программы.

Если вы новичок и только начинаете работать с javascript, это определенно будет одним из ваших вопросов на собеседовании.

напишите свои проблемы в разделе комментариев….

следуйте за мной для получения дополнительных статей, связанных с javascript!