美文网首页ES6
ES6基本的语法(九) Set

ES6基本的语法(九) Set

作者: StevenTang | 来源:发表于2021-02-20 01:05 被阅读0次

    Set

    • Set 是 ES6 提供的构造函数,能够造出一种新的存储数据的结构
    • 只有属性值,成员值唯一
    • 可以转成数组,其本身具备去重,交集,并集,差集的作用

    Set 只有属性值

    
    // 括号里面可以存放支持迭代接口的值 有 symbol(symbol.inerator) 就属于迭代接口
    
    let a = new Set([[1,2,3,4], 33, true,{name: 'ccc'}] );
    
    console.log(a)
    
    // set(4) { [1,2,3,4], 33, true,{name: 'ccc'}}
    
    

    可以看到 a 打印出来只有属性值,没有属性名。

    Set 成员值唯一

    
    
    let a = new Set([[1,2,3,4], 33, true,{name: 'ccc'},33, 1] );
    
    console.log(a)
    
    // 输出 set(5) { [1,2,3,4], 33, true,{name: 'ccc'},1}
    
    let b = new Set("qwerert")
    
    // 输出 set(5) { 'q','w','e','r','t'}
    
    

    上面的代码中我们可以看到在括号里面有两个 33, 但是输出出来的只有 1 个。33 自动去重了。在就是字符串的时候会拆分成一个一个值,也会默认去重。

    Set 的增删查

    Set 不能修改

    
    // 增
    let a = new Set([1] );
    
    a.add([1,2]);
    a.add(true);
    a.add(true);
    
    console.log(a)
    
    // 输出 set(3) { 1, [1, 2], true} 在添加值的时候也可以进行去重
    
    // 删
    a.delete(true);
    a.delete(1);
    // 删除数组要用一个变量去记住删除数组的值
    const b = [1,2];
    a.delete(b);
    a.clear(); // 清空了 a
    
    // 查 使用 has()
    // 可以直接打印全部值
    a.has(1); // 如果有值返回 true 没有值返回 false
    
    

    循环 Set

    可以使用 forEach 方法或者 for...of... 方法(还是要迭代接口)

    let a = new Set([[1,2,3,4], 33, true,{name: 'ccc'},33, 1] );
    
    a.forEach(ele =>{
        console.log(ele)
    })
    
    // [1,2,3,4],
    // 33,
    // true,
    // {name: 'ccc'},
    // 33,
    // 1
    
    for(let prop of a) { 
        console.log(prop)
    }
    
    // [1,2,3,4],
    // 33,
    // true,
    // {name: 'ccc'},
    // 33,
    // 1
    
    

    日常使用

    
    // 数组转 Set
    let arr = [1,2,3,4];
    let s = new Set(arr);
    
    // Set 转数组
    
    console.log(Array.from(s));
    console.log([...s]);
    // 都输出 [1,2,3,4]
    
    

    上面就是数组转 Set 和 Set 转数组的例子

    在 ES5 中我们一般去重

    const arr = [1,2,3,4,5,66,66,2,3];
    let obj = {};
    let newArr = [];
    
    for ( let i = 0; i<arr.length; i++){
        if(!obj[arr[i]]){
            newArr.push(arr[i]);
            obj[arr[i]] = true;
        }
    }
    console.log(newArr);
    // 输出 [1,2,3,4,5,66]
    
    

    我们修改一下上面的代码

    const o = {name:'ccc'}
    const arr = [1,2,3,4,o,5,66,{name:'xxx'},o,66,2,3];
    let obj = {};
    let newArr = [];
    
    for ( let i = 0; i<arr.length; i++){
        if(!obj[arr[i]]){
            newArr.push(arr[i]);
            obj[arr[i]] = true;
        }
    }
    console.log(newArr);
    // 输出 [1,2,3,4,5,{name:ccc},66]
    
    

    这里就会出现问题,在去重之后的数组中 name 的属性值明明不一样但是它还是给去重掉了。是因为在 arr[{}] = 1 的时候它是括号中是期望一个字符串,会默认给你调用原型链上的 Object.prototype.toString 方法,就是 arr[{}.toString] = 1toString 方法可以把数据类型给输出出来

    let o = {name:'ccc'};
    o[{}] = 1;
    
    // 默认调用 Object.prototype.toString 等同于
    o[{}.toString] = 1
    
    console.log(o)
    // 输出 {name: 'ccc', [object object]: 1}
    
    // 这个对象明显不是和前面同一个但是还是默认给你 [object object]
    o[{name: 'xxx'}] = 2;
    // 输出 {name: 'ccc', [object object]: 1}
    
    

    如果使用 Set 就没有这方面的问题

    
    let o = {name:'ccc'}
    let arr = [1,2,3,4,o,5,66,{name:'xxx'},o,66,2,3];
    let newArr= new Set(arr)
    console.log([...newArr])
    // 输出 [1,2,3,4,{name:ccc},5,{name:xxx},66]
    

    并集、交集和差集

    
    let arr1 = [1,2,3,4,5];
    let arr2 = [4,5,6,7,8];
    
    // 并集
    let arr3 = new Set([...arr1,arr2])
    console.log(arr3)
    // 输出 [1,2,3,4,5,6,7,8]
    
    // 交集
    let a = new Set(arr2);
    let arr4 = arr1.filter(ele=> a.has(ele))
    console.log(arr4)
    // 输出 [4,5]
    
    // 差集
    let a = new Set(arr1);
    let b = new Set(arr2);
    let c = [...a].filter(ele=> !b.has(ele));
    let d = [...b].filter(ele=> !a.has(ele));
    console.log([...c,...b]);
    // 输出 [1,2,3,6,7,8]
    
    

    相关文章

      网友评论

        本文标题:ES6基本的语法(九) Set

        本文链接:https://www.haomeiwen.com/subject/cfzzxltx.html