Примечание: большинство статей, которые я пишу, в ближайшем будущем станут для меня напоминанием, если я когда-нибудь забуду, что делает большинство функций. Но в любом случае, если вы найдете это полезным, я рад.
Это когда-нибудь случалось с вами?
Однажды вы программируете приложение 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
Вот в принципе!
Обязательно попробуйте сами и продолжайте кодить!
Примечание. При создании этой статьи ни один Джереми не пострадал