Написание собственных методов Reduce, Filter и Map на JavaScript

Эта статья навеяна одним из JavaScript Mock-интервью на YouTube.

Вопрос был такой:

Напишите функцию print() так, чтобы [1, 2].print() выводила 1,2 , когда print() вызывается в массиве .

Этот вопрос вызвал у меня любопытство, и я исследовал похожие вопросы того же типа.

Именно этим я и собираюсь поделиться в этой статье.

Прежде чем начать, давайте сначала разберемся с основами.

Основная информация, которая нам нужна:

map() , filter()и reduce() методы вызываются в массивах и записываются в классе Array в JavaScript.

Давайте запомним это, прежде чем продолжить.

Хорошо. Один метод за раз.

Создание собственного map() метода

Давайте посмотрим на метод map().

var a=[5,2,6,8];
var r = a.map(item => item*2);          // map() is invoked here
console.log(r);

Результат: Array [10, 4, 12, 16]

Что именно делает map()method?

map()method выполняет операцию и возвращает результат в виде массива.

Хорошо.

Вы можете показать мне синтаксис метода?

Конечно.

Ниже приведен синтаксис map()method от MDN:

let new_array = arr.map (обратный вызов функции (currentValue [, index [, array]]) {
// возвращает элемент для new_array
} [, thisArg])

В синтаксисе сказано: callback функция передана методу map() . Параметры для выполнения операции передаются в callback function.

Хорошо.

С чего начать, используя собственный map()метод?

С объявлением нашего собственного myMap() метода.

Array.prototype.myMap = function(callback){} // declaring map()method.

Мы назвали наш метод myMap() , чтобы он не конфликтовал с map() existing методом.

Это callback passed в функции указывает, что мы должны вызвать callback функцию когда-нибудь в будущем. Это может быть любое имя по вашему выбору, но для простоты понимания мы выберем callback .

Что нужно сделать, чтобы начать писать собственный map() метод?

Четыре простых шага:

  1. Объявите массив, в котором хранятся результаты.
  2. Выполнить петлю от 1 до n. (n - длина массива).
  3. Поместите результаты в массив, объявленный на шаге (1).
  4. Вернуть массив результатов.

Попробуем реализовать это сейчас.

Array.prototype.myMap=function(callback){
  
 var arr = [];                       // step 1   
 
 for(let i=0; i<this.length; i++)    // step 2
 {
  arr.push(callback(this[i]));       // step 3
 }
 
 return arr;                         // step 4
};

Что такое this?

this - ключевое слово в JavaScript. this дает нам массив, который вызвал метод myMap().

Давайте посмотрим на наш myMap() метод с выходными данными.

Мы успешно создали и применили наш собственный map() method. myMap() работает точно так же.

Что дальше?

Написание собственного filter() метода

После написания нашего собственного map()метода давайте попробуем наш собственный filter() метод.

Что делает filter() method?

Давайте посмотрим на filter() метод.

var a=[5,21,61,8,1];
var result = a.filter(i => i>20);
console.log(result);

Результат: Массив [21, 16]

Что делает filter() method?

filter() метод проходит тест и возвращает результаты в виде массива.

А каков синтаксис filter() метода?

Вот синтаксис от MDN:

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

Как и myMap()method. callback передается методу , и возвращается массив.

Все, что мы здесь сделали, это выполнили операцию, и метод filter() возвращает массив, содержащий все элементы, прошедшие проверку.

Каркас метода:

Array.prototype.myFilter=function(callback){}

Мы напишем функцию в четыре этапа:

  1. Объявите массив, в котором хранятся результаты.
  2. Выполните операцию.
  3. Сохраните результат в массиве, который сохраняет результат.
  4. Вернуть массив результатов.

Теперь давайте выполним все шаги

Array.prototype.myFilter = function(callback){
 
 var arr = [];                         // step 1
 
 for(let i=0; i<this.length; i++)
 {
  if(callback(this[i]) == true)        // step 2
  {
   arr.push(this[i]);                  // step 3
  }
  
 }
 
 return arr;                           // step 4
}

Как мы будем вызывать этот метод и что будет на выходе?

Вот

this дает нам массив, а callback - это функция, переданная для последующего вызова.

Мы проверяем с помощью if условия, выполняется ли условие . Мы собираем только те элементы в массиве, которые проходят проверку.

Написание собственного метода reduce ()

Давайте посмотрим на reduce() метод:

var arr=[5,21,61,8,1];
var result = arr.reduce((acc, item) => acc+item);
console.log(result);

Что на самом деле делает reduce() method?

reduce() method добавляет все элементы в массив и возвращает сумму.

Давайте посмотрим на синтаксис MDN:

arr.reduce (callback (аккумулятор, currentValue, [, index [, array]]) [, initialValue])

Метод reduce () имеет два параметра: аккумулятор и значение . Накопитель суммирует и накапливает результаты всех элементов в массиве.

Как начать с нашего собственного reduce() метода?

С объявлением нашей функции:

Array.prototype.myReduce = function(callback)(){}

Затем выполните следующие четыре простых шага:

  1. Объявить аккумулятор
  2. Выполните цикл for от 1 до n
  3. Накопите сумму всех элементов в массиве в аккумуляторе на шаге (1)
  4. Вернуть аккумулятор

Посмотрим, как мы это сделаем.

Array.prototype.myReduce = function(callback){
     var a =0;                              // Step 1
     for(let i=0; i<this.length; i++)       // Step 2
     {
         callback(a = a+this[i])            // Step 3
     }
      
     return a;                              // Step 4
}

Это то, что мы получаем, когда выполняем все шаги . var a - аккумулятор. Мы вызываем функцию callback при запуске цикла for. Все элементы массива доступны в this ключевом слове .

Теперь давайте напишем код и посмотрим на выполнение

Этот myReduce() работает так же, как и оригинальный reduce()метод. И дает нам правильный результат.

Я коснулся основ и написал эту статью в меру своих знаний. Сообщите мне в случае каких-либо ошибок и упущений. Спасибо за внимание.