Tudo o que você deve saber sobre dicionários Javascript

Espere! O Javascript tem um tipo de dicionário agora? Não exatamente. Pelo menos ainda não.

Mas com seus tipos de objeto e mapa ES6 sempre tão flexíveis, criar um objeto semelhante a um dicionário para armazenar dados como pares chave-valor é apenas uma questão de minutos.

Esta afirmação pode parecer um pouco estranha para você se você estiver vindo de uma linguagem de digitação estática. Mas com sua natureza de digitação dinâmica, conseguir isso com Javascript não é um problema. Portanto, no artigo de hoje, vamos falar sobre como você pode criar dicionários com sucesso em Javascript e acessar dados armazenados usando estruturas de dados alternativas.

Crie dicionários com objetos Javascript

O tipo de objeto Javascript nos oferece flexibilidade suficiente para armazenar dados como pares de valores-chave, como um dicionário padrão faz. Mas sua versatilidade não termina aí. O tipo de objeto também oferece suporte para acessar dados armazenados usando chaves, iterando por meio de chaves e valores e até mesmo usando diferentes tipos de dados como chaves.

E tudo começa com a criação de um novo dicionário usando Object. Veja como podemos fazer isso.

let dict = {
    id: 123,
    name: "Anj",
    age: 28,
    registered: true
}

Como uma maneira alternativa de criar um dicionário, você pode primeiro inicializar uma instância de Object e preenchê-la com pares de valores-chave da seguinte maneira.

//Create a new Object
let dict = new Object()

//Populate data
dict["id"] = 123
dict["name"] = "Anj"
dict["age"] = 28
dict["registered"] = true

Podemos dar mais um passo à frente e criar um objeto com um protótipo nulo. Ele remove todos os métodos herdados de Object.prototype. É o que mais nos convém, porque esses métodos de objeto são desnecessários para um dicionário. Isto inclui métodos tais como hasProperty(), hasOwnProperty(), toString(), valueOf()etc.

Aqui está como você pode modificar a etapa de criação de objeto para obter um objeto com um protótipo nulo.

let dict = Object.create(null)

Javascript nos permite atribuir diferentes tipos de dados – incluindo string, inteiro e float – para chaves e valores, mesmo no mesmo dicionário.

let dict = {
    "color": "red",
    1: [12, 14, 90],
    1.2: 123,
} 

Você pode até armazenar um método Javascript como um valor em um dicionário baseado em objeto.

const method = () => console.log("Hello");

let dict = {
    "method": method,
}

No entanto, ao armazenar chaves de tipos diferentes de string, Object os converte implicitamente em tipo de string antes de armazenar. Por exemplo, é assim que o Javascript converteu as chaves do dicionário acima durante sua criação:

{
  '1': [ 12, 14, 90 ],
  color: 'red',
  '1.2': 123,
}

Acessar dados usando chaves

Ser capaz de recuperar um par de valores-chave específico usando a chave é um dos recursos mais valiosos da estrutura de dados do dicionário. Com o tipo de objeto Javascript, fazer isso é tão fácil quanto mostra o exemplo a seguir.

let dict = {
    "color": "red",
    1: [12, 14, 90],
    1.2: 123
}   

dict["color"] //red
dict[1] //[12, 14, 90]
dict[1.2] //123

//Use key as a property 
dict.color //red

Como mostra este exemplo, você pode usar qualquer chave como um índice para recuperar o valor associado a ela. Para chaves do tipo string, você pode acessar o valor considerando a chave como uma propriedade do objeto.

Iterar por meio de pares de valores-chave

O tipo de objeto Javascript fornece vários métodos para iterar por meio de chaves, valores ou pares de chave-valor, dependendo do caso de uso.

Primeiro, vamos ver como iterar pelas chaves do dicionário usando o método Object.keys.

for (const key of Object.keys(dict)) {
    console.log(key + ":" + dict[key])
}

A iteração pelos valores do dicionário segue o mesmo padrão com a ajuda do método Object.values.

for (const value of Object.values(dict)) {
    console.log(value)
}

Também podemos iterar em pares de chaves e valores no mesmo loop usando o método Object.entries.

for (const [key, value] of Object.entries(dict)) {
    console.log(key + ":" + value)
}

Remover um par de valores-chave do dicionário

Podemos usar o operador delete do Javascript para remover um par de valores-chave de um dicionário baseado em objeto. Por exemplo:

let dict = {
    id: 123,
    name: "Anj",
    age: 28,
    registered: true
}

delete dict["registered"] 
dict //{ id: 123, name: 'Anj', age: 28 }

Uma desvantagem de usar o operador delete para remover um par de valor-chave é que ele reduz o desempenho do seu código. Se estiver mais preocupado com o desempenho do que remover completamente a propriedade do dicionário, você pode definir seu valor como nulo ou indefinido para sinalizar uma propriedade “removida”.

dict["registered"] = undefined
dict //{ id: 123, name: 'Anj', age: 28, registered: undefined }

Mesmo que esse método não remova totalmente a propriedade, ele conclui a execução muito mais rápido do que o operador delete.

Com isso, discutimos os fundamentos da criação de dicionários em Javascript com a ajuda de seu tipo de objeto. Na próxima seção, vamos ver como podemos obter um resultado semelhante usando o ES6 Maps.

Crie dicionários com mapas Javascript

Mapas Javascript, introduzidos no ES6, são outra excelente alternativa para usar na criação de dicionários. Na verdade, os Mapas têm uma vantagem adicional sobre os Objetos normais quando se trata de funcionar como dicionários. Listamos alguns benefícios principais do uso de mapas em vez de objetos para este caso de uso abaixo.

• As chaves nos mapas podem ser de qualquer tipo. Inclui objetos além dos tipos primitivos e de string que os Objetos aceitam como chaves. E o Maps preserva o tipo inicial da chave sem convertê-la implicitamente em strings, como fazem os Objetos.
• Um mapa ordena seus pares de valores-chave na ordem em que os inserimos. Mas a ordenação em Objetos não é tão confiável e direta como Mapas.
• Os mapas têm uma propriedade “size” que recupera diretamente o número de pares de valores-chave armazenados. Com Objetos, temos que calcular manualmente o tamanho com a ajuda de Object.keys ou um método semelhante.

Então, como podemos criar dicionários com Maps? Vamos descobrir.

//Create Map instance
let dict = new Map()

//Add key-value pairs
dict.set("id", 123)
dict.set("registered", true)

let person = {name: "Anj"}

//Add keys of different types
dict.set(1, [1, 2, 3, 5])
dict.set(person, "available")

Isso nos retorna um mapa com seus tipos de chave preservados.

Map(4) {
  'id' => 123,
  'registered' => true,
  1 => [ 1, 2, 3, 5 ],
  { name: 'Anj' } => 'available'
}

Acessar dados usando chaves

O ES6 Maps fornece um método “get” dedicado para recuperar dados com base em chaves. Veja como podemos usá-lo para acessar pares de valores-chave armazenados.

dict.get("id") //123
dict.get("registered") //true
dict.get(1) //[1, 2, 3, 5]
dict.get(person) //available

Iterar por meio de pares de valores-chave

O tipo de mapas em Javascript é diretamente iterável. Portanto, não precisamos usar um método adicional como Object.keys para recuperar o conjunto de pares de valores-chave armazenados em um mapa. Em vez disso, podemos usar um loop for … of para iterar sobre os dados, como mostra o trecho de código a seguir.

for (const [key, value] of dict) {
    console.log(key + ": " + value)
}

Os mapas também fornecem funções de entradas (), chaves () e valores () separadas para iterar as chaves e valores de maneiras diferentes, dependendo do caso de uso.

for (const [key, value] of dict.entries()) {
    console.log(key + ": " + value)
}

for (const key of dict.keys()) {
    console.log(key)
}

for (const value of dict.values()) {
    console.log(value)
}

Remover um par de valores-chave do dicionário

Novamente, o Maps tem um método dedicado para excluir um par de valores-chave armazenado. Ele retorna verdadeiro se a operação de exclusão for concluída e falso caso contrário.

dict.delete(person) //true

dict //Map(3) { 'id' => 123, 'registered' => true, 1 => [ 1, 2, 3, 5 ] }

Operações adicionais de dicionário com mapas

Além do que discutimos até agora, o Maps oferece suporte a vários outros métodos que nos permitem interagir com os dicionários. Por exemplo, podemos usar o hasmétodo a seguir para verificar se o dicionário contém uma chave específica.

dict.has("dog") //false
dict.has("id") //true

Obtenha o tamanho do dicionário usando size:

dict.size

Conclusão

Mesmo que o Javascript não tenha um tipo de dados de dicionário embutido, seus tipos de objeto e mapa podem se comportar de forma semelhante aos dicionários em linguagens como Python. No tutorial de hoje, falamos sobre o uso desses tipos alternativos para armazenar e acessar pares de valores-chave em Javascript como um dicionário padrão faz.