¿La mejor manera de almacenar una matriz de clave => valor en JavaScript?

¿Cuál es la mejor manera de almacenar una key=>valuematriz en javascript y cómo se puede pasar?

La clave de cada elemento debe ser una etiqueta, como {id}o simplemente, idy el valor debe ser el valor numérico de la identificación.

Debería ser el elemento de una clase javascript existente o ser una variable global a la que se podría hacer referencia fácilmente a través de la clase.

Se puede usar jQuery.

Eso es exactamente lo que es un objeto JavaScript:

var myArray = {id1: 100, id2: 200, "tag with spaces": 300};
myArray.id3 = 400;
myArray["id4"] = 500;

Puedes recorrerlo usando for..inloop :

for (var key in myArray) {
  console.log("key " + key + " has value " + myArray[key]);
}

Ver también: Trabajar con objetos (MDN).

En ECMAScript6 también existe Map(vea la tabla de compatibilidad del navegador allí):

• Un objeto tiene un prototipo, por lo que hay claves predeterminadas en el mapa. Esto podría evitarse usando map = Object.create (null) desde ES5, pero rara vez se hizo.

• Las claves de un objeto son cadenas y símbolos, donde pueden ser cualquier valor para un mapa.

• Puede obtener el tamaño de un mapa fácilmente mientras tiene que realizar un seguimiento manual del tamaño de un objeto.

Si te entendí correctamente:

var hash = {};
hash['bob'] = 123;
hash['joe'] = 456;

var sum = 0;
for (var name in hash) {
    sum += hash[name];
}
alert(sum); // 579

Puedes usar el Mapa .

• Una nueva estructura de datos introducida en JavaScript ES6.
• Alternativa al objeto JavaScript para almacenar pares clave / valor.
• Tiene métodos útiles para la iteración sobre los pares clave / valor.

var map = new Map();
map.set('name', 'John');
map.set('id', 11);

// Get the full content of the Map
console.log(map); // Map { 'name' => 'John', 'id' => 11 }

Obtenga el valor del mapa usando la clave

console.log(map.get('name')); // John 
console.log(map.get('id')); // 11

Obtener tamaño del mapa

console.log(map.size); // 2

La clave de verificación existe en el mapa

console.log(map.has('name')); // true
console.log(map.has('age')); // false

Conseguir llaves

console.log(map.keys()); // MapIterator { 'name', 'id' }

Obtener valores

console.log(map.values()); // MapIterator { 'John', 11 }

Obtener elementos del mapa

for (let element of map) {
  console.log(element);
}

// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

Imprimir pares de valores clave

for (let [key, value] of map) {
  console.log(key + " - " + value);
}

// Output: 
// name - John
// id - 11

Imprimir solo las teclas del mapa

for (let key of map.keys()) {
  console.log(key);
}

// Output:
// name
// id

Imprimir solo valores del mapa

for (let value of map.values()) {
  console.log(value);
}

// Output:
// John
// 11

En javascript, una matriz de valores clave se almacena como un objeto. Hay cosas como matrices en javascript, pero también se consideran objetos de alguna manera, compruebe esta respuesta de los chicos: ¿por qué puedo agregar propiedades con nombre a una matriz como si fuera un objeto?

Las matrices se ven típicamente usando la sintaxis de corchetes, y los objetos (matrices "clave => valor") usan la sintaxis de corchetes, aunque puede acceder y establecer las propiedades de los objetos usando la sintaxis de corchetes como lo ha demostrado Alexey Romanov.

Las matrices en JavaScript generalmente se usan solo con claves numéricas, de incremento automático, pero los objetos de JavaScript pueden contener pares de valores de clave con nombre, funciones e incluso otros objetos también.

Matriz simple, por ejemplo.

$(document).ready(function(){

    var countries = ['Canada','Us','France','Italy'];
    console.log('I am from '+countries[0]);
    $.each(countries, function(key, value) {
        console.log(key, value);
    });

});

Salida -

0 "Canadá"

1 "nosotros"

2 "Francia"

3 "Italia"

Vemos arriba que podemos hacer un bucle de una matriz numérica usando la función jQuery.each y acceder a la información fuera del bucle usando corchetes con teclas numéricas.

Objeto simple (json)

$(document).ready(function(){

    var person = {
        name: "James",
        occupation: "programmer",
        height: {
            feet: 6,
            inches: 1
        },
    }

    console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation);

    $.each(person, function(key, value) {
        console.log(key, value);
    });

});

Salida -

Mi nombre es James y soy un programador de 6 pies 1

nombre James

programador de ocupaciones

Altura Objeto {pies: 6, pulgadas: 1}

En un lenguaje como php, esto se consideraría una matriz multidimensional con pares de valores clave, o una matriz dentro de una matriz. Supongo que porque preguntó acerca de cómo recorrer una matriz de valores clave, le gustaría saber cómo obtener un objeto (clave => matriz de valores) como el objeto de persona anterior para tener, digamos, más de una persona.

Bueno, ahora que sabemos que las matrices de JavaScript se usan típicamente para la indexación numérica y los objetos de manera más flexible para la indexación asociativa, los usaremos juntos para crear una matriz de objetos que podamos recorrer, como así:

Matriz JSON (matriz de objetos):

$(document).ready(function(){

    var people = [
        {
            name: "James",
            occupation: "programmer",
            height: {
                feet: 6,
                inches: 1
            }
        }, {
            name: "Peter",
            occupation: "designer",
            height: {
                feet: 4,
                inches: 10
            }
        }, {
            name: "Joshua",
            occupation: "CEO",
            height: {
                feet: 5,
                inches: 11
            }
        }
    ];

    console.log("My name is "+people[2].name+" and I am a "+people[2].height.feet+" ft "+people[2].height.inches+" "+people[2].occupation+"\n");

    $.each(people, function(key, person) {
        console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation+"\n");
    });

});

Salida -

Mi nombre es Joshua y soy un CEO de 5 pies 11

Mi nombre es James y soy un programador de 6 pies 1

Mi nombre es Peter y soy un diseñador de 4 pies 10

Mi nombre es Joshua y soy un CEO de 5 pies 11

Tenga en cuenta que fuera del bucle tengo que usar la sintaxis de corchetes con una clave numérica porque ahora es una matriz de objetos indexados numéricamente y, por supuesto, dentro del bucle está implícita la clave numérica.

Objetos dentro de una matriz:

var cars = [
        { "id": 1, brand: "Ferrari" }
        , { "id": 2, brand: "Lotus" }
        , { "id": 3, brand: "Lamborghini" }
    ];

Simplemente haz esto

var key = "keyOne";
var obj = {};
obj[key] = someValue;

Sé que es tarde, pero podría ser útil para aquellos que quieren otras formas. Otra forma en que los valores de la clave de matriz => pueden almacenarse es mediante un método de matriz llamado map (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) también puede usar la función de flecha

 
    var countries = ['Canada','Us','France','Italy'];  

    // Arrow Function  

    countries.map((value, key) => key+ ' : ' + value );  

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Hoy lanzamos nuestro nuevo paquete llamado laravel-blade-javascript. Le proporciona una directiva Blade de JavaScript para exportar variables PHP a JavaScript. Básicamente, hace lo mismo que el popular paquete PHP-Vars-To-Js-Transformer de Jeffrey Way, pero en lugar de exportar variables en el controlador, nuestro paquete lo hace una vista.

Aquí hay un ejemplo de cómo se puede usar:

@javascript('key', 'value')

La vista renderizada generará:

<script type="text/javascript">window['key'] = 'value';</script>

Entonces, en su navegador ahora tiene acceso a una variable clave:

console.log(key); //outputs "value"

También puede usar un solo argumento:

@javascript(['key' => 'value'])

Lo que dará como resultado el primer ejemplo.

También puede usar el archivo de configuración para configurar un espacio de nombres en el que deberían residir todas las variables de JavaScript exportadas.