Ir al contenido principal

JavaScript: Conjuntos de datos, u Objetos planos

Objeto plano

Conjuntos de datos

Un conjunto de datos se define como:
    {} ;
Los datos se los insertamos mediante mencionarlo, y de por medio un punto mencionar el dat que agregamos al conjunto.
    {}.datoNuevo = 34 ;
    {}["datoOtro"] = 55 ;
Pero el problema es que {} crea un objeto distinto. Es decir, es lo mismo...
    {} ;
que
    new Object() ;
Entonces si queremos trabajar con un mismo conjunto deberemos ponerle nombre a través de una variable que lo referencie en memoria. Ejemplo:
    var miConjunto = {} ;
    var otroConjunto = {} ;
Ahora, a cada conjunto le iremos agregando datos nuevos con el método anteriormente mencionado.
    miConjunto.datoNuevo = 34 ;
    miConjunto.otroDato = 55 ;
    otroConjunto.suDatoNuevo = 56 ;
Para saber qué contiene en el momento dado conjunto deberemos realizar un console.log()...
    console.log( miConjunto ) ;
Esto nos dará en la consola algo como...
{
    "datoNuevo": 34
    , "otroDato": 55
}
Si luego agregamos un dato más al conjunto realizar el console.log() lo mostrará actualizado:
    miConjunto.masDatos = 88 ;
    console.log( miConjunto ) ;
La consola nos dirá...
{
    "datoNuevo": 34
    , "otroDato": 55
    , "masDatos": 88
}

Formas de inicializarse un conjunto

Una opción es de una agregarle datos desde el comienzo, poniéndole nombre a una variable que controle al conjunto nuevo. Ejemplo:
    var fichaUsuario = {
        "nombre": "Mario"
        , "color": "red
    } ;

Copiar un conjunto

Para copiar un conjunto no se puede igualar a una variable nueva, porque estaremos creando un alias para el conjunto. Es decir, será otra forma de controlar a un mismo conjunto.
    var aliasMiConjunto = miConjunto ;
    console.log( "Mostrando el aliasMiConjunto" ) ;
    console.log( aliasMiConjunto ) ; // Mostrará lo mismo que mi conjunto...
    console.log( "Agregando dato nuevo al alias. Deberá modificar al original" ) ;
    aliasMiConjunto.agregoDato = 12 ;
    console.log( "Mostrando el original" ) ;
    console.log( miConjunto ) ;
Nos generará en la consola...
    Mostrando el aliasMiConjunto
    {
        "datoNuevo": 34
        , "otroDato": 55
        , "masDatos": 88
    }
    Agregando dato nuevo al alias. Deberá modificar el original
    {
        "datoNuevo": 34
        , "otroDato": 55
        , "masDatos": 88
        , "agregadoDato": 12
    }
    
Entonces crear una variable igualándola a un conjunto ya existente no crea un nuevo conjunto con los datos del conjunto mencionado, como lo podríamos hacer cuando igualamos variables que indican números, frases o booleans. Para duplicar un conjunto como copia del original deberemos iterar cada elemento del original e implantárselo al nuevo (ver método de agregar dato en el segundo script de este documento).
    var copiaDeConjuntoOriginal = {} ;
    // Iterando uno por uno cada dato del conjunto original
    for( var cadaDato in miConjunto ) {
        copiaDeConjuntoOriginal[ cadaDato ] = miConjunto[ cadaDato ] ;
    }
    console.log( "Mostrando a la copia" ) ;
    console.log( copiaDeConjuntoOriginal ) ;
    console.log( "Agregando un dato nuevo al conjunto original" ) ;
    miConjunto.otroDatoMas = 33 ;
    console.log( "Mostrando el conjunto original" ) ;
    console.log( miConjunto ) ;
    console.log( "Mostrando el conjunto copia con el dato extra" ) ;
    console.log( copiaDeConjuntoOriginal ) ;
La consola nos dirá...
    Mostrando la copia
    {
        "datoNuevo": 34
        , "otroDato": 55
        , "masDatos": 88
        , "agregadoDato": 12
    }
    Agregando un dato nuevo al conjunto original
    Mostrando el conjunto original
    {
        "datoNuevo": 34
        , "otroDato": 55
        , "masDatos": 88
        , "agregadoDato": 12
    }
    Mostrando el conjunto copia con el dato extra
    {
        "datoNuevo": 34
        , "otroDato": 55
        , "masDatos": 88
        , "agregadoDato": 12
        , "otroDatoMas: 33
    }

Comentarios

Entradas más populares de este blog

Agregar degradados como fondos

Agregar degradados mediante CSS Degradado lineal y degradado radial o elíptico. Degradado lineal La expresión inglesa para indicar linealidad es  linear . .deg-lineal-1 { /* Degradado vertical */ background-image : linear-gradient ( red, black ) ; } .deg-lineal-2 { /* Degradado según un ángulo decimal */ background-image : linear-gradient ( 45deg , red, black ) ; } .deg-lineal-3 { /* Degradado con transparencia */ background-image : linear-gradient ( 45deg , black, rgba ( 0 , 0 , 0 , . 4 ) ) ; } .deg-lineal-4 { /* Degradado con varios puntos de colores */ background-image : linear-gradient ( 45deg , red, blue, black ) ; } Degradado elíptico o circular La expresión inglesa para indicar radialidad es  radial . .deg-eliptico-1 { /* Degradado elíptico, se adapta a la proporción del DIV */ background-image : radial-gradient ( red, blue...

Herramientas para nuestro hosting sin base de datos

Los siguientes sistemas que podremos agregar a nuestro hosting PHP, no dependen de una base de datos como lo es MySQL, sino que trabajan directamente sobre archivos en formato JSON o CSV. Herramientas Codiad Es un editor de códigos colaborativo, que implementa la herramienta de edición de código ACE. Tiene un ecosistema de plugins libres para utilizar. Permite agregar usuarios que editan. Sitio de Codiad KodExplorer y KodFile Es una muy buena aplicación de origen chino, para administrar archivos y carpetas en nuestro hosting. Viene con un editor de código, ACE, y un ecosistema de aplicaciones conectadas, como por ejemplo, para visualizar archivos de PowerPoint, Excel o Word, y acceso a base de datos mediante Adminer.php. Descargá KodExplorer desde aquí KodFile, KodExplorer simplificado Un informe de qué es KodExplorer Generador de Código QR Gracias a la herramienta de código de David Shim, haciendo un script JavaScript se puede crear un generador de códig...

Ficha herramienta JavaScript: Responsive-nav

Descarga de sitio oficial... Responsive nav Se instalan... - responsive-nav.css (en HEAD) - responsive-nav.js (en HEAD) Se construye un DIV (o lo que sea) bien identificado. <div id="menuResponsive">...</div> Se habilita... en un SCRIPT al final, justo antes del </body> con... var Opciones = {} ; var Menu = responsiveNav( "#menuResponsive", Opciones ) ; Opciones posibles: { label: "Haceme click X" }