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

Это когда-нибудь случалось с вами?

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

Когда мы были студентами-информатиками, наши учителя учили нас тому, как вы перебираете массив.

let array = ['How','is','your','thesis','going?'];
for(let i = 0; i < array.length; i++){  
   console.log(array[i]);
}
// It will print out "How is your thesis going?"
// not well thank you for asking.

И в цикле for нет ничего плохого. Но когда вы потратили долгие часы на программирование своего проекта, вы (или лично я) устаёте писать и начинаете думать: «Есть ли способ сократить это?».

Есть конечно!

Javascript предоставляет нам встроенные функции работы с массивами, такие как map, filter и reduce с начала 2011 года. Вот некоторые из встроенных функций работы с массивами, которые мне нравятся. Примечание. Я буду писать на Javascript ES6.

.карта()

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

let cashMoney = [100, 200, 300, 400, 500];
let cashMoneyAfterTax = [];
for(let i = 0; i < cashMoney.length; i++){
  cashMoneyAfterTax.push(cashMoney[i]/2);
}
console.log(cashMoneyAfterTax);
// This will log an array of [50, 100, 150, 200, 250];

Более простой и современный способ сделать это будет выглядеть так:

let cashMoney = [100, 200, 300, 400, 500];
let cashMoneyAfterTax = cashMoney.map(item => {
   return item / 2;
});
//This will return an array of [50, 100, 150, 200, 250]

Код означает, что мы берем массив «cashMoney» и вызываем функцию .map(), которая принимает параметр с именем «item», который является отдельным элементом в массиве «cashMoney», и возвращает или «отправляет» в переменную массива «cashMoneyAfterTax» после деления на 2.

Другой сложный пример с использованием объектов будет выглядеть так:

let jeremy = [
   { id: 0, game: 'capture the flag', cashPrize: 100 },
   { id: 1, game: 'capture the thief', cashPrize: 200 },
   { id: 2, game: 'capture the heart', cashPrize: 300 },
   { id: 3, game: 'capture the butterfly', cashPrize: 400 },
   { id: 4, game: 'capture the anything lah', cashPrize: 500 },
];
let jeremyDeductedPrize = jeremy.map((game)=> {
   return game.cashPrize / 2;
})
// This will also retrun an array called jeremyDeductedPrize with 
// the value of [50, 100, 150, 250]
// Poor Jeremy...

.фильтр()

Допустим, по какой-то причине ты достаточно злой, чтобы дать Джереми денежный приз только в том случае, если он меньше 300 долларов. Таким образом, традиционный способ сделать это будет выглядеть так:

let cashMoney = [100, 200, 300, 400, 500];
let badLuckJeremy = [];
for(let i = 0; i < cashMoney.length; i++){
  if(cashMoney[i] < 300){
    badLuckJeremy.push(cashMoney[i]);
  }
}
console.log(badLuckJeremy);
// This will log an array of [100, 200]

Более современный подход будет делать это следующим образом:

let cashMoney = [100, 200, 300, 400, 500];
let badLuckJeremy = cashMoney.filter(item=> {
   return item < 300 
});
// You get it at this point

если map позволяет вам манипулировать данными каждого элемента вашего массива, возвращая функцию ( item / 2 ), filter позволяет вам фильтровать массив, возвращая условный оператор ( item ‹ 300 ).

Более сложный пример с использованием объектов будет таким:

let jeremy = [
   { id: 0, game: 'capture the flag', cashPrize: 100 },
   { id: 1, game: 'capture the thief', cashPrize: 200 },
   { id: 2, game: 'capture the heart', cashPrize: 300 },
   { id: 3, game: 'capture the butterfly', cashPrize: 400 },
   { id: 4, game: 'capture the anything lah', cashPrize: 500 },
];
let jeremyDeductedPrize = jeremy.filter(game => {
   return game.cashPrize < 300;
})
// this will return an array of objects of jeremy's games he's won 
// that the cashPrize is below 300. 
//
// So it returns 
// [ 
//  { id: 0, game: 'capture the flag', cashPrize: 100 },
//  { id: 1, game: 'capture the thief', cashPrize: 200 }
// ],

.уменьшать()

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

let cashMoney = [100, 200, 300, 400, 500];
let totalCashMoney = 0;
for(let i = 0; i < cashMoney.length; i++){
  totalCashMoney = totalCashMoney + cashMoney[i];
}
// it will return the totalCashMoney which is 1500

Более современный подход был бы таким

let cashMoney = [100, 200, 300, 400, 500];
let totalCashMoney = cashMoney.reduce((totalCash, item) => {
   return totalCash + item
}, 0);

Так что reduce принимает два параметра: аккумулятор, который я назвал «totalCash», и элемент массива, который я назвал «item». Затем я возвращаю функцию, которая накапливает общую сумму массива (totalCash + item). По умолчанию, если мы не установим начальное значение, начальным значением «totalCash» будет первый элемент массива, в данном случае это будет 100, а элемент примет начальное значение второго элемента в массиве. массив, который равен 200. Причина, по которой я поставил 0 в конце функции сокращения, заключается в том, чтобы установить начальное значение «totalCash» равным 0.

Другой сложный пример будет таким:

let jeremy = [
   { id: 0, game: 'capture the flag', cashPrize: 100 },
   { id: 1, game: 'capture the thief', cashPrize: 200 },
   { id: 2, game: 'capture the heart', cashPrize: 300 },
   { id: 3, game: 'capture the butterfly', cashPrize: 400 },
   { id: 4, game: 'capture the anything lah', cashPrize: 500 },
];
let jeremyTotalCashPrize = 
  jeremy.reduce((totalCash, game) => {
     return totalCash + game.cashPrize
  }, 0);
// This will return jeremy's total cash prize which is 1500

Вот в принципе!

Обязательно попробуйте сами и продолжайте кодить!

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