Me cuesta entender el siguiente código y cómo funciona realmente.
var createNestedObject = function( base, names ) { for( var i = 0; i < names.length; i++ ) { base = base[ names[i] ] = base[ names[i] ] || {}; } }; // Usage: createNestedObject( window, ["shapes", "triangle", "points"] ); // Now window.shapes.triangle.points is an empty object, ready to be used.
Es de esta Q/A: Javascript: cómo crear dinámicamente objetos anidados usando nombres de objetos dados por una matriz
¿Puede explicar cómo la base = base[ names[i] ] = base[ names[i] ] || {};
¿obras?
Mi proceso de pensamiento se atascó y se rompió debido al código anterior. Me vuelve loco.
¿Puede explicar cómo la
base = base[ names[i] ] = base[ names[i] ] || {}
; ¿obras?
Supongamos que estamos en la primera vuelta del bucle, por lo que base
es window
, i
es 0
y names[i]
es "shapes". La primera parte a evaluar es base[ names[i] ] || {}
. Esto se resolverá en window.shapes
si existe, o un objeto vacío si no existe.
A continuación, nos movemos hacia la izquierda a esta asignación:
base[ names[i] ] = base[ names[i] ] || {};
Eso se va a asignar a window.shapes
lo que tengamos del lado derecho. Entonces, si window.shapes
ya existe, lo asignamos a sí mismo y nada cambia. O si no existe, le asignamos un objeto vacío.
Y moviéndose hacia la izquierda una vez más:
base = base[ names[i] ] = base[ names[i] ] || {};
Ahora vamos a reasignar la variable base
para que apunte al objeto que acabamos de crear (o al objeto que reutilizamos). Entonces, para el próximo giro del bucle, base
ya no es window
, es window.shapes
.
En este punto, el ciclo se repite, pero nuestras variables ahora están un paso más adelante. base
es window.shapes
, i
es 1
y names[i]
es "triangles". Dado que base
ahora es window.shapes
, estamos probando y asignando a un objeto que es una capa más profunda. Entonces, mientras que la primera vez que pasamos por el bucle nos aseguramos de que existieran window.shapes
, esta vez estamos comprobando si window.shapes.triangle
existe. Y así continuará, más y más profundamente en el objeto cada vez que pase por el bucle.
La línea de código está haciendo varias, quizás demasiadas, cosas a la vez. Una forma de entenderlo es desarmar las cosas y tener pasos separados:
// Original line base = base[ names[i] ] = base[names[i]] || {}; // Add parentheses according to JavaScript operator preferences base = base[ names[i] ] = ( base[names[i]] || {} ); // Separate the two assignments base[ names[i] ] = base[names[i]] || {}; base = base[ names[i] ]; // Replace the use of || as null coalescing operator with the ?: operator base[ names[i] ] = base[names[i]] ? base[names[i]] : {}; base = base[ names[i] ]; // Replace the ?: operator with if-else if (base[names[i]]) { base[names[i]] = base[names[i]] } else { base[names[i]] = {} } base = base[ names[i] ]; // Swap if and else branches if (!base[names[i]]) { base[names[i]] = {} } else { base[names[i]] = base[names[i]] } base = base[ names[i] ]; // Get rid of the else branch as it is not doing anything if (!base[names[i]]) { base[names[i]] = {} } base = base[ names[i] ];