Arrays Associativos em JavaScript Explicados: Objetos, Uso e Principais Diferenças

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma das linguagens de programação essenciais no desenvolvimento web. Entre suas muitas funcionalidades, os “arrays associativos” são uma estrutura importante que ajuda no gerenciamento e processamento eficiente de dados.

Neste artigo, fornecemos uma explicação detalhada sobre arrays associativos em JavaScript, desde conceitos básicos até usos mais avançados. Exemplos de código são incluídos para tornar o conteúdo fácil de entender, mesmo para iniciantes, portanto use este artigo como referência prática.

2. O que é um Array Associativo?

2.1 Definição de um Array Associativo

Um array associativo é um tipo de estrutura de dados que gerencia informações como pares de “chaves” e “valores”. Enquanto arrays padrão utilizam índices numéricos (0, 1, 2, …), os arrays associativos permitem acessar os dados usando chaves de string arbitrárias.

2.2 Arrays Associativos em JavaScript

Em JavaScript, os arrays associativos são representados por objetos. Objetos são definidos usando chaves {} e armazenam dados como pares chave–valor.

Abaixo está um exemplo básico de um array associativo em JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Diferenças entre Arrays Associativos e Arrays Regulares

Arrays associativos e arrays regulares diferem nas seguintes maneiras.

2.4 Casos de Uso

Arrays regulares são adequados para gerenciar dados em forma de lista, enquanto arrays associativos são convenientes para lidar com dados que possuem atributos específicos, como informações de usuário ou configurações.

3. Como Criar Arrays Associativos

3.1 Declarando com um Literal de Objeto

A forma mais comum de criar um array associativo em JavaScript é usando um literal de objeto.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Criando com new Object()

Outra abordagem é criar um objeto usando new Object().

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Adicionando Chaves e Valores Dinamicamente

Usando a notação de colchetes, você também pode usar variáveis como chaves.

let key = "color";
let product = {};
product[key] = "red";

4. Manipulando Arrays Associativos

4.1 Adicionando Elementos

Adicionando com notação de ponto

let user = {};
user.name = "Tanaka";
user.age = 30;

Adicionando com notação de colchetes

let user = {};
user["email"] = "tanaka@example.com";

4.2 Recuperando Elementos

Recuperando com notação de ponto

console.log(user.name); // "Tanaka"

Recuperando com notação de colchetes

console.log(user["email"]); // "tanaka@example.com"

4.3 Atualizando Elementos

Você pode atualizar um valor existente atribuindo um novo valor à mesma chave.

user.age = 35;
console.log(user.age); // 35

4.4 Excluindo Elementos

Use a palavra‑chave delete para remover um par chave–valor.

delete user.phone;
console.log(user.phone); // undefined

5. Iterando sobre Arrays Associativos

5.1 Iteração com o Loop for...in

O loop for...in permite iterar sobre as chaves de um array associativo.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Usando Object.keys() e forEach()

Você pode obter um array de chaves usando Object.keys() e então iterar sobre ele com forEach().

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Usando Object.entries() e for...of

Com Object.entries(), você pode iterar sobre chaves e valores ao mesmo tempo.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Ordenando Arrays Associativos

6.1 Ordenando por Chaves

Objetos JavaScript em si não são diretamente ordenáveis, mas você pode ordenar suas chaves e então acessar os valores na ordem ordenada.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Ordenação por Valores

Para ordenar por valores, converta o objeto em um array de pares chave‑valor usando Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Observações Importantes ao Ordenar

Quando os valores são armazenados como strings, a ordenação numérica requer conversão explícita.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Observações Importantes ao Usar Arrays Associativos

7.1 Chaves Duplicadas e Sobrescrita

Se a mesma chave for definida várias vezes, o valor posterior sobrescreve o anterior.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined e Verificação da Existência de Chave

Para verificar se uma chave existe em um array associativo, use o operador in ou hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 O Método push Não Pode Ser Usado

Arrays associativos (objetos) não suportam o método push(), que está disponível apenas para arrays regulares.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Diferenças em Relação aos Dados JSON

Objetos JavaScript e dados JSON são relacionados, mas não são a mesma coisa. Objetos precisam ser convertidos em strings JSON para troca de dados.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Resumo

8.1 Pontos Principais dos Arrays Associativos

• Os dados são gerenciados usando pares chave‑valor.
• Operações flexíveis são possíveis, incluindo adição, recuperação, atualização e exclusão de dados.
• Arrays associativos suportam iteração e ordenação por meio de métodos incorporados.

8.2 Exemplos Práticos de Uso

Abaixo está um exemplo de manipulação de múltiplos objetos de usuário usando um array combinado com arrays associativos.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – Perguntas Frequentes

Q1. Qual é a Diferença entre Arrays Associativos e Arrays Regulares?

Arrays regulares utilizam índices numéricos, enquanto arrays associativos utilizam chaves de string para acessar valores.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. Como Posso Verificar se uma Chave Existe?

Você pode verificar a existência de uma chave usando o operador in.

if ("age" in user) {
  console.log(user.age);
}

10. Resumo Final

Arrays associativos em JavaScript são extremamente úteis para gerenciar e organizar dados.
Neste artigo, abordamos tudo, desde conceitos básicos até padrões de uso mais avançados.

Próximos Passos:

• Execute os exemplos de código você mesmo para aprofundar seu entendimento.
• Experimente integrar arrays associativos com dados JSON e operações de API.