вступление

В этом блоге мы разберемся, как map , filter а также reduce работать, написав для них полифилы.

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


карта

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

Параметры

Возвращаемое значение

const array = [1, 2, 3, 4];

// pass a function to map
const mapResult = array.map(x => x * 2);

console.log(mapResult);
// output: Array [2, 4, 6, 8]
Войти в полноэкранный режим

Выйти из полноэкранного режима

Давайте разберемся в этом, написав полифилл для map.

Array.prototype.myMap = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

                newArray.push(callbackFunction(this[i], i, this))

        } 
    return newArray
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


фильтр

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

Параметры

Возвращаемое значение

const array = [1, 2, 3, 4];

// pass a function to filter
const filterResult = array.map(x => x > 2);

console.log(filterResult);
// output: Array [1,2]
Войти в полноэкранный режим

Выйти из полноэкранного режима

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
Войти в полноэкранный режим

Выйти из полноэкранного режима

Давайте разберемся в этом, написав полифилл для filter

Array.prototype.myFilter = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

              if(callbackFunction(this[i], i, this)) {
                        newArray.push(this[i])
                }

        } 

   return newArray
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


уменьшать

reduce() метод выполняет функцию обратного вызова «reducer» для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления предыдущего элемента. Конечным результатом выполнения редуктора для всех элементов массива является одно значение.

При первом запуске обратного вызова нет «возвращаемого значения предыдущего вычисления». Если указано, вместо него может быть использовано начальное значение. В противном случае элемент массива с индексом 0 используется в качестве начального значения, и итерация начинается со следующего элемента (индекс 1 вместо индекса 0).

Давайте поймем это, добавив массив чисел

const array = [1, 2, 3, 4];

const initialValue = 0;

const reducer = (previousValue, currentValue) => previousValue + currentValue

// 0 + 1 + 2 + 3 + 4
const sum = array.reduce(reducer,initialValue);

console.log(sum);
// expected output: 10
Войти в полноэкранный режим

Выйти из полноэкранного режима

Параметры

Возвращаемое значение

Давайте разберемся в этом, написав полифилл для reduce

Array.prototype.myReduce = function (reducerCallback, initialValue) {
        let accumulator = initialValue 

        for ( let i = 0; i < this.length; i++ ) {

              accumulator = accumulator ? reducerCallback(accumulator, this[i], i, this) : this[0]

        } 

   return accumulator
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


карта против forEach

Оба map а также forEach — это методы, которые позволяют нам пройтись по массиву и выполнить функцию обратного вызова.

Основное различие между map а также forEach заключается в том, что карта возвращает массив, а forEach — нет.

const array = [1,2,3,4,5]

const mapResult = array.map(x => x + 1)

const forEachResult = array.forEach(x => x + 1)

console.log(mapResult) // [2,3,4,5,6]

console.log(forEachResult) // undefined 

Войти в полноэкранный режим

Выйти из полноэкранного режима

Функция обратного вызова forEach все еще работает, но она просто ничего не возвращает, она возвращает undefined.


вывод

  • map() метод создает и возвращает новый массив заполняется результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.
  • filter()метод создает новый массив, заполненный элементами, которые передают предоставленный обратный вызов. Он создает поверхностную копию части заданного массива, отфильтрованную только до тех элементов из заданного массива, которые проходят тест, реализованный предоставленной функцией обратного вызова.
  • reduce() метод выполняет функцию обратного вызова «reducer» для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления предыдущего элемента. Конечным результатом выполнения редуктора для всех элементов массива является одно значение.
  • Оба map а также forEach — это методы, которые позволяют нам пройтись по массиву и выполнить функцию обратного вызова. Основное различие между map а также forEach заключается в том, что карта возвращает массив, а forEach — нет.