¿Algunos notaron cómo se comportan las construcciones de bucle forEach y for/of en los elementos "agregados durante la iteración"? ForEach ignora el hecho de que hay elementos recién agregados en la matriz, y for/of altera el iterador sobre la marcha y continúa hasta que no quedan elementos en la matriz. ¿Cuál es la razón de este fenómeno, usando palabras inteligentes? Primera publicación en el stackoverflow, así que no juzgues si la explicación es simple.... Gracias.
let my_array1 = [1,2,3] let my_array2 = ["a", "b", "c"] //extra iteration cycles were not dynamically added. Loop ends after pre-defined # of cycles. my_array1.forEach((value, index, the_array) => { if (value == 3){ // my_array1.push(3) the_array.push(3) // works like so as well } }) console.log(`my_array1 after iteration ${my_array1}`) //extra iteration cycles WERE dynamically added. Infinite loop!!! for (let value of my_array2){ if (value == "c"){ my_array2.push("c") } } console.log(`my_array2 after iteration ${my_array2}`)Debe mirar la especificación (o, para métodos no nativos, la documentación de lo que sea que esté usando) para ver cuál es el comportamiento. Por ejemplo, con Array.prototype.forEach , puede ver :
1. Let O be ? ToObject(this value). 2. Let len be ? LengthOfArrayLike(O). 3. If IsCallable(callbackfn) is false, throw a TypeError exception. 4. Let k be 0. 5. Repeat, while k < len, a. Let Pk be ! ToString(𝔽(k)). b. Let kPresent be ? HasProperty(O, Pk). c. If kPresent is true, then i. Let kValue be ? Get(O, Pk). ii. Perform ? Call(callbackfn, thisArg, « kValue, 𝔽(k), O »). d. Set k to k + 1. 6. Return undefined. Como puede ver, itera mientras k < len , y len se asigna al comienzo de la operación, en el paso 2, por lo que no se consideran los elementos agregados a la matriz durante la iteración. (Sin embargo, se verá un elemento que cambió durante la iteración, ya que los valores se recuperan con Get(O, Pk) dentro de cada iteración)
for..of , por otro lado, se usa en iterables :
Return ? GetIterator(exprValue, iteratorHint).
, y luego se llama a ese iterador hasta que se agota el iterador
a. Let nextResult be ? Call(iteratorRecord.[[NextMethod]], iteratorRecord.[[Iterator]])
y los iteradores de matrices incluyen elementos agregados a la matriz durante la iteración, que puede ver aquí . realiza
vi. Establecer índice en índice + 1.
al final de una iteración, después de producir y al comienzo de una iteración, busca el valor en ese índice. Como resultado, los elementos agregados durante la invocación del iterador se verán en los resultados del iterador, hasta que el iterador esté en el elemento final de la matriz y no queden más elementos.
Cuando llama al método .forEach en un objeto de matriz, establece el final del bucle en el valor actual de array.length. Sería lo mismo que esto:
const arr = [1,2,3,4] const end = arr.length for(let i = 0; i < end; i++) { '''code''' } Sin embargo, cuando usa la sintaxis para for...of es lo mismo que esto:
const arr = [1,2,3,4] for(let i = 0; i < arr.length; i++) { '''code''' }Entonces, en cada iteración, está verificando la longitud de la matriz, que cambiará si presiona la matriz