JS ES6新增Set类型的基本用法

首先，我们要知道Set类型是什么呢？可以理解为是一个值永不重复的数组。

let set = new Set(["name", "Joker"]);

console.log(set.size); //2  通过.size的方式获取到Set的长度，这里就跟数组的length属性比较相似。

console.log(set.has("Joker")); //true 判断Set中是否含有Joker这个字符串。

console.log(set.delete("Joker")); //true 用于删除Set中名为Joker的字符串，返回值为true代表已删除

console.log(set.clear()); //undefined 用于清空Set的所有元素

set转array：

let set = new Set(["name", "Joker"]);
 
console.log(Array.from(set)); //["name", "Joker"]
console.log([...set]); //["name", "Joker"]

数组去重借助set类型：

let arr = [1, 2, 3, 4, 2, 1, 4, 3];
console.log(arr); //[1, 2, 3, 4, 2, 1, 4, 3]
arr = [...new Set(arr)];
console.log(arr); //[1, 2, 3, 4]

Set类型的遍历：

1.forEach:

let set = new Set(["name", "title", "Joker"]);
    set.forEach(function (value, index, arr) {
        console.log(value);
        console.log(index);
        console.log(arr)
    })

由于Set类型没有索引，因此value与index打印的相同

2.for of 操作迭代对象的方式也可以。

 

使用Set类型做的小案例：

当输入框失去焦点时，将输入框内值存入set中，再重新渲染到页面上，实现了不会存入重复内容的需求。

 let obj = {
        data: new Set(),
        history(val) {
            this.data.add(val);
        },
        show() {
            let ul = document.querySelector("ul");
            ul.innerHTML = "";
            this.data.forEach(function (val) {
                ul.innerHTML += `<li>${val}</li>`
            })
        }
    };
    //从DOM中获取到输入框
    let input = document.querySelector("[name='history']");

    //给输入框绑定事件
    input.addEventListener("blur", function () {
        //将输入框的值存入obj对象的data中(不会重复存入)
        obj.history(this.value);
        //调用show函数将data重新渲染到DOM中
        obj.show();
    })