Capítulo 6 de Programação Avançada em JavaScript Compartilhamento de Leitura - Map&Set

Programação avançada em JavaScript (4ª edição) Leitura Compartilhamento Gravação de notas

Aplicável a camaradas que estão apenas começando

 Mapa

        Novidade no ECMAScript 6 , Map é um novo tipo de coleção que traz verdadeiro armazenamento de chave/valor para a linguagem. A maioria dos recursos do Map pode ser implementada por tipo de objeto, mas ainda existem algumas diferenças sutis entre os dois.

• Um mapa vazio pode ser criado usando a palavra-chave new e o construtor Map:

const m = new Map()

Inicializar mapa com array aninhado 

// 使用嵌套数组初始化映射
 const m1 = new Map([ 
  ["key1", "val1"], 
  ["key2", "val2"], 
  ["key3", "val3"] 
 ]);

• Métodos: set(), get(), has(), delete(), clear()

• O método set() retorna uma instância de mapeamento, então várias operações podem ser concatenadas
• Atributo: tamanho

const m = new Map()

m.set('age',18)

//has()方法，如果存在键值就返回发生true，不存在就返回false
console.log( m.has('firstName') )  //false
console.log( m.has('age') ) // true

//get()方法,如果存在键值就返回键对应的值，不存在就返回undefined
console.log( m.get('firstName') ) //undefained
console.log( m.get('age') ) //18

//set()方法可以链式操作，set(键，值)
m.set("firstName", "Matt").set("lastName", "Frisbie")

//size属性
console.log(m.size) // 3

//delete()方法，删除某个键值对
m.delete('age')
console.log( m.has('age') ) // false
console.log(m.size) // 2

//clear()方法，清空对象
m.clear()
console.log(m.size) // 0

• Ao contrário de Object , que só pode usar valores numéricos, strings ou símbolos como chaves, Map pode usar qualquer tipo de dados JavaScript como chave

const m = new Map(); 


const functionKey = function() {}; 
const symbolKey = Symbol(); 
const objectKey = new Object(); 


m.set(functionKey, "functionValue"); 
m.set(symbolKey, "symbolValue"); 
m.set(objectKey, "objectValue"); 

alert(m.get(functionKey)); // functionValue 
alert(m.get(symbolKey)); // symbolValue 
alert(m.get(objectKey)); // objectValue

• Sequência e Iteração

Obtenha este iterador por meio do método entrys() (ou da propriedade Symbol.iterator , que se refere a entrys() )

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

alert(m.entries === m[Symbol.iterator]); // true 


for (let pair of m.entries()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3] 


for (let pair of m[Symbol.iterator]()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3]

keys() e values() retornam iteradores gerando chaves e valores, respectivamente, na ordem de inserção:

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

for (let key of m.keys()) { 
 console.log(key); 
} 
// key1 
// key2 
// key3 

for (let key of m.values()) { 
 console.log(key); 
} 
// value1 
// value2 
// value3

Comparação de objeto e mapa

• uso de memória

As implementações de nível de engenharia de         Object e Map variam significativamente entre os navegadores , mas a quantidade de memória usada para armazenar um único par chave/valor aumenta linearmente com o número de chaves. Mas dado um tamanho fixo de memória, Map pode armazenar cerca de 50% mais pares chave / valor do que Object .

• Desempenho de inserção

O custo de inserir novos pares de chave / valor em         Object e Map é aproximadamente o mesmo, embora a inserção em Map seja geralmente um pouco mais rápida em todos os navegadores . Se o código envolve muitas operações de inserção, obviamente o desempenho do Map é melhor

• velocidade de busca

        Ao contrário da inserção, a diferença de desempenho em encontrar pares de chave / valor de um grande objeto e mapa é mínima, mas se contiver apenas um pequeno número de pares de chave / valor, o objeto às vezes é mais rápido

• excluir desempenho

Se o código envolve muitas operações de exclusão, não há dúvida de que Map deve ser escolhido

Definir

        O novo Set  do ECMAScript 6 é um novo tipo de coleção que traz estruturas de dados de coleção para a linguagem. Os conjuntos são, de muitas maneiras, como mapas aprimorados , pois a maioria de sua API e comportamento são comuns.

Uma coleção vazia pode ser criada usando a palavra-chave new e o construtor Set:

const m = new Set();

Inicializar coleção com array

// 使用数组初始化集合 
const s1 = new Set(["val1", "val2", "val3"]);

 atributo de método

Métodos: add(), has(), delete(), clear()

Atributo: tamanho

const s = new Set();

s.add('Tom')

//has()  
console.log(s.has('Jerry')) //false
console.log(s.has('Tom')) //true

//size
console.log(s.size) // 1

//add()
s.add('Jerry').add('Mary')
console.log(s.size) // 3

//delete()
s.delete('Tom') 
console.log(s.size) // 2

//clear()
s.clear()
console.log(s.size) // 0

Sequência e Iteração

O método iterativo chamado é consistente com o mapa

const s = new Set(["val1", "val2", "val3"]); 
for (let pair of s.entries()) { 
 console.log(pair); 
} 
// ["val1", "val1"] 
// ["val2", "val2"] 
// ["val3", "val3"]