[Notas] La diferencia entre for...of y for...in

¿Para qué es... de?

for...of es un nuevo método de recorrido en ES6, que permite recorrer una estructura de datos (matriz, objeto, etc.) que contiene una interfaz iteradora y devolver el valor de cada elemento.

La diferencia entre for...of y for...in en ES3

• for...of poligonales para obtener el valor clave del objeto, y for...in obtiene el nombre clave del objeto;

• for... in atravesará toda la cadena de prototipos del objeto, el rendimiento es muy pobre y no se recomienda su uso, mientras que for... of solo atraviesa el objeto actual y no atraviesa la cadena de prototipos;

• Para el recorrido de matriz, for...in devolverá todas las propiedades enumerables en la matriz (incluidas las propiedades enumerables en la cadena prototipo), y for...of solo devolverá los valores de propiedad correspondientes a los subíndices de la matriz;

Resumen: El ciclo for...in es principalmente para recorrer objetos, no para recorrer matrices; el ciclo for...of se puede usar para recorrer matrices, objetos similares a matrices, cadenas, conjuntos, mapas y objetos generadores.

¿Cómo usar para... de?

for...of es un nuevo método de recorrido en ES6, que permite recorrer una estructura de datos (matriz, objeto, cadena, etc.) que contiene una interfaz iteradora y devuelve el valor de cada elemento. informará de un error.

1. Si el objeto a recorrer es un objeto similar a una matriz, use Array.from para convertirlo en una matriz.

var obj = {
    0:'one',
    1:'two',
    length: 2
};
obj = Array.from(obj);
for(var k of obj){
    console.log(k)
}

1. Si no es un objeto similar a una matriz, simplemente agregue un atributo [Symbol.iterator] al objeto y apunte a un iterador.

var obj = {
    a:1,
    b:2,
    c:3
};
obj[Symbol.iterator] = function(){
var keys = Object.keys(this);
var count = 0;
return {
            next(){
                if(count<keys.length){
                    return {value: obj[keys[count++]],done:false};
                }else{
                    return {value:undefined,done:true};
                }
        }
    }
};

for(var k of obj){
    console.log(k);
}

CONSEJOS:

• for...of se usa para recorrer el valor de iterrable, y for...in se usa para recorrer las claves de los objetos.

• for...of no se puede usar para recorrer objetos, for...in puede recorrer matrices y cadenas iterables, pero debe evitar usarlo para recorrer objetos iterables.