El bucle for se usa con mayor frecuencia en el desarrollo diario. Al interactuar con datos de front-end y back-end, los tipos de datos comunes son matrices y objetos. For transversal se usa a menudo al procesar objetos y matrices, por lo que es necesario comprenderlos a fondo. cinco tipos de bucles for. Ellos son:
- para
- para... en
- para... de
- por esperar.. de
- para cada
- mapa
1. Introducción a cada uno para
1 、 para
El bucle for es el recorrido más antiguo y más utilizado y puede satisfacer la gran mayoría de los recorridos. Puede atravesar matrices, objetos y cadenas, ejemplos:
// 遍历数组
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
for (var i = 0,keys = Object.keys(obj); i< keys.length; i++){
console.log(obj[keys[i]])
}
//遍历字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
console.log(str[i])
}2. for... in
for... in es nuevo en ES5: itera las propiedades enumerables de un objeto excepto el símbolo en cualquier orden, incluidas las propiedades enumerables heredadas.
// 遍历数组
var arr = [1, 2, 3]
for (var i in arr ){
console.log(i);//0 1 2
console.log(arr[i]);//1 2 3
}
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
for (var key in obj){
console.log(key)// job name
console.log(obj[key])// web worker 前端代码女神
}
//遍历字符串
let str = 'abc'
for (var i in str){
console.log(i) // 0 1 2
console.log(str[i]) // a b c
}3. La
declaración for... of for... of crea un bucle de iteración en objetos iterables (incluidos Array, Map, Set, String, TypedArray, objetos de argumentos, etc.), llama al gancho de iteración personalizado y para cada declaración. se ejecutan para diferentes valores de atributos.
// 迭代 Array
var arr = [1, 2, 3]
for (var val of arr ){
console.log(val);// 1 2 3
}
//迭代 String
let str = 'abc'
for (var val of str){
console.log(val) // a b c
}
// 迭代 TypedArray - 一个类型化数组，描述了一个底层的二进制数据缓冲区！
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);//0 255
}
// 迭代 Map - 对象保存键值对，能够记住键的原始插入顺序
let map = new Map([['a',1],['b',2]])
for (let key of map) {
console.log('key',key)//['a',1] ['b',2]
}
for (let [key,value] of map) {
console.log(key) // a b
console.log(value) // 1 2
}
// 迭代 Set
let set = new Set([1,2,3,2,1])
for (let val of set) {
console.log(val)// 1 2 3
}4. for await...of
crea un bucle que atraviesa objetos iterables asíncronos y objetos iterables sincrónicos, incluidos String, Array, objetos tipo matriz integrados (argumentos o lista de nodos), TypedArray, Map, Set y Asynchronous/ definido por el usuario. iteradores sincrónicos.
Llama al gancho de iteración personalizado utilizando el valor de cada propiedad diferente del objeto para llamar a la declaración que se ejecutará.
Similar al operador de espera, esta declaración solo se puede usar dentro de una función asíncrona
async function* asyncGenerator() {
var i = 0;
while (i < 3) {
yield i++;
}
}
(async function () {
for await (num of asyncGenerator()) {
console.log(num);// 0 1 2
}
})();5. forEach
forEach se lanzó en la versión ES5. Ejecuta una función de devolución de llamada en orden ascendente para cada elemento que contiene un valor válido en la matriz. Aquellos elementos que hayan sido eliminados o no inicializados se omitirán (por ejemplo, en una matriz dispersa) Generalmente se considera una versión mejorada del bucle for ordinario.
// 遍历数组
var arr = [1, 2, 3]
arr.forEach((item, index) => {
console.log(index);//0 1 2
console.log(item);// 1 2 3
})
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
var keys = Object.keys(obj)
keys.forEach((key) => {
console.log(key)// job name
console.log(obj[key])// web worker 前端代码女神
})6.
Se puede devolver una nueva matriz durante el recorrido del mapa. El resultado de la nueva matriz es el valor devuelto después de llamar a la función proporcionada una vez para cada elemento de la matriz original.
// 遍历数组
var arr = [1, 2, 3]
let newArr = arr.map((item) => item * 2)
console.log(newArr);//[2,4,6]2. La diferencia entre múltiples para
1. Diferencias en escenarios de uso.
El bucle for es la declaración transversal de bucle más antigua y primitiva. Se define una variable dentro de for y el bucle se recorre de acuerdo con las condiciones, generalmente la longitud de la matriz. Cuando se excede la longitud, el bucle se detiene. Generalmente, las matrices o Se atraviesan recorridos tipo matriz.
Al atravesar el objeto, dado que el objeto no tiene longitud, use Object.keys() para obtener todas las propiedades del objeto y devolverlas en forma de matriz.
for / in se utiliza principalmente para recorrer las propiedades enumerables del objeto, incluidas las propiedades del objeto prototipo, en cualquier orden. Al atravesar el objeto, se obtiene el valor clave de la propiedad. Lo que se atraviesa es la matriz y el subíndice de la matriz Como valor clave.
for / of se utiliza para recorrer los datos de objetos iterables, incluidos Array, Map, Set, String, TypedArray, objetos de argumentos, etc.
for await...of se usa para atravesar objetos iterables asíncronos. Esta declaración solo se puede usar dentro de una función asíncrona.
forEach es una versión mejorada de for. Es más simple de usar y lleva más parámetros, pero su esencia sigue siendo un bucle de matriz. Cada elemento ejecuta una devolución de llamada sin cambiar la matriz original.
Map ejecuta una devolución de llamada para cada elemento de la matriz original y devuelve una nueva matriz sin cambiar la matriz original.
2. Diferencias funcionales:
forEach y map no admiten saltar fuera de bucles, y otros no.
for await... of puede admitir operaciones asincrónicas, pero otros no.
Para atravesar objetos puros, la enumeración for... in es más conveniente.
Para el recorrido de la matriz, si no se necesita un índice, puede usar directamente for...of para obtener el valor, y también se admite la interrupción o el retorno; si también se necesita un índice, forEach es más adecuado, pero no se admite el retorno .
Si una matriz está asignada a otra matriz, lo más apropiado es usar map.
3. Diferencias de rendimiento
Cuando el entorno de prueba y las condiciones de los datos de prueba son consistentes, la clasificación de rendimiento es:
para > para de > para cada > mapa > para en.
for tiene el rendimiento más rápido porque no hay llamadas a funciones ni contexto adicionales.
for... of es una estructura de datos con una interfaz de iterador, que se puede utilizar para iterar miembros y leer valores clave directamente.
forEach es azúcar sintáctico para for y tiene muchos parámetros y contexto, por lo que será más lento.
Debido a que map devuelve una nueva matriz de igual longitud, la sobrecarga de rendimiento causada por la creación y asignación de matrices es relativamente grande.
for...in tiene el peor rendimiento porque necesita enumerar todos los atributos del objeto, requiere un proceso de conversión y es relativamente caro.
3. Uso de para
En el desarrollo del proyecto, debemos elegir un recorrido apropiado en función de las necesidades reales. Las siguientes son algunas sugerencias de uso:
Si necesita asignar los datos a otra matriz, como un valor booleano correspondiente, se recomienda utilizar map, que no modificará la matriz original y tiene una sintaxis simple.
Al atravesar la matriz, puede utilizar for, forEach o for...of.
Al atravesar objetos puros, se recomienda utilizar for... in.
Si necesita atravesar iteradores, se recomienda utilizar for... of.
Si está filtrando matrices que cumplen las condiciones de una matriz, utilice el filtro.