ECMAScript define 5 métodos de iteración para matrices. Cada método recibe dos parámetros: una función que se ejecutará con cada elemento como argumento y un objeto de alcance opcional como el contexto en el que se ejecuta la función (que afecta el valor de this en la función). La función pasada a cada método recibe tres parámetros: el elemento de la matriz, el índice del elemento y la matriz misma. Dependiendo del método específico, los resultados de esta función pueden afectar o no el valor de retorno del método. Los 5 métodos de iteración de la matriz son los siguientes.
1. Método de mapa: ejecuta la función pasada en cada elemento de la matriz y devuelve una matriz compuesta por los resultados de cada llamada a la función.
También puede entenderse como: después de realizar un procesamiento especial en cada elemento de la matriz, devuelve una nueva matriz. .
Por ejemplo:
antes de simplificar la matriz de precios:
dejemos precios=[50,80,90]
precios=precios.map((artículo,índice)=>{
devolver artículo+"yuan"
})
Después de la abreviatura de
console.log(prices):
let price=[50,80,120] //Agrega "yuan" después del precio unitario precio=precio.map(artículo=>artículo+"yuan") console.log(price)//El resultado es ['50 yuanes', '80 yuanes', '90 yuanes']
Su escenario de aplicación es, por ejemplo: el subprograma WeChat Douban Film Review
utiliza el método de mapa para reemplazar xxx con www
reemplazar ( ) método Se utiliza para reemplazar algunos caracteres con otros caracteres en una cadena, o reemplazar una subcadena que coincide con una expresión regular.
let movies=[{id:1,nombre:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,nombre:"Shawshank Redemption",imgUrl:" http://xxx.douban.com/2.jpg"},{id:3,nombre:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"}]
películas=películas.map(item=>{
item.imgUrl=item.imgUrl.replace("xxx","www")
devolver artículo
})
console.log(movies) 2. Método de filtro: ejecute la función pasada en cada elemento de la matriz. Los elementos que la función devuelve verdadero formarán una matriz y regresarán.
También puede entenderse como: filtrar los elementos de la matriz que cumplen con los requisitos y devolver una nueva matriz
let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>{
si(elemento>60){
devolver verdadero
}
})
console.log(arr)//La salida es como se muestra a continuación: La salida es como se muestra a continuación y filtra las matrices menores de 60
Después de la abreviatura:
let scores=[80,59,10,55,90,88] let arr=scores.filter(item=>item>=60) console.log(arr)//(3) [80, 90, 88]
En su escenario de aplicación, puede colocar una serie de nombres de ciudades y luego buscar palabras clave. Esto es solo para cuando los datos sean pequeños. Un libro sobre el ejemplo más adelante. Los escenarios de aplicación del sistema de gestión incluirán búsquedas de palabras clave como referencia.
Algunos se traducen en inglés como algunos, y cada se traduce como todos, cada uno, por lo que el método algunos devolverá verdadero siempre que uno de ellos sea verdadero. Por el contrario, cada(). Todos los métodos deben devolver verdadero antes de poder devolver verdadero, incluso si hay uno falso, se devolverá falso.
Durante el proceso de juicio de la matriz, se juzga si cada elemento del todo cumple con un requisito básico:
uno verdadero y uno
.Es cierto, siempre que uno de ellos coincida, devolverá verdadero.
cada método: uno falso es falso, siempre que uno de ellos no cumpla con los requisitos, devolverá falso
// muestra las puntuaciones de todos los estudiantes de una clase para ver si todos han aprobado let puntuaciones = [80,49,12 ,50,69 ]
let resultado=puntuaciones.cada(elemento=>elemento>=60)
console.log(result)//Devuelve false No se pasan todos. Escenarios de uso: antes de que el validador de front-end envíe una solicitud AJAX, generalmente necesita que se aprueben todas las verificaciones antes de poder enviarla. artículo sobre ejemplos de código. Validador de datos de front-end.
5. Método de reducción: ECMAScript proporciona dos métodos de combinación para matrices: reducir() y reducirRight(). Ambos métodos iteran sobre todos los elementos de la matriz y construyen un valor de retorno final basado en esto. El método reduce() atraviesa desde el primer elemento hasta el último elemento de la matriz. Y reduceRight() atraviesa desde el último elemento al primer elemento. También puede entenderse simplemente como: integrar los elementos en la matriz y devolver un nuevo contenido.
Ambos métodos aceptan dos parámetros: una función de combinación que se ejecutará en cada elemento y un valor inicial opcional desde el que iniciar la combinación. Las funciones pasadas a reduce() y reduceRight() reciben cuatro parámetros: el valor combinado anterior, el elemento actual, el índice del elemento actual y la matriz misma. Cualquier valor devuelto por esta función se utilizará como primer argumento en la siguiente llamada a la misma función. Si el segundo parámetro opcional (como valor inicial de fusión) no se pasa a estos dos métodos, la primera iteración comenzará desde el segundo elemento de la matriz, por lo que el primer parámetro pasado a la función de fusión es la matriz. el segundo parámetro es el segundo elemento de la matriz.
Primero comprenda el concepto a través del siguiente código:
el significado de los cuatro parámetros en el siguiente código:
anterior: el resultado devuelto por la operación anterior
elemento: el elemento de esta operación
índice: el valor del índice del elemento de esta operación
matriz: el matriz de la operación actual
let arr =[20,40,50,21]
let valores=arr.reduce((prev,item,index,array)=>{
console.log("anterior"+anterior)
console.log("elemento"+elemento)
console.log("índice"+índice)
console.log("matriz"+matriz)
consola.log("____________________")
}) La salida es:
¿Por qué sólo se repite tres veces? Prev puede establecer un valor predeterminado. Si no se establece el valor predeterminado, el primer elemento será el primer anterior.
¿Por qué prev queda indefinido en el segundo y tercer ciclo? En el segundo bucle, debe obtener el valor de retorno del primer bucle porque el retorno no se estableció la primera vez, por lo que queda indefinido. Y así sucesivamente.
Si comprende lo anterior, comenzamos a implementar la suma de matrices:
let. arreglo=[20,40,50,21]
let valores=arr.reduce((prev,item,index,array)=>{
console.log("anterior"+anterior)
devolver elemento+anterior
//Da un retorno y realiza un bucle cuatro veces. La primera vez la salida prev es 20, la segunda vez 40+20 es 60, la tercera vez es 110 y la última vez genera 131.
})
console.log(values) //131 ¿Cuándo se debe establecer el valor predeterminado de prev?
Agregue <li> </li> a cada elemento de la matriz
let arr=["Eason Chan","Miriam Yeung","Juji Ku","Hacken Lee"]
//Establece un valor predeterminado para prev: Función 1. Todos los elementos participan en el bucle 2. Determina el contenido devuelto let result=arr.reduce((prev,item)=>{
//console.log(anterior)
devolver anterior+"<li>"+elemento+"</li>"
},"")//Agregar una cadena vacía console.log(resultado)//<li>Eason Chan</li><li>Miriam Yeung</li><li>Juji Ku</li><li>Keqin Li</li> li> Tomemos otro caso:
use reducir para lograr la deduplicación de la matriz, cree una matriz vacía, recorra la matriz original en secuencia, inserte lo que no está en la matriz vacía y lo que no se inserta ya no se insertará.
let arr=["Zhang San"," Li Si","Li Si","Wang Er","Li Si","Mazi","Zhang San"]
dejar resultado=arr.reduce((prev,item)=>{
// Incluye determina si hay un elemento específico y devuelve t; de lo contrario, devuelve f.
if(!prev.incluye(elemento)){
prev.push(item) //.push() agrega un nuevo elemento a la matriz}
volver anterior
},[])//Establecer una matriz vacía predeterminada console.log(resultado)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi'] Otro caso: (método de reducción puede hacer muchas cosas)
cuente el número de apariciones de caracteres: vea el código a continuación
let arr=["a","b","a","c","b","a","c"]
//Devuelve un objeto para contar el número de apariciones de cada carácter {a:2,w:3}
dejar resultado=arr.reduce((prev,item)=>{
// //Determine si el objeto tiene los atributos correspondientes if(item in prev){
//Encuentra el valor del atributo correspondiente++
prev[item]++ //Si desea establecer u obtener atributos de objeto en el futuro, este atributo estará representado por una variable en forma de corchetes []++, si es directamente. El nombre del atributo estará en la forma de.}else{
anterior[elemento]=1
}
volver anterior
},{})
console.log(resultado)//{a: 3, b: 2, c: 2}