Объяснение методов фильтрации, сопоставления и уменьшения массива JavaScript

Эй, друзья! 😎 Очень рад написать вторую статью о JavaScript после получения потрясающего ответа от таинственного «это в JavaScript». У меня уже есть множество тем в моих todos, чтобы написать о Web, JavaScript, CSS, HTML5 и Reactjs и планируется публиковать каждую неделю или две. Так что просто Подпишитесь на меня и всегда будьте в курсе всех предстоящих чтений. Итак, давайте начнем. 👍

Что такое массив в JavaScript?

В отличие от других языков, JavaScript немного продвинулся в плане массивов. В JavaScript у нас могут быть массивы разнородных типов, что означает, что мы можем хранить многотипные данные в одном массиве Объект.

//Homogeneous
let fruits = [‘Apple’,’Orange’,’Mango’];
//heterogeneous
let data = [
  true, 
  ‘1’, 
  27, 
  [9,8,7],
  {name:’Ahmed Murtaza’}
];

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

Фильтр()

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

var original = [2,4,6,8,10];
var result = [];
for(var i=0;i<original .length;i++){
  if(original [i] % 3 === 0){
    result.push(original [i]);
  }
}
console.log(result); //filtered output

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

let original = [2,4,6,8,10];
//ES5
let result = original.filter(function(value){
  return value % 3 === 0;
})
//ES6
result = original.filter(value => value % 3 ===0);

Карта()

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

Старая практика

var ones = [1,2,3,4,5,6,7,8,9];
var twos = [];
for(var i=0;i<ones.length;i++){
  twos.push(ones[i]*2);
}

Новый подход

const ones = [1,2,3,4,5,6,7,8,9];
const twos = ones.map(value => value * 2);
console.log(ones); //[1,2,3,4,5,6,7,8,9];
console.log(twos); //[2,4,6,8,10,12,14,16,18];

Уменьшать()

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

const values = [2,4,6,8,10];
const output = values.reduce(function(acc, ele){
  return acc + ele;
});
//output
30

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

const values = [2,4,6,8,10];
const calculateMax = (acc,ele) => {
 return Math.max(acc, ele);
}
const calculateMin = (acc,ele) => {
 return Math.min(acc, ele);
}
console.log(values.reduce(calculateMax)); //10
console.log(values.reduce(calculateMin)); //2

До сих пор мы рассмотрели все три метода, которые не только очень популярны в мире JavaScript, но и чрезвычайно важны. Эти методы также известны как Функции высшего порядка, которые принимают функцию в качестве параметра и возвращают ее измененную копию функции. В ближайшие недели я подробно расскажу вам и о функциях высшего порядка.

На этом пока все 😉, хотелось бы услышать ваши мысли и предложения ниже 👇. Оставайтесь с нами для более предстоящих чтений для вас. 👋

Объяснение методов фильтрации, сопоставления и уменьшения массива JavaScript