JavaScript: Set vs Array, quando e como usar?

Set ou Array? Qual devo usar?

O que é Set e o que é Array?

Todos que trabalham com JS até agora estão familiarizados com o Array (não me diga que não!). Mas o que exatamente é um Array? Bem, em geral, Array é um tipo de estrutura que representa um bloco de dados (números, objetos, etc…) alocados em memória de modo consecutivo.

  • Coleções com chaves são coleções que usam chaves, estes contêm elementos que são iteráveis na ordem de inserção.

Inicilizando

Array

Array é muito direto. Para declarar um novo array no JS, você pode usar a forma literal diretamente:

var arr = []; // array vazio 
var arr = [1,2,3]; // array que contém 1,2,3
var arr = new Array(); // array vazio 
var arr = new Array(1,2,3); // array que contém 1,2,3
var arr = Array.from ("123"); // ["1", "2", "3"]
  • [] economiza mais tempo de digitação (experimente :))
  • você pode acabar cometendo alguns erros clássicos , como:
var arr1 = new Array(10); // arr1[0] = undefined, mas arr1.length = 10
var arr2 = [10]; // arr2[0] = 10 e arr2.length = 1;
var arr3 = new Array(1,2,3); // [1,2,3]
var arr4 = [1,2,3]; // [1,2,3]

Set

Set tem um construtor embutido. Sim, não há nenhum atalho como em arrays.

var emptySet = new Set(); 
var exampleSet = new Set([1,2,3]);
new Set(1);
var set = new Set([1,2,3]); // {1,2,3}
var arr = Array.from(set); // [1,2,3]

Localizando e acessando um elemento

  • Primeiro de tudo, Set não suporta acesso aleatório a um elemento por índice como em Array, o que significa:
console.log(set[0]); //undefined
console.log(arr[0]); //1
  • Verificar se um elemento existe em um Set tem uma sintaxe mais simples do que em um Array, usando Set.prototype.has(value) vs Array.prototype.indexOf(value).
console.log(set.has(0)); // false
console.log(arr.indexOf(0)); // -1

console.log(set.has(1)); // true
console.log(arr.indexOf(1)); //0
var isExist = arr.indexOf (1)! == -1;

Adicionando/Inserindo novo elemento

  • Adicionar um novo elemento ao Array pode ser feito rapidamente em O(1) usando Array.prototype.push() — o elemento será adicionado ao final do array.
arr.push(4); //[1,2,3,4]
arr.unshift(3); // [3,1,2,3]
arr.unshift(5, 6); // [5,6,3,1,2,3]
set.add(3); // {1,2,3} 
set.add(4); // {1,2,3,4}

Removendo elemento

  • Uma das coisas boas que tornam o Array tão popular é porque ele fornece muitos métodos diferentes para remover um elemento, por exemplo:
var arr = [5,6,1,2,3,4]
arr.pop (); // retorna 4
var arr = [5,6,1,2,3,4]
arr.shift (); // retorna 5
var arr = [5,6,1,2,3,4]
arr.splice (0, 3); // retorna [5,6,1]
var set = new Set([1,2,3,4])
set.delete(4); // retorna `true`, agora "set" é {1,2,3}
var set = new Set([1,2,3,4])
set.clear(); // retorna `undefined`, agora "set" é {}

Então, qual é melhor? E quando é melhor utilziar Array?

  • Em primeiro lugar, Set é diferente de Array. Não se destina a substituir totalmente o Array, mas fornecer um tipo de suporte adicional para concluir o que falta no Array.
  • Como o Set contém apenas elementos distintos, deixa a vida muito mais fácil se soubermos antecipadamente que queremos evitar salvar dados duplicados em nossa estrutura.
  • Operações básicas de Set como union(), intersect(), difference(), etc … são facilmente implementadas de forma eficaz com base nas operações internas nativas fornecidas. Devido ao método delete(), fazer intersect/union entre 2 Sets é muito mais confortável do que fazer o mesmo com 2 Arrays.
  • Array destina-se a cenários em que queremos manter elementos ordenados para acesso rápido ou fazer modificações pesadas (remover e adicionar elementos) ou qualquer ação necessária para acesso direto ao índice de elementos (por exemplo, tente fazer Pesquisa Binária em Sets ao invés de Arrays — como você acessa o elemento localizado no meio?)

Conclusão

Em geral, na minha opinião, Set realmente não tem uma grande vantagem sobre o Array, exceto em cenários específicos, como quando queremos manter dados distintos/não duplicados com o mínimo de esforço, ou trabalhar com vários conjuntos de dados distintos juntos usando as operações mais básicas do Set, sem a necessidade de acessar elementos diretamente.

Créditos