ES6的Set详解

简介: ES6的Set详解

数组去重

let arr = [ 1,2,3,4,5,3,2 ]
    // 数组去重
    // 方法一
    let newArr = [new Set(arr)]
    console.log(newArr);
    // 方法二
    let newArr2 = Array.from(new Set(arr))
    console.log(newArr2);

数组对象去重

let obj = [
        {id : 1 ,name : 'zs'},
        {id : 2 ,name : 'ls'},
        {id : 3 ,name : 'ww'},
        {id : 2 ,name : 'ls'}
     ]
    //  数组对象去重     
     let newObj = [...new Set(obj.map(el=> JSON.stringify(el)))].map(res=> JSON.parse(res))
     console.log(newObj);
    //  步骤拆解:
    /*
    1、判断两个基本数据类型是否相同,比较的是数据的值。判断两个引用类型是否一样,比较的是引用
    2、set无法将数组对象去重,set去重的原理主要是判断两者存储的单元位置是否一样,如果一样才能去重。
    3、基本类型数据存储在栈,值相同就直接去重。引用数据类型存储在堆,引用类型数据 值 相同 位置不相同也无法去重。参考第一条的解释。
    4、只要将引用类型数据转变成基本数据类型,基本数据类型直接比较就可以去重了。去重完成后通过字符串转json对象即可。
    */
   /*
          [...new Set(obj.map(el=> JSON.stringify(el)))]   这一步 map 将内部的每一条转换成字符串,返回一个新数组,也就是引用类型数据转基本类型数据,下面是转换结果
           [ 
            0: "{\"id\":1,\"name\":\"zs\"}"   // 字符串
            1: "{\"id\":2,\"name\":\"ls\"}"   // 字符串
           ]
          .map(res=> JSON.parse(res))  这一步将去重处理好的值转换为对象 得到最终结果
   */

数组添加

let arr3 = [
        {id : 1 ,name : 'zs'},
        {id : 2 ,name : 'ls'},
        {id : 3 ,name : 'ww'}
      ]
      let newArr3 = new Set(arr3)
    //   尾部添加
      newArr3.add({id : 4,name : 'swk'})
      console.log('尾部添加');
      console.log(newArr3);

数组删除

let arr4 = [1,2,3,4,5,4,4,4]
      let newArr4 = new Set(arr4)
      newArr4.delete(2)    // 删除成功返回:true    删除失败返回:false
      console.log('删除数组中某一项');
      console.log(newArr4);

检测数组值是否存在

let arr5 = [1,2,3,4,5,6,7]
      let newArr5 = new Set(arr5)
      console.log('检测数组中是存在set值');   
      console.log(newArr5.has(5));// 存在返回true,不存在返回fals

清除数组所有的值

let arr6 = [1,2,3,4,5]
      let nweArr6 = new Set(arr6)
      nweArr6.clear()   // 清除数组中所有值,没有返回值
      console.log('清除数组中所有值');
      console.log(nweArr6);

数组长度

let arr7 = [1,2,3,4,5]
      let newArr7 = new Set(arr7)
      console.log('获取数组的长度 & size 从1开始');  
      console.log(newArr7.size);  

数组遍历方法

// 这几个与es6的遍历方法一致
      Set.prototype.keys()   //—— 返回键名的遍历器
      Set.prototype.values()   // —— 返回键值的遍历器
      Set.prototype.entries()  // —— 返回键值对的遍历器
      Set.prototype.forEach()  // —— 使用回调函数遍历元素
      // 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),
      // 所以 keys 方法和 values 方法的行为完全一致
目录
相关文章
|
3月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
64 3
|
11月前
|
存储 JSON 对象存储
|
16天前
|
存储 JavaScript 前端开发
ES6新特性(四): Set 和 Map
ES6新特性(四): Set 和 Map
|
1月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
32 1
|
1月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
21 0
|
3月前
|
存储 JavaScript
ES6+新特性-Symbol与Set/Map数据结构
ES6 引入了三种新的数据结构:Symbol、Set和Map。Symbol是唯一且不可变的值,常用于定义对象的独特属性;Set存储不重复值,适合数组去重;Map则是键值对集合,键可为任意类型,提供了更灵活的存储方式。这些新数据结构提供了更高效的操作手段,分别解决了属性命名冲突、数据去重和复杂键值对存储的问题。示例展示了如何使用Symbol、Set和Map进行基本操作。
|
3月前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
3月前
|
JavaScript 前端开发 Java
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官
ES6之Set集合(通俗易懂,含实践)
ES6之Set集合(通俗易懂,含实践)