Conjuntos são um novo tipo de objeto introduzido no ES6 (ES2015). Embora sejam menos conhecidos, eles podem ser muito úteis e poderosos. Este tutorial o ajudará a aprender tudo o que você precisa saber sobre eles. Você aprenderá sobre o que são conjuntos em JavaScript, como funcionam e como usá-los.
Introdução aos conjuntos
Conjuntos são um novo tipo de objeto que foi introduzido em JavaScript com ES6 (ES2015). O que os conjuntos permitem que você faça é criar coleções de valores. Esses valores podem ser qualquer coisa, de números e strings a arrays e objetos . Isso não parece algo emocionante. Você pode fazer a mesma coisa com matrizes.
O que acontece com os conjuntos, e onde eles diferem dos arrays, é que podem conter apenas valores únicos. Quando você tenta adicionar vários valores iguais em um conjunto, ele aceitará apenas o primeiro. Qualquer valor subsequente será ignorado. Isso também se aplica a valores como null e undefined. Cada um será adicionado apenas uma vez.
Esse é um dos motivos pelos quais os desenvolvedores de JavaScript às vezes escolhem conjuntos em vez de arrays. Quando você deseja criar uma coleção de alguns valores e precisa que todos os valores sejam exclusivos, os conjuntos são a opção mais fácil.
Criação de conjuntos em JavaScript
Quando você deseja criar conjuntos em JavaScript, faça-o sempre com o construtor de conjuntos set(), precedido da newpalavra – chave. Isso criará um novo objeto Set.
// Create new empty set
const mySet = new Set()
Adicionando valores aos conjuntos
Ao criar um novo conjunto, há duas coisas que você pode fazer. Primeiro, você pode criar um novo objeto Set vazio e adicionar valores a ele mais tarde. Você pode adicionar valores a um conjunto usando o add()método. Este método aceita um valor ou um iterável. Iterable significa uma matriz de valores.
Portanto, você pode passar os valores um por um ou pode passar uma matriz com os valores. Ambos funcionarão. Lembre-se de que o conjunto aceita todos os tipos de dados primitivos , bem como objetos.
// Example no.1: Adding a single value
// Create new empty set
const mySet = new Set()
// Add single values to "mySet" set
mySet.add('Helo')
mySet.add(314)
mySet.add(false)
mySet.add(null)
mySet.add(undefined)
mySet.add({ name: 'Joe' })
// Log the value of "mySet"
console.log(mySet)
// Output:
// Set { 'Helo', 314, false, null, undefined, { name: 'Joe' } }
// Example no.2: Adding multiple values
// Create new empty set
const mySet = new Set()
// Add multiple values to "mySet" set vie iterable
mySet.add(['Strike', 13, false, null, [5, 6], { language: 'JS & TS' }])
// Log the value of "mySet"
console.log(mySet)
// Output:
// Set { [ 'Strike', 13, false, null, [ 5, 6 ], { language: 'JS & TS' } ] }
A segunda opção é adicionar valores no momento em que você está criando um conjunto. Para fazer isso, você deve passar um iterável com alguns valores como um parâmetro para definir o construtor. Lembre-se de que é necessário passar esses valores como iteráveis, ou seja, um array. Caso contrário, nada será adicionado. Isso se aplica a valores únicos e múltiplos.
// Create new set and add a single value
const mySetOne = new Set(['Blackout!'])
// Log the value of "mySetOne"
console.log(mySetOne)
// Output:
// Set { 'Blackout!' }
// Create new set and add a single value
const mySetThree = new Set([{ galaxy: 'Milky way' }])
// Log the value of "mySetOne"
console.log(mySetThree)
// Output:
// Set { { galaxy: 'Milky way' } }
// Create new set and add a single value
const mySetFour = new Set([['Andromeda', 'Mayall\'s Object', 'Malin 1']])
// Log the value of "mySetOne"
console.log(mySetFour)
// Output:
// Set Set { [ 'Andromeda', "Mayall's Object", 'Malin 1' ] }
// Create new set and add multiple values
const mySetTwo = new Set(['Entropy', 'atoms', ['gravity', 'space']])
// Log the value of "mySetOne"
console.log(mySetTwo)
// Output:
// Set { 'Entropy', 'atoms', [ 'gravity', 'space' ] }
Observe que quando você adiciona valores a serem definidos ao criá-lo, esse array será desconstruído . Isso significa que new Set(['a', 'b'])vai se tornar Set {'a', 'b'}. Vejo? Nenhuma matriz envolvendo os valores. No entanto, se você adicionar uma matriz dentro da matriz mais externa, ela permanecerá uma matriz, como em ['Entropy', 'atoms', ['gravity', 'space']].
Removendo valores de conjuntos
A maneira mais fácil de remover um valor de um conjunto é usando o delete()método. Este método funciona de maneira semelhante ao add()método. Você passa o valor como um argumento ao chamar esse método. Se a exclusão for bem-sucedida, delete()retornará true. Caso contrário, ele retornará false.
Uma desvantagem potencial desse método é que ele funciona apenas com um valor por vez. Se você tentar passar vários valores na forma de vários argumentos, isso funcionará apenas parcialmente. O delete()método removerá apenas o primeiro valor, o primeiro argumento e ignorará o resto.
Se você tentar passar valores na forma de uma matriz. O delete()método irá ignorar todos os valores.
// Create new set with some values
const mySet = new Set(['Pegasus', 'Hydra', 'Virgo'])
// Log the value of "mySet"
console.log(mySet)
// Output:
// Set { 'Pegasus', 'Hydra', 'Virgo' }
// Remove some values
mySet.delete('Pegasus')
// Log the value of "mySet" again
console.log(mySet)
// Output:
// Set { 'Hydra', 'Virgo' }
// Try to remove multiple values again using array
// Doesn't work at all
mySet.delete(['Hydra', 'Virgo'])
// Log the value of "mySet" again
console.log(mySet)
// Output:
// Set { 'Hydra', 'Virgo' }
// Try to remove multiple values using multiple parameters
// Removes only the first value passed into delete()
mySet.delete('Hydra', 'Virgo')
// Log the value of "mySet" again
console.log(mySet)
// Output:
// Set { 'Virgo' }
Removendo todos os valores dos conjuntos
Às vezes, você pode querer remover todos os valores do conjunto. Isso pode ser feito usando o clear()método. Este método não aceita nenhum argumento.
// Create new set
const mySet = new Set()
// Add some values
mySet.add('Centaurus')
mySet.add('Sculptor')
mySet.add('Circinus')
// Log the value of "mySet"
console.log(mySet)
// Output:
// Set { 'Centaurus', 'Sculptor', 'Circinus' }
// Remove all values
mySet.clear()
// Log the value of "mySet" again
console.log(mySet)
// Output:
// Set {}
Verificando os valores existentes nos conjuntos
O has()método é provavelmente a maneira mais simples de testar se set contém um valor específico. Este método aceita um único parâmetro, valor que você deseja pesquisar. Se o valor existir, has()retornará true. Caso contrário, ele retornará false.
// Create new set with some values
const mySet = new Set(['Jack', 'Andrew', 'Victoria', 'Emma'])
// Check if "mySet" contains "Andrew"
mySet.has('Andrew')
// Output:
// true
// Check if "mySet" contains "Leopold"
mySet.has('Leopold')
// Output:
// false
Descobrir o quão grande é um conjunto
Quando você quiser saber quantos itens estão em uma matriz, você pode usar sua lengthpropriedade. Os conjuntos não possuem exatamente esta propriedade. No entanto, eles têm uma alternativa. Essa alternativa é a sizepropriedade. Funciona exatamente como lengthpropriedade, retorna o número de todos os valores que existem em um conjunto específico.
// Create new set
const mySet = new Set()
// Log the size of "mySet"
console.log(mySet.size)
// Output:
// 0
// Add some values
mySet.add('Earth')
mySet.add('Mars')
mySet.add('Jupiter')
// Log the size of "mySet" again
console.log(mySet.size)
// Output:
// 3
Conjuntos, chaves e valores
Se você deseja descobrir quais valores um conjunto contém, existem dois métodos que você pode usar. Bem, é um método e um alias para o mesmo método. O método é values()e o alias é keys(). O uso de qualquer um desses métodos criará um objeto iterador . Este iterador contém todos os valores na ordem em que você os adicionou ao conjunto.
Quando você tem esse iterador, pode iterar todos os valores um por um. Se você não estiver familiarizado com iteradores e geradores. Ao trabalhar com o objeto iterador, você pode ir para o próximo valor chamando o next()método. Você chama esse método no objeto iterador que criou.
// Create new set
const mySet = new Set()
// Add some values
mySet.add('Loki')
mySet.add('Thor')
mySet.add('Freyr')
// Create an iterator object that contains all values
const mySetValues = mySet.values()
// Alternative:
// const mySetValues = mySet.keys()
// Log the value of "mySetValues"
console.log(mySetValues)
// Output:
// [Set Iterator] { 'Loki', 'Thor', 'Freyr' }
// Log the first value
console.log(mySetValues.next().value)
// 'Loki'
// Log the second value
console.log(mySetValues.next().value)
// 'Thor'
// Log the third value
console.log(mySetValues.next().value)
// 'Freyr'
// Log the fourth value
// There are only three values in the set
// that's why the "value" is now "undefined"
console.log(mySetValues.next().value)
// Output:
// undefined
Loop sobre valores com for … de loop
Se você não quiser usar o next()método para obter os valores, pode usar for … of loop . O for...ofloop ajudará você a percorrer o objeto iterador e obter todos os valores um por um automaticamente.
// Create new set
const mySet = new Set()
// Add some values
mySet.add('Loki')
mySet.add('Thor')
mySet.add('Freyr')
// Create an iterator object that contains all values
const mySetValues = mySet.values()
// Loop over the "mySetValues" iterator object
// and log all values one by one
for (const val of mySetValues) {
console.log(val)
}
// Output:
// 'Loki'
// 'Thor'
// 'Freyr'
Obtendo todas as entradas em um conjunto
Além dos métodos values()e keys(), você também pode acessar todos os valores dentro de um conjunto com o entries()método. Da mesma forma que values()e keys(), este método também cria um objeto iterador contendo todas as entradas. Você pode então iterar sobre este objeto usando qualquer next()método ou for...ofloop.
// Create new set
const mySet = new Set()
// Add some values
mySet.add('MSFT')
mySet.add('AAPL')
mySet.add('BABA')
mySet.add('ADBE')
mySet.add('DELL')
// Create an iterator object that contains all entries (values)
const mySetEntries = mySet.entries()
// Loop over the "mySetValues" iterator object
// and log all values one by one
for (const entry of mySetEntries) {
console.log(entry)
}
// Output:
// [ 'MSFT', 'MSFT' ]
// [ 'AAPL', 'AAPL' ]
// [ 'BABA', 'BABA' ]
// [ 'ADBE', 'ADBE' ]
// [ 'DELL', 'DELL' ]
// Or using next() method
// Log the first value
console.log(mySetEntries.next().value)
// Output:
// [ 'MSFT', 'MSFT' ]
// Log the second value
console.log(mySetEntries.next().value)
// Output:
// [ 'AAPL', 'AAPL' ]
// Log the third value
console.log(mySetEntries.next().value)
// Output:
// [ 'BABA', 'BABA' ]
// Log the fourth value
console.log(mySetEntries.next().value)
// Output:
// [ 'ADBE', 'ADBE' ]
Quando você usa o entries()método, o formato de cada entrada será [ key, value ]. O que pode surpreendê-lo é que o keye valuenesta matriz de entrada serão iguais. Você pode ver isso no exemplo acima. Não se preocupe com isso. É assim que o entries()método foi implementado em JavaScript.
Iterando sobre conjuntos com forEach ()
O for...inloop não é a única maneira de iterar em um conjunto. Você também pode usar o forEach()método. Isso pode ser ainda mais fácil e rápido do que usar o for...inloop.
// Create new set
const mySet = new Set(['JavaScript', 'Python', 'Ruby', 'Perl'])
// Use forEach() to iterate over "mySet"
// and log all existing values
mySet.forEach(val => {
console.log(val)
})
// Output:
// 'JavaScript'
// 'Python'
// 'Ruby'
// 'Perl'
Conclusão: Introdução aos conjuntos em JavaScript
Os conjuntos podem ser uma ferramenta útil e poderosa em um kit de ferramentas de cada desenvolvedor JavaScript. Eles podem ser uma alternativa útil para matrizes e mapas. Espero que este tutorial tenha facilitado a compreensão do que são conjuntos em JavaScript, como funcionam e, o mais importante, como usá-los.