Búsqueda de sitios web

jquery - ¿La mejor manera de almacenar un array de clave=>valor en JavaScript?

¿Cuál es la mejor manera de almacenar un arreglo key=>value en JavaScript, y cómo se puede recorrer?

La clave de cada elemento debe ser una etiqueta, como {id} o simplemente id y el valor debe ser el valor numérico del id.

Debería ser el elemento de una clase de JavaScript existente, o una variable global que pueda ser referenciada fácilmente a través de la clase.

Se puede utilizar jQuery.

Respuesta #1

Eso es precisamente lo que es un objeto de JavaScript:

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

Puedes recorrerlo usando el bucle for..in:

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

Véase también: Trabajar con objetos (MDN).

En ECMAScript6 también existe Map (ver la tabla de compatibilidad con navegadores 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 hacía.

  • Las llaves de un Objeto son Strings y Symbols, mientras que pueden ser cualquier valor para un Mapa.

  • Puedes obtener el tamaño de un Map fácilmente, mientras que tienes que llevar un registro manual del tamaño de un Object.

Respuesta #2

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

Respuesta #3

Puedes usar Map.

  • Una nueva estructura de datos introducida en JavaScript ES6.
  • Alternativa al objeto de 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 }

Obtén el valor del Mapa usando la clave

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

Obtener el tamaño del mapa

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

Verificar si la clave existe en el mapa

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

Obtener 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 clave-valor

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

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

Imprimir solo las claves del Mapa

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

// Output:
// name
// id

Imprimir solo los valores del Mapa

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

// Output:
// John
// 11

Respuesta #4

En JavaScript, un arreglo de clave-valor se almacena como un objeto. Existen cosas llamadas arreglos en JavaScript, pero todavía se consideran en cierto modo objetos, mira la respuesta de este tipo: ¿Por qué puedo agregar propiedades nombradas a un arreglo como si fuera un objeto?

Los arrays se suelen ver utilizando la sintaxis de corchetes, y los objetos (arrays "clave=>valor") utilizando la sintaxis de llaves, aunque puedes acceder y establecer propiedades de objetos usando la sintaxis de corchetes como ha mostrado Alexey Romanov.

Los arrays en JavaScript se utilizan típicamente solo con claves numéricas auto incrementadas, pero los objetos de JavaScript pueden contener pares de clave-valor con nombre, funciones e incluso otros objetos también.

Ejemplo de arreglo simple

$(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 recorrer un arreglo numérico usando la función jQuery.each y acceder a la información fuera del bucle usando corchetes con claves 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 pulgada

nombre James

ocupación programador

altura Objeto {pies: 6, pulgadas: 1}

En un lenguaje como PHP, esto se consideraría un arreglo multidimensional con pares clave-valor, o un arreglo dentro de un arreglo. Supongo que, dado que preguntaste sobre cómo recorrer un arreglo de clave-valor, querrías saber cómo obtener un objeto (arreglo clave=>valor) como el objeto persona de arriba para tener, digamos, más de una persona.

Bueno, ahora que sabemos que los arrays de JavaScript se utilizan típicamente para indexación numérica y los objetos de manera más flexible para indexación asociativa, los usaremos juntos para crear un array de objetos por el que podamos iterar, así:

Arreglo JSON (arreglo 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 1,80 m

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

Mi nombre es Peter y soy un diseñador de 1,47 m

Mi nombre es Joshua y soy un CEO de 1,80 m

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

Respuesta #5

Objetos dentro de un arreglo:

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

Respuesta #6

Simplemente haz esto

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

Artículos relacionados