ECMAScript define 5 métodos de iteração para arrays. Cada método recebe dois parâmetros: uma função a ser executada com cada item como argumento e um objeto de escopo opcional como contexto no qual a função é executada (afetando o valor de this na função). A função passada para cada método recebe três parâmetros: o elemento do array, o índice do elemento e o próprio array. Dependendo do método específico, os resultados desta função podem ou não afetar o valor de retorno do método. Os 5 métodos de iteração do array são os seguintes.
1. Método Map: Execute a função passada em cada item do array e retorne um array composto pelos resultados de cada chamada de função.
Também pode ser entendido como: após realizar um processamento especial em cada elemento do array, retorne um novo array. .
Por exemplo:
antes de simplificar a matriz de preços:
deixe preços=[50,80,90]
preços=preços.map((item,índice)=>{
item de devolução + "yuan"
})
Após a abreviatura de
console.log(prices):
let price=[50,80,120] //Adicione "yuan" após o preço unitário preço=preço.map(item=>item+"yuan") console.log(price)//A saída é ['50 yuan', '80 yuan', '90 yuan']
Seu cenário de aplicação é, por exemplo: O miniaplicativo WeChat Douban Film Review
usa o método map para substituir xxx por www
replace( ) método Usado para substituir alguns caracteres por outros caracteres em uma string ou substituir uma substring que corresponda a uma expressão regular.
let movies=[{id:1,name:"Redenção de Shawshank",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,nome:"Redenção de Shawshank",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"Redenção Shawshank",imgUrl:"http://xxx.douban.com/1.jpg"}]
filmes=movies.map(item=>{
item.imgUrl=item.imgUrl.replace("xxx","www")
item de devolução
})
console.log(movies) 2. Método de filtro: Execute a função passada em cada item do array Os itens que a função retorna verdadeiro formarão um array e retornarão.
Também pode ser entendido como: filtrar os elementos do array que atendem aos requisitos e retornar um novo array
let score=[80,59,10,55,90,88]
deixe arr=pontuações.filter(item=>{
se(item>60){
retornar verdadeiro
}
})
console.log(arr)//A saída é mostrada abaixo: A saída é mostrada abaixo e filtra matrizes menores que 60
Após a abreviatura:
deixe pontuações = [80,59,10,55,90,88] deixe arr = pontuações.filter (item => item> = 60) console.log(arr)//(3) [80, 90, 88]
Em seu cenário de aplicação, você pode colocar um array de nomes de cidades e depois pesquisar por palavras-chave. Isso é apenas para quando os dados forem pequenos. um livro sobre o exemplo posteriormente. Os cenários de aplicação do sistema de gerenciamento incluirão pesquisas por palavras-chave para referência.
Alguns são traduzidos em inglês como alguns, e todos são traduzidos como todos, cada um, então o método some retornará verdadeiro desde que um deles seja verdadeiro. Todos os métodos devem retornar verdadeiros antes de retornarem verdadeiros, mesmo que haja um falso, falso será retornado.
Durante o processo de julgamentoda
matriz, é avaliado se cada elemento do todo atende a um requisito básico.
verdadeiro, desde que um deles corresponda, ele retornará verdadeiro.
todo método: um falso é falso, desde que um deles não atenda aos requisitos, ele retornará falso
//deixa as notas de todos os alunos de uma turma para ver se todos passaram let pontuações=[80,49,12 ,50,69]
deixe resultado = pontuações.every (item => item> = 60)
console.log(resultado)//Return false Nem todos são aprovados. Cenários de uso: Antes que o validador front-end envie uma solicitação AJAX, ele geralmente precisa passar por todas as verificações antes de poder ser enviado. artigo sobre exemplos de código.
5. Método de redução: ECMAScript fornece dois métodos de mesclagem para arrays: reduzir() e reduzirRight(). Ambos os métodos iteram sobre todos os itens da matriz e constroem um valor de retorno final com base nisso. O método reduz() percorre do primeiro item ao último item do array. E reduzRight() percorre do último item para o primeiro item. Também pode ser entendido simplesmente como: integrar os elementos do array e retornar um novo conteúdo.
Ambos os métodos aceitam dois parâmetros: uma função de mesclagem a ser executada em cada item e um valor inicial opcional para iniciar a mesclagem. As funções passadas para reduzir() e reduzirRight() recebem quatro parâmetros: o valor mesclado anterior, o item atual, o índice do item atual e o próprio array. Qualquer valor retornado por esta função será usado como primeiro argumento na próxima chamada à mesma função. Se o segundo parâmetro opcional (como o valor inicial da mesclagem) não for passado para esses dois métodos, a primeira iteração começará a partir do segundo item da matriz, portanto, o primeiro parâmetro passado para a função de mesclagem será o primeiro item da matriz. o segundo parâmetro é o segundo item da matriz.
Primeiro entenda o conceito através do código a seguir:
o significado dos quatro parâmetros no código a seguir:
prev: o resultado retornado pela operação anterior
item: o elemento desta operação
índice: o valor do índice do elemento desta
matriz de operação: o array da operação atual
let arr =[20,40,50,21]
deixe valores=arr.reduce((prev,item,index,array)=>{
console.log("anterior"+anterior)
console.log("item"+item)
console.log("índice"+índice)
console.log("matriz"+matriz)
console.log("____________________")
}) A saída é:
Por que ele só faz loop três vezes? Prev pode definir um valor padrão. Se o valor padrão não for definido, o primeiro elemento será o primeiro anterior.
Por que prev fica indefinido no segundo e terceiro loops? No segundo loop, você deve obter o valor de retorno do primeiro loop porque o retorno não foi definido na primeira vez, então você fica indefinido. E assim por diante
, então começamos a implementar a soma do array:
let.
arr=[20 ,40,50,21]
deixe valores=arr.reduce((prev,item,index,array)=>{
console.log("anterior"+anterior)
retornar anterior+item
//Dá um retorno e faz um loop quatro vezes. Na primeira vez a saída anterior é 20, na segunda vez 40+20 é 60, na terceira vez é 110 e na última vez a saída é 131.
})
console.log(values) //131 Quando o valor padrão de prev deve ser definido?
Adicione <li> </li> a cada elemento da matriz
let arr=["Eason Chan","Miriam Yeung","Juji Ku","Hacken Lee"]
//Defina um valor padrão para prev: Função 1. Todos os elementos participam do loop 2. Determine o conteúdo de retorno let result=arr.reduce((prev,item)=>{
//console.log(anterior)
retornar anterior+"<li>"+item+"</li>"
},"")//Adicione uma string vazia console.log(resultado)//<li>Eason Chan</li><li>Miriam Yeung</li><li>Juji Ku</li><li>Keqin Li</li> li> Vamos pegar outro caso:
use reduzir para obter a desduplicação do array, crie um array vazio, percorra o array original em sequência, insira o que não está no array vazio e o que não está inserido não será mais inserido
deixe arr=["Zhang San"," Li Si","Li Si","Wang Er","Li Si","Mazi","Zhang San"]
deixe resultado=arr.reduce((anterior,item)=>{
//Inclui determina se existe um elemento especificado e retorna t, caso contrário retorna f.
if(!prev.includes(item)){
prev.push(item) //.push() adiciona um novo item ao array}
retornar anterior
},[])//Definir um array vazio padrão console.log(resultado)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi'] Outro caso: (método de redução Você pode fazer muitas coisas)
contar o número de ocorrências de caracteres: veja o código abaixo
let arr=["a","b","a","c","b","a","c"]
//Retorna um objeto para contar o número de ocorrências de cada caractere {a:2,w:3}
deixe resultado=arr.reduce((anterior,item)=>{
// //Determina se o objeto possui atributos correspondentes if(item in prev){
//Encontre o valor do atributo correspondente++
prev[item]++ //Se você deseja definir ou obter atributos do objeto no futuro, este atributo será representado por uma variável na forma de colchetes []++, se for diretamente.O nome do atributo estará em a forma de.}else{
anterior[item]=1
}
retornar anterior
},{})
console.log(resultado)//{a: 3, b: 2, c: 2}