★ Set、Map、WeakSet、WeakMap

Set

• 数据结构是集合，类似数组只有键值没有键名
• 成员是唯一且无序的所以不能用索引来获取值
• 可以遍历，方法有 add delete has size clear 等

WeakSet

• 成员只能是对象
• 不能用来遍历，方法和 Set 基本相同
• 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏

// 创建
const colors = new Set();
const fruits = new Set(['apple', 'banana', 'orange']);

// 添加元素
colors.add('red');
colors.add('blue');
colors.add('green');

// 获取长度
colors.size

// 删除元素
colors.delete('red');

// 检验元素是否存在
colors.has('blue'); // true

// 清除所有元素
colors.clear();

// 遍历
colors.values(); // 返回 Iterator 结构，可以用 next 来进行遍历
for(let color of colors) {
    console.log(color);
} 
colors.forEach((item, key, ownSet) => {
    // item 值
    // key 键
    // ownSet 自己 
    console.log(item, key, ownSet);
})

// 数组去重
const numbers = [1, 2, 3, 4, 3, 2, 1];
const numbersSet = new Set(numbers);
const uniqueNumbers = [...numbersSet]; // [1, 2, 3, 4]

Map

• 数据结构是字典，类似对象存储的是键值对的集合，key 可以 set 任意类型的数据。
• 可以遍历，方法有 set get delete size has clear 等

WeakMap

• 键名只能是对象 ( null 除外 )，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
• 不能遍历，方法同 Map 基本一致

// 创建
const people = new Map();
const fruits = new Map([['apple', 2], ['banana', 3]])

// 添加元素
people.set('protein', 22);
people.set('mary', 21);
people.set('jelly', 20);
people.set({}, 3)

// 获取长度
people.size

// 获取元素
people.get('protein'); // 22

// 删除元素
people.delete('mary');

// 检验元素是否存在
people.has('protein'); // true

// 清除所有元素
people.clear();

// 遍历
for(let person of people) {
    console.log(person); // [key, value]
} 
for(let [key, value] of people) { // 解构
    console.log(key, value); 
} 
people.forEach((item, key, ownSet) => {
    // item 值
    // key 键
    // ownSet 自己 
    console.log(item, key, ownSet);
})

Map 的应用场景：当你想要存储关于这个对象的信息，而不是把这个信息存储到这个对象中的时候，就可以使用 Map 来操作。

<button>Fire</button>
<button>Dancer</button>
<button>Ice Cream</button>
<button>hamburger</button>
<button>Fish</button>

<script>

const clickCounts = new Map();

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
    clickCounts.set(button, 0);

    button.addEventListener('click', function(){
        const val = clickCounts.get(this);

        clickCounts.set(this, val + 1);

        console.log(clickCounts);   
    })
})

</script>