ECMAScript определяет 5 методов итерации для массивов. Каждый метод получает два параметра: функцию, которая будет запускаться с каждым элементом в качестве аргумента, и необязательный объект области действия в качестве контекста, в котором выполняется функция (влияющий на значение this в функции). Функция, передаваемая каждому методу, получает три параметра: элемент массива, индекс элемента и сам массив. В зависимости от конкретного метода результаты этой функции могут влиять или не влиять на возвращаемое значение метода. Ниже приведены 5 методов итерации массива.
1. Метод карты: запускает переданную функцию для каждого элемента массива и возвращает массив, состоящий из результатов каждого вызова функции.
Его также можно понимать как: после выполнения специальной обработки каждого элемента массива вернуть новый массив. .
Например:
прежде чем упрощать массив цен:
пусть цены=[50,80,90]
цены=prices.map((item,index)=>{
вернуть товар+"юань"
})
После сокращения
console.log(prices):
пусть цена=[50,80,120] //Добавить «юань» после цены за единицу цена=цена.map(item=>item+"юань") console.log(price)//Вывод: ['50 юаней', '80 юаней', '90 юаней']
Сценарий его применения, например: Апплет WeChat Douban Film Review
использует метод карты для замены xxx на www
replace( ) метод Используется для замены некоторых символов другими символами в строке или замены подстроки, соответствующей регулярному выражению.
let Movies=[{id:1,name:"Побег из Шоушенка",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"Побег из Шоушенка",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"Побег из Шоушенка",imgUrl:"http://xxx.douban.com/1.jpg"}]
фильмы=movies.map(item=>{
item.imgUrl=item.imgUrl.replace("xxx","www")
возврат товара
})
console.log(movies) 2. Метод фильтра: запустите переданную функцию для каждого элемента массива. Элементы, которые функция возвращает true, сформируют массив и вернут результат.
Это также можно понимать так: отфильтровать элементы массива, соответствующие требованиям, и вернуть новый массив
.
пусть arr=scores.filter(item=>{
если(элемент>60){
вернуть истину
}
})
console.log(arr)//Вывод такой, как показано ниже: Вывод такой, как показано ниже, и отфильтровывает массивы меньше 60.
После сокращения:
пусть оценки=[80,59,10,55,90,88] пусть arr=scores.filter(item=>item>=60) console.log(arr)//(3) [80, 90, 88]
В сценарии применения вы можете разместить массив названий городов, а затем искать по ключевым словам. Это только для тех случаев, когда данных мало. Я буду публиковать. книга об этом примере позже. Сценарии применения системы управления будут включать поиск по ключевым словам для справки.
Некоторые переводятся на английский как некоторые, а каждый переводится как все, каждый, поэтому метод some возвращает true, пока один из них является истинным. Напротив, метод Every(). Все методы должны вернуть true, прежде чем он сможет вернуть true, даже если есть одно значение false, будет возвращено значение false.
В процессе оценки массива оценивается, соответствует ли каждый элемент целого
некоторому методу: один true и. true, если один из них соответствует, он вернет true.
каждый метод: один false является ложным, пока один из них не соответствует требованиям, он вернет false
//позволим оценить баллы всех учеников в классе, чтобы узнать, все ли сдали экзамен. let Scores=[80,49,12 ,50,69 ]
пусть result=scores.every(item=>item>=60)
console.log(result)//Return false Не все пройдены. Сценарии использования: прежде чем внешний валидатор отправит запрос AJAX, перед его отправкой обычно необходимо пройти все проверки. статья о примерах кода. Внешний валидатор данных.
5. Метод сокращения: ECMAScript предоставляет два метода слияния для массивов: уменьшить() и уменьшитьRight(). Оба метода перебирают все элементы массива и на основе этого создают окончательное возвращаемое значение. Метод сокращения() проходит от первого элемента к последнему элементу массива. И методуduceRight() перемещается от последнего элемента к первому. Это также можно просто понимать как интеграцию элементов в массиве и возврат нового содержимого.
Оба метода принимают два параметра: функцию слияния, которая будет запускаться для каждого элемента, и необязательное начальное значение, с которого нужно начать слияние. Функции, передаваемые в функции уменьшения() и уменьшенияRight(), получают четыре параметра: предыдущее объединенное значение, текущий элемент, индекс текущего элемента и сам массив. Любое значение, возвращаемое этой функцией, будет использоваться в качестве первого аргумента при следующем вызове той же функции. Если необязательный второй параметр (в качестве начального значения слияния) не передан этим двум методам, первая итерация начнется со второго элемента массива, поэтому первым параметром, передаваемым в функцию слияния, является массив. Первый элемент. второй параметр — второй элемент массива.
Сначала поймите концепцию с помощью следующего кода:
значение четырех параметров в следующем коде:
prev: результат, возвращаемый предыдущей операцией
элемент: элемент этой операции
индекс: значение индекса элемента этого
массива операции: массив текущей операции
let arr =[20,40,50,21]
пусть значения=arr.reduce((prev,item,index,array)=>{
console.log("предыдущая"+предыдущая)
console.log("элемент"+элемент)
console.log("индекс"+индекс)
console.log("массив"+массив)
console.log("____________________")
}) Результат:
Почему он повторяется только три раза? Prev может установить значение по умолчанию. Если значение по умолчанию не установлено, первым элементом будет первый prev.
Почему prev становится неопределенным во втором и третьем циклах? Во втором цикле вам нужно получить возвращаемое значение первого цикла, потому что возврат не был установлен в первый раз, поэтому вы получаете неопределенное значение. И так далее.
Если вы поняли вышесказанное, то начинаем реализовывать суммирование массива:
let.
обр=[20,40,50,21]
пусть значения=arr.reduce((prev,item,index,array)=>{
console.log("предыдущая"+предыдущая)
вернуть предыдущий+элемент
//Выдаем возврат и выполняем цикл четыре раза. В первый раз вывод prev равен 20, второй раз 40+20 — 60, третий раз — 110 и последний раз — 131.
})
console.log(values) //131 Когда должно быть установлено значение prev по умолчанию?
Добавьте <li> </li> к каждому элементу массива
let arr=["Исон Чан","Мириам Юнг","Джуджи Ку","Хакен Ли"]
//Устанавливаем значение по умолчанию для prev: Функция 1. Все элементы участвуют в цикле 2. Определяем возвращаемое содержимое let result=arr.reduce((prev,item)=>{
//console.log(предыдущий)
return prev+"<li>"+item+"</li>"
},"")//Добавьте пустую строку console.log(result)//<li>Исон Чан</li><li>Мириам Юнг</li><li>Джуджи Ку</li><li>Кецинь Li</li> li> Давайте возьмем другой случай:
используйте сокращение для дедупликации массива, создайте пустой массив, последовательно пройдите по исходному массиву, вставьте то, чего нет в пустой массив, и то, что не вставлено, больше не будет вставлено.
let arr=["Чжан Сан"," Ли Си","Ли Си","Ван Эр","Ли Си","Мази","Чжан Сан"]
let result=arr.reduce((prev,item)=>{
//Includes определяет, существует ли указанный элемент, и возвращает t, в противном случае возвращает f.
если(!prev.includes(элемент)){
prev.push(item) //.push() добавляет новый элемент в массив}
вернуть предыдущую
},[])//Установить пустой массив по умолчанию console.log(result)//(4) ['Чжан Сан', 'Ли Си', 'Ван Эр', 'Мази'] Другой случай: (метод сокращения Вы может делать многое)
подсчитайте количество вхождений символов: см. код ниже
let arr=["a","b","a","c","b","a","c"]
// Возвращаем объект для подсчета количества вхождений каждого символа {a:2,w:3}
let result=arr.reduce((prev,item)=>{
// //Определяем, имеет ли объект соответствующие атрибуты if(item in prev){
//Находим соответствующее значение атрибута++
prev[item]++ //Если вы захотите в дальнейшем установить или получить атрибуты объекта, то этот атрибут будет представлен переменной в виде скобок []++, если это напрямую. Имя атрибута будет в форма.}else{
предыдущая[элемент]=1
}
вернуть предыдущую
}, {})
console.log(result)//{a: 3, b: 2, c: 2}