Considere la siguiente función que debería dibujar una imagen en el lienzo en fragmentos, almacenar en caché esos fragmentos y luego, en el siguiente bucle, verificar esos fragmentos almacenados en caché para asegurarse de que no dibujemos nada más de una vez. Si console.log confirma que la matriz de fragmentos en caché nunca se borra, ¿por qué cuando se imprime el resultado de pixels.data == cachedImage[y][x] , siempre devuelve false , pero después de actualizar el caché informa como true ?
async function temp() { const DIVIDE = 8; for(let y = 0; y < DIVIDE; y++) { if(cachedImage[y] == undefined) {cachedImage[y] = []; console.log(y);} for(let x = 0; x < DIVIDE; x++) { let widthChunk = (drawBuffer.width)/DIVIDE; let heightChunk = (drawBuffer.height)/DIVIDE; let pixels = ctx.getImageData(x*widthChunk,y*heightChunk,widthChunk-1,heightChunk-1); let pixeldata = pixels.data; debugBox3.innerHTML = (cachedImage[y][x] == pixels.data); // always "false" if(pixels.data == cachedImage[y][x]) { } else { cachedImage[y][x] = pixels.data; ctxFinal.putImageData(pixels,x*widthChunk,y*heightChunk) } debugBox4.innerHTML = (cachedImage[y][x] == pixels.data); // always "true" } } } await temp();Supongamos el siguiente código:
let object1 = { key: 'value' } var object2 = { key: 'value' } Uno pensaría que object1 == object2 es cierto, pero no lo es. ¿Por qué? Porque object1 y object2 son meras referencias a objetos, es decir, a objetos independientes.
Sin embargo, si extendemos el código:
let object1 = { key: 'value' } var object2 = { key: 'value' } object1 = object2Ahora hemos establecido la variable objeto1 igual a la referencia a objeto2. No hemos copiado object2.
Por lo tanto object1 == object2 ahora es verdadero.
Cuando dices cachedImage[y][x] = pixels.data; en realidad haces cachedImage[y][x] una referencia a pixels.data . Solo entonces es igual a pixels.data (que también es solo una referencia).
Esto es algo familiar para los punteros en c, consulte: https://www.sitepoint.com/how-javascript-references-work .