A melhor maneira de armazenar uma matriz de chave => value em JavaScript?

Qual é a melhor maneira de armazenar uma key=>valuematriz em javascript e como isso pode ser feito em loop?

A chave de cada elemento deve ser uma tag, como {id}ou just, ide o valor deve ser o valor numérico do ID.

Ele deve ser o elemento de uma classe javascript existente ou uma variável global que pode ser facilmente referenciada através da classe.

jQuery pode ser usado.

É exatamente isso que um objeto JavaScript é:

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

Você pode fazer um loop através dele usando o for..inloop :

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

Consulte também: Trabalhando com objetos (MDN).

No ECMAScript6, também existe Map(consulte a tabela de compatibilidade do navegador):

• Um objeto tem um protótipo, portanto, existem chaves padrão no mapa. Isso pode ser ignorado usando map = Object.create (null) desde o ES5, mas isso raramente é feito.

• As chaves de um objeto são seqüências de caracteres e símbolos, onde podem ter qualquer valor para um mapa.

• Você pode obter facilmente o tamanho de um mapa enquanto precisa controlar manualmente o tamanho de um objeto.

Se eu entendi você corretamente:

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

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

Você pode usar o mapa .

• Uma nova estrutura de dados introduzida no JavaScript ES6.
• Alternativa ao objeto JavaScript para armazenar pares de chave / valor.
• Possui métodos úteis para iteração sobre os pares chave / 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 }

Obter valor do mapa usando a chave

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

Obter tamanho do mapa

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

A chave de verificação existe no mapa

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

Obter chaves

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

Obter valores

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

Obter elementos do mapa

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

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

Imprimir pares de valores-chave

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

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

Imprimir apenas teclas do mapa

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

// Output:
// name
// id

Imprimir apenas valores do mapa

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

// Output:
// John
// 11

Em javascript, uma matriz de valores-chave é armazenada como um objeto. Existem coisas como matrizes em javascript, mas elas também são consideradas objetos ainda, verifique esta resposta: Por que posso adicionar propriedades nomeadas a uma matriz como se fosse um objeto?

As matrizes são normalmente vistas usando a sintaxe entre colchetes e os objetos (matrizes "key => value") usando a sintaxe entre colchetes, embora você possa acessar e definir propriedades do objeto usando a sintaxe entre colchetes, como Alexey Romanov mostrou.

Matrizes em javascript normalmente são usadas apenas com chaves numéricas, incrementadas automaticamente, mas os objetos javascript podem conter pares de valores de chave nomeados, funções e até outros objetos também.

Matriz simples, por exemplo.

$(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);
    });

});

Resultado -

0 "Canadá"

1 "nós"

2 "França"

3 "Itália"

Vimos acima que podemos fazer um loop em um array numérico usando a função jQuery.each e acessar informações fora do loop usando colchetes com teclas numéricas.

Objeto simples (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);
    });

});

Resultado -

Meu nome é James e eu sou um programador de 6 pés 1

nome James

programador de ocupação

altura Objeto {pés: 6, polegadas: 1}

Em uma linguagem como php, isso seria considerado um array multidimensional com pares de valores-chave ou um array dentro de um array. Suponho que, porque você perguntou sobre como percorrer uma matriz de valor-chave, você gostaria de saber como obter um objeto (chave => matriz de valor) como o objeto de pessoa acima para, digamos, mais de uma pessoa.

Bem, agora que sabemos que matrizes javascript são usadas normalmente para indexação numérica e objetos de forma mais flexível para indexação associativa, usá-los-emos juntos para criar uma matriz de objetos pelos quais podemos percorrer, assim:

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");
    });

});

Resultado -

Meu nome é Joshua e sou um CEO de 5 pés 11

Meu nome é James e eu sou um programador de 6 pés 1

Meu nome é Peter e sou designer de 4 ft 10

Meu nome é Joshua e sou um CEO de 5 pés 11

Observe que fora do loop eu tenho que usar a sintaxe de colchete com uma tecla numérica, porque agora é uma matriz de objetos indexada numericamente e, é claro, dentro do loop, a chave numérica está implícita.

Objetos dentro de uma matriz:

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

Simplesmente faça isso

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

Eu sei que é tarde, mas pode ser útil para aqueles que querem outras formas. Outra maneira de armazenar a chave da matriz => valores é usando um método de matriz chamado map (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) você também pode usar a função de seta

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

    // Arrow Function  

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

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Hoje lançamos nosso novo pacote chamado laravel-blade-javascript. Ele fornece uma diretiva javascript Blade para exportar variáveis ​​PHP para JavaScript. Portanto, basicamente faz o mesmo que o popular pacote PHP-Vars-To-Js-Transformer de Jeffrey Way, mas em vez de exportar variáveis ​​no controlador, nosso pacote faz uma visualização.

Aqui está um exemplo de como ele pode ser usado:

@javascript('key', 'value')

A visualização renderizada exibirá:

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

Portanto, no seu navegador, agora você tem acesso a uma variável-chave:

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

Você também pode usar um único argumento:

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

Que produzirá o mesmo que o primeiro exemplo.

Você também pode usar o arquivo de configuração para configurar um espaço para nome no qual todas as variáveis ​​JavaScript exportadas devem residir.