ES6new Set 使用方法

布满荆棘的人生 2022-12-01 03:55 226阅读 0赞

多了不说少了不唠代码说话:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. </body>
  8. </html>
  9. <script type="text/javascript">
  10. //定义数据
  11. let setData=new Set([1,2,"yang"]);
  12. console.log(setData);//Set(3) {1, 2, "yang"}
  13. //长度获取
  14. console.log(setData.size);//3
  15. console.log(setData.values());//SetIterator {1, 2, "yang"}
  16. //添加元素
  17. setData.add('zhangsan');
  18. console.log(setData);//Set(4) {1, 2, "yang", "zhangsan"}
  19. //查看元素是否存在
  20. let bool=setData.has('zhangsan');
  21. console.log(bool);//true
  22. //删除某个元素
  23. setData.delete('zhangsan');
  24. console.log(setData);//Set(3) {1, 2, "yang"}
  25. //清除所有值
  26. setData.clear();
  27. console.log(setData);//Set(0) {}
  28. //new Set转数组 Array.from:方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
  29. console.log(Array.from(new Set(['yang',1,3])));//["yang", 1, 3]
  30. console.log([...new Set(["yang", 1, 3])])//["yang", 1, 3]
  31. //new Set过滤字符串中满足小于5的字符串数据保留,1,3]
  32. let setArr=new Set('12345678');
  33. let fil=new Set([...setArr].filter(item=>item<5));
  34. console.log(fil);//Set(4) {"1", "2", "3", "4"}
  35. //数组去重
  36. let arrData=[1,2,3,4,5,4,3,2,1];
  37. arrData=[...new Set(arrData)];
  38. console.log(arrData);
  39. console.log("遍历new Set数据");
  40. //遍历new Set数据
  41. //方式1:
  42. new Set(['c','b','a']).forEach((val,index,arr)=>{
  43. console.log(val,index,arr);/*
  44. 结果:
  45. c c Set(3) {"c", "b", "a"}
  46. b b Set(3) {"c", "b", "a"}
  47. a a Set(3) {"c", "b", "a"}
  48. */
  49. })
  50. //方式2:
  51. for(let val of new Set(['c','b','a'])){
  52. console.log(val)/*c b a*/
  53. }
  54. </script>

注意:我这里讲的Set和Map不是Array中原型对象的方法,而是ES6新规定的数据类型,类似Array,是JS中的内置对象。
所有的方法描述参考:MDN文档描述 以及阮一峰ES6教程

Set

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

Set是一个构造函数,需要new来创建一个对象,有了Set对象可以很容易得到不重复的元素

  1. const s = new Set();
  2. [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
  3. for (let i of s) {
  4. console.log(i);
  5. }
  6. // 2 3 5 4

注意:两个相同的空对象是不同的元素,不会被去掉

可以先看看Set原型对象中有哪些方法和属性:

  1. console.dir(Set.prototype);
  • 1

在这里插入图片描述

一、属性

1.Set.prototype.constructor

构造函数,默认就是Set函数。

2.Set.prototype.size

返回Set实例的成员总数。

二、方法

  1. 方法分为:操作方法(用于操作数据)和遍历方法(用于遍历成员)。

操作方法

add(value):添加某个值,返回 Set 结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。

1.Set.prototype.add()

参数:value 需要添加到set中的值
返回值:Set对象本身

MDN:add() 方法用来向一个 Set 对象的末尾添加一个指定的值。

  1. let s = new Set();
  2. s.add(1);
  3. s.add(2);
  4. s.add(3);
  5. s.add(4);
  6. console.log(s);//Set(4) {1, 2, 3, 4}

2.Set.prototype.clear()

参数:无
返回值:undefined

MDN:clear() 方法用来清空一个 Set 对象中的所有元素。

  1. s.clear();
  2. console.log(s);//Set(0) {}

3.Set.prototype.delete()

参数:要删除的元素
返回值:成功返回true,失败返回false

MDN:delete() 方法可以从一个 Set 对象中删除指定的元素。

  1. const s = new Set([1,2,3,4]);
  2. s.delete(1);//Set(3) {2, 3, 4} true
  3. s.delete('1');//false

4.Set.prototype.has()

MDN:has() 方法返回一个布尔值来指示对应的值value是否存在Set对象中。

参数:测试的元素是否存在Set中
返回值:存在返回true,不存在返回false

  1. const s = new Set();
  2. s.add('foo');
  3. s.has('foo');//true
  4. s.has('bar');//false

遍历方法

keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员

1.Set.prototype.forEach()

MDN:forEach 方法会根据集合中元素的插入顺序,依次执行提供的回调函数。

参数:回调函数callBack(element, index, thisArg)
返回值:undefined

  1. function logSetElements(value1, value2, set) {
  2. console.log("s[" + value1 + "] = " + value2);
  3. }
  4. new Set(["foo", "bar", undefined]).forEach(logSetElements);
  5. // logs:
  6. // "s[foo] = foo"
  7. // "s[bar] = bar"
  8. // "s[undefined] = undefined"

2.Set.prototype.values() / keys()

MDN:values() 方法返回一个 Iterator 对象,这个对象以插入 Set 对象的顺序包含了原 Set 对象里的每个元素。
keys() 方法是这个方法的别名 (出于与 Map 对象保持相似的原因); 它的行为与 value 方法完全一致,返回 Set 对象的元素。

大白话就是:set中只有键名,只有值,所以value和keys是一样的

返回值:将返回一个新生成的可迭代对象,以插入 Set 对象的顺序返回其包含的每个元素的值。

3.Set.prototype.entries()

MDN:entries() 方法返回一个新的迭代器对象 ,这个对象的元素是类似 [value, value] 形式的数组,value 是集合对象中的每个元素,迭代器对象元素的顺序即集合对象中元素插入的顺序。由于集合对象不像 Map 对象那样拥有 key,然而,为了与 Map 对象的 API 形式保持一致,故使得每一个 entry 的 key 和 value 都拥有相同的值,因而最终返回一个 [value, value] 形式的数组。

大白话:为了凑成键值对的形式,键名等于键值

  1. let set = new Set(['red', 'green', 'blue']);
  2. for (let item of set.keys()) {
  3. console.log(item);
  4. }
  5. // red
  6. // green
  7. // blue
  8. for (let item of set.values()) {
  9. console.log(item);
  10. }
  11. // red
  12. // green
  13. // blue
  14. for (let item of set.entries()) {
  15. console.log(item);
  16. }
  17. // ["red", "red"]
  18. // ["green", "green"]
  19. // ["blue", "blue"]

遍历的应用

  • 与数组搭配,去掉重复的元素

    let set = new Set([‘red’, ‘green’, ‘blue’,’blue’]);
    let array = […set];
    console.log(array);//(3) [“red”, “green”, “blue”]

  • 实现并集(Union)、交集(Intersect)和差集(Difference)。

    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);

    // 并集
    let union = new Set([…a, …b]);
    // Set {1, 2, 3, 4}

    // 交集
    let intersect = new Set([…a].filter(x => b.has(x)));
    // set {2, 3}

    // 差集
    let difference = new Set([…a].filter(x => !b.has(x)));
    // Set {1}

发表评论

表情:
评论列表 (有 0 条评论,226人围观)

还没有评论,来说两句吧...

相关阅读

    相关 es6 set和weakset

    五.Set和WeakSet 数据结构是ES6新增。    它与数组非常相似,但是Set数据结构的成员都是唯一的。    特别说明:Set中只能添加一个NaN。   

    相关 es6Set(2)

    脑阔痛Ծ‸Ծ,我终于又开始学es6啦~ es6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 什么是set?大致长这样 var

    相关 ES6Set小结

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成 Set 数据结构。 const s