ES6语法详解,面试必会,通俗易懂版

news2024/11/17 13:52:30

Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。
在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap
Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
Code

const set = new Set([1, 2, 3, 4, 4]);
console.log(set) // Set(4) {1, 2, 3, 4}

const set2 = new Set()
const arr = [2,3,4,5,5,5,8,8]
arr.forEach((item)=>{
    set2.add(item)
})
for(let item of set2) {
    console.log(item) // 2 3 4 5 8 
}


const set3 = new Set([2,32,3,23,23,23,2,32,3,23])
for(let item of set3) {
    console.log(item) //2 32 3 23
}
const NewArr = [...set3]
const NewArr2 = Array.from(set3) 
console.log(NewArr) //[ 2, 32, 3, 23 ]
console.log(NewArr2) //[ 2, 32, 3, 23 ]

set 属性
在这里插入图片描述
Code

const set4 = new Set([2,32,3,23,23,12312])
set4.add(55)
console.log(set4)
console.log(set4.has(55))
set4.delete(55)
console.log(set4.has(55))
const set5 = new Set()
set4.forEach((item)=>{
    item = item*2
    set5.add(item)
})
console.log(set4)
console.log(set5)
set4.clear()

WeakSet 使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
和Set区别
区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收

code
在这里插入图片描述
Code

let hd = {name:"houdunren"}
let edu = hd;
// 此时我们引用了俩次该内存地址，引用次数为2
let set6 = new WeakSet();
set6.add(hd)
// 再将该内存地址的数据加入WeakSet类型中，引用次数不会增加，我们将这种方式成为弱引用类型,Set的迭代方法等等都无法使用
console.log(set6.has(hd));
// 如果此时我们将hd和edu清空,那么该内存地址的数据将会被当作垃圾处理
hd = null;
edu = null;
// 而此时WeakSet中还是会认为有数据
console.log(set6.has(hd));

Set 和 WeakSet 区别

非常详细,好好读
Set 以及 WeakSet 区别以及用法

在 JavaScript 中，使用 WeakSet 来保存 DOM 节点确实可以减少内存泄漏的风险，因为 WeakSet 存储的是对象的弱引用，当对象没有被其他地方引用时，可以被垃圾回收。然而，如果错误地使用普通 Set 来保存 DOM 节点，就可能造成内存泄漏。以下是一个例子：

内存泄漏示例：使用普通 Set 保存 DOM 节点

<div id="container">
  <!-- 动态创建的按钮将被添加到此容器中 -->
</div>
<button id="addBtn">添加按钮</button>
<script>
  // 获取容器和添加按钮的 DOM 元素
  let container = document.getElementById('container');
  let addBtn = document.getElementById('addBtn');

  // 创建一个 Set 来保存按钮的引用
  let buttonsSet = new Set();

  // 为添加按钮添加点击事件监听器
  addBtn.addEventListener('click', function() {
    // 创建一个新的按钮
    let newBtn = document.createElement('button');
    newBtn.textContent = '新按钮';

    // 将新按钮添加到页面和 Set 中
    container.appendChild(newBtn);
    buttonsSet.add(newBtn); // 这里使用 Set 保存了对 DOM 元素的强引用
    // 如果不手动删除这些按钮，它们会一直被 Set 强引用，即使页面上已经没有这些按钮了
  });
</script>

在这个例子中，每次点击 “添加按钮” 时，都会创建一个新的按钮并将其添加到页面上。
同时，这个新按钮的引用也被添加到了 buttonsSet 这个 Set 对象中。
由于 Set 存储的是强引用，即使这些按钮从 DOM 中移除，
只要它们还在 Set 中，它们就不会被垃圾回收器回收，从而导致内存泄漏。

如何避免这个内存泄漏

使用 WeakSet 替代 Set：如果使用 WeakSet 来存储按钮的引用，那么当按钮从 DOM 中移除后，没有其他地方引用它们时，它们就可以被垃圾回收。
手动管理引用：在不再需要按钮时，应该从 Set 中删除对应的引用，并从 DOM 中移除按钮。
移除事件监听器：在按钮从 DOM 中移除时，也应该移除所有附加的事件监听器。
使用一次性函数：如果事件监听器只需要执行一次，可以在执行完后立即删除它，避免长期持有 DOM 元素的引用。

以下是使用 WeakSet 避免内存泄漏的修正代码：

// 使用 WeakSet 而不是 Set 来保存按钮的引用
let buttonsWeakSet = new WeakSet();

addBtn.addEventListener('click', function() {
  let newBtn = document.createElement('button');
  newBtn.textContent = '新按钮';
  container.appendChild(newBtn);
  buttonsWeakSet.add(newBtn); // 使用 WeakSet 保存对 DOM 元素的弱引用

  // 添加按钮移除逻辑，例如： (手动清理, 可以不加 )
  newBtn.addEventListener('click', function() {
    container.removeChild(newBtn);
    buttonsWeakSet.delete(newBtn); // 从 WeakSet 中删除引用
  });
});

在这个修正后的代码中，使用 WeakSet 来存储按钮的引用，
当按钮不再出现在页面上时，它们可以自动被垃圾回收，
因为 WeakSet 中的引用不会阻止这一过程。

Map

在这里插入图片描述
Map 实例的遍历方法有：
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员

const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);

for (let key of map.keys()) {
  console.log(key);
}
// "aaa"
// "bbb"

for (let value of map.values()) {
  console.log(value);
}
// 100
// 200

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// aaa 100
// bbb 200

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// aaa 100
// bbb 200