карта
Эта функция возвращает новый массив с функцией обратного вызова, действующей на каждый элемент в массиве. Карта запустит функцию обратного вызова, которая принимает 3 аргумента. Первый - это «текущий элемент» в массиве (это обязательный аргумент), второй - «индекс» в массиве текущего элемента (это необязательный аргумент), наконец, последний аргумент в обратном вызове - весь сам массив (это тоже необязательный аргумент).
Вот пример созданного мной массива объектов, который содержит несколько моих любимых фильмов (не судите меня!), Каждый со своим названием фильма и именами актрис / актеров, которые в них снялись.
var favouriteMovies = [
{'name':'aliens','mainStar':'Sigourney Weaver'},
{'name':'Predator','mainStar':'Arnold Schwarzenneger'},
{'name':'Godzilla','mainStar':'Bryan Cranston'},
{'name':'Blade','mainStar':'Wesley Snipes'},
{'name':'Prometheus','mainStar':'Noomi Rapace'}
]
В этом примере я просто извлечу имя фильма из объекта массивов с помощью карты, как показано ниже.
var movieName = favouriteMovies.map(function(currItem){return currItem.name});
Как видите, я создал переменную с именем movieName и установил для нее значение map над массивом favouriteMovies с одним определенным параметром (обязательный параметр, который представляет текущий элемент в массиве), и я возвращаю ключ name из массива favouriteMovies, скопируйте и вставьте как функцию карты, так и объект массивов в редактор кода, такой как https://playcode.io, и посмотрите на результат или создайте свой собственный :).
Ниже результат с консоли.
Однако вы можете написать свою собственную функцию и вставить ее в параметр функции карты, как показано ниже.
Это даст тот же результат, что и выше, но это просто хороший «синтаксический сахар».
Фильтр
Фильтр делает именно то, что написано на банке, он принимает массив и отфильтровывает элементы массива в зависимости от заданных вами критериев, то есть числа больше 20, строки, не равные «давиду» и т. Д. Фильтр работает так же, как map в том смысле, что он принимает обратный вызов в качестве первого аргумента, и этот обратный вызов имеет 3 аргумента (первый - текущий элемент, второй - текущий индекс, третий - весь массив), фильтр запустит обратный вызов для каждого элемента в массиве и вернет новый массив, содержащий только элементы, которые вернули истину для критериев обратного вызова, пример ниже.
var icecreams = [
{'flavour':'chocolate','rating':'5'},
{'flavour':'vanilla','rating':'9'},
{'flavour':'strawberry','rating':'8'},
{'flavour':'salted caramel','rating':'9'}
]
var filterIcecreams = icecreams.filter(function(currItem){
return currItem.rating >8
})
Как видно из вышеизложенного, мы создали массив объектов, относящихся к вкусу мороженого, а также к его рейтингу. Затем я выполнил операцию фильтрации с массивом, чтобы возвращать только мороженое с рейтингом выше 8. Ниже вы можете увидеть результат со вкусами «ваниль» и «соленая карамель».
ПРИМЕЧАНИЕ. При использовании map, reduce и filter следует помнить, что в функции обратного вызова необходимо использовать ключевое слово return, иначе ваша переменная вернет undefined.
Уменьшать
Reduce, как следует из названия, уменьшает, однако, говоря более профессионально, функция reduce принимает все элементы массива и «сокращает» их до одного значения, кроме того, reduce отличается от map и filter тем, что поддерживает 4 аргумента внутри его обратный вызов (первое - текущее значение, второе - предыдущее значение, третье - текущий индекс и, наконец, четвертое - это массив, который вы перебираете в цикле). Reduce дает вам возможность установить начальное предыдущее значение (что вы можете сделать, записав запятую, а затем значение после закрывающего «}»), поскольку на первой итерации цикла предыдущего значения нет, и это является причиной того, что почему вы можете передать начальное значение для уменьшения. В основном сокращение используется для суммирования списка чисел.
var myNumbers = [9,8,7,6,5,4,3,2,1];
var sumOfMyNumbers = myNumbers.reduce(function(previous,current,myIndex,myArray){
console.log(previous)
console.log(current)
return previous+current
},0);
console.log(sumOfMyNumbers)
Как вы можете видеть из приведенного выше примера, у меня есть массив чисел и я возвращаю сумму предыдущего значения, добавляемого к текущему значению, кроме того, я также установил начальное значение 0, поэтому уменьшение начнется с 0. первое значение «previous» равно 0, а первое значение «current» - 9, однако, если я изменю начальное значение на 5, а не на 0, то первое «предыдущее» значение будет 5, а общая сумма станет 50. , а не 45, потому что я сказал, чтобы сокращение начиналось с 5, а не с 0. Вы также можете уменьшить, чтобы найти среднее значение группы чисел.
В целом, эти 3 метода - отличный способ реализовать операции со списками в JavaScript, однако этот учебник является базовым примером этого и реализует их с использованием ES5, а не ES6, с ES6 вы можете использовать больше сокращенных функций, таких как функции стрелок.
Надеюсь, вам понравилась эта статья, я буду продолжать учиться и делиться своими знаниями, мы будем благодарны за любые отзывы :)
