JS字符串去重详解

首先看一下去重效果：

html代码：

<input type="text" value="" id="input-value">
<button onclick="getInputValue()">点击去重</button>
<h4 id="remove-result"></h4>

JS代码：

function getInputValue() {
	var text = document.getElementById("input-value").value;
	var characters = text.split('');
	var uniqueCharacters = Array.from(new Set(characters));
	var uniqueText = uniqueCharacters.join('');
	document.getElementById("remove-result").innerHTML = "去重结果：" + uniqueText
}

详解：

这段代码的作用是去除数组 characters 中的重复元素，并返回一个只包含唯一元素的新数组 uniqueCharacters。
它利用了JavaScript 中的 Set 对象和 Array.from 方法。下面是每一步的详细解释：

new Set(characters)

• Set 是 JavaScript 中的一种数据结构，它类似于数组，但一个重要的区别是 Set 中的元素是唯一的，即不允许有重复元素。
• new Set(characters) 会创建一个新的 Set 对象，并将 characters 数组中的所有元素添加到这个 Set 中。如果 characters 数组中有重复的元素，在 Set 中只会保留一个。

Array.from(...)

• Array.from 是一个将类数组对象或可迭代对象转换为数组的方法。在这段代码中，Array.from(new Set(characters)) 会将 Set 对象中的所有元素按顺序放入一个新的数组中。
• 由于 Set 中的元素是唯一的，转换后的数组也只包含唯一的元素。

所以，结合起来，var uniqueCharacters = Array.from(new Set(characters)); 的作用就是：将 characters 数组转换为一个 Set，自动去除重复的元素。然后将这个 Set 转换回一个数组，赋值给 uniqueCharacters 变量。

举个例子，如果 characters 是 [‘a’, ‘b’, ‘a’, ‘c’, ‘b’]，执行这段代码后，uniqueCharacters 将是 [‘a’, ‘b’, ‘c’]。