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


253

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.


Um hash iterado com $ .each não serve? Isso é praticamente padrão.
58900 kgiannakakis

18
Por que no mundo você gostaria de usar o jQuery para esta tarefa básica simples, kgiannakakis?
Artem Russakovskii 17/07/09

7
Se você estiver usando o jQuery de qualquer maneira, iterando com $ .each é apenas melhor do que um simples loop for.
kgiannakakis

@kgiannakakis Raciocínio muito simples, mas não tão óbvio para todos, como pode ser visto aqui. ;-)
sdlins 25/03

2
@kgiannakakis Ou em vez de usar jQuery para loop sobre um array , você poderia usar builtin de JavaScriptArray.prototype.forEach
JoshyRobot

Respostas:


433

É 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.


26
Se o seu navegador suportar (IE9 e superior), é mais seguro criar o objeto vazio primeiro var foo = Object.create(null)e depois adicionar propriedades a ele como ele foo.bar = "baz". Criar um objeto com {}é equivalente a Object.create(Object.prototype), o que significa que ele herda todas as propriedades de Object. Normalmente, isso não é um problema, mas pode fazer com que seu objeto tenha chaves inesperadas se alguma biblioteca tiver modificado o global Object.prototype.
Rory O'Kane 12/08

1
@ RoryO'Kane, você pode usar sua própria propriedade para contornar isso.

4
@DaMaxContent você também pode virar à direita, virando à esquerda três vezes.
Coderatchet

1
@thenaglecode Às vezes restam 3 vezes funciona. Imagine se você não pudesse virar à direita? Ou você teve que fazer isso mais de uma vez?

Mas talvez o OP desejasse uma matriz, pois os objetos não manteriam a ordem dos itens de maneira consistente nas implementações do navegador?
trainoasis

99

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

31

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

3
Parece que não é compatível JSON.stringify().
kenorb

10

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.


Bem explicado me ajudou a corrigir um problema em que eu estava construindo algo para capturar alturas.
pranay

3

Objetos dentro de uma matriz:

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

2

Simplesmente faça isso

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

0

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


-11

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.