Javascript ES6集合（SET）类型✪ ω ✪

最新推荐文章于 2022-09-27 17:21:34 发布
最新推荐文章于 2022-09-27 17:21:34 发布
阅读量1.4k 收藏 1
点赞数 2
分类专栏： # JavaScript Web 文章标签： javascript set 集合 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xianzhe_/article/details/124406216
版权

在这里插入图片描述

Javascript ES6集合（SET）类型✪ ω ✪

文章目录

一、集合

集合（Set），是ES6中新出的数据类型，这于数学中的集合概念是一样的。
在讲解 JS 的集合之前，我觉得还是有必要先回顾一下数学集合中的主要分类：并集，交集，差集
在这里插入图片描述
JavaScript 集合特性

  • Set是ES6提供的新的数据结构，允许存储任何数据类型。
  • 天生去重性，每个元素都是唯一，互不相同，这是也是集合最主要的特点。
  • 可以根据插入的顺序迭代它的元素。

简单概况： 集合是一个无序且不重复的数据类型

二、利用其去重性👲🏻

上面已经提到过了，集合天生去重，那么可以利用集合的去重性去做一些事情

  • 数组去重：
    张三使用了障眼法，造出了多个假的张三，看看罗老师如何去治张三

    // const name = ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '罗翔']
let names = Array(10).fill("张三", 0, 10)             // 也可以这样去添加多个张三
names.push("罗翔");
names = [...new Set(names)]
console.log(names)

    ["张三", "罗翔"]

    是吧，使用集合一下就能破解张三的障眼法，揪出唯一的一个张三

  • 接下来看一个去重性的应用，不重复抽奖

    const res = new Set();
const names = ["张三", "李四", "小明", "李华", "约翰", "Jone", "Mark", "Bill", "PrettyGirl"];
while (res.size < 3) {
    res.add(names[Math.abs(parseInt(Math.random() * 8))])
}
console.log(res)

    程序逻辑： 使用到了random 随机选出一个名字，在将此名字添加到集合里，如果是重复的将不进行添加操作，循环条件为判断集合人数是否小于3

三、迭代Set

在讲解下面的内容前，有必要去了解一下集合中的数据结构。

  • 要先明白的是传统的索引方法是无法取出集合数据。

     const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
 for (let i=0; i < vegetable.size; i++) {
     // 无法取出, 输出结果为undefined
     console.log(vegetable[i])
 }

  • 因为集合没有索引的原因，使用for in 循环也是无法取值。

    const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
// 循环不执行
for (let key in vegetable) {
    console.log(key)
}

  • 只有使用 for of 循环方式进行取值，才能有结果

    const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
for (let value of vegetable) {
    console.log(value)
}

    青菜
萝卜
苹果
香蕉
土豆
橘子

四、集合实例对象的方法

1)、Set.prototype.add(value)

在Set对象尾部添加一个元素，并且返回该Set对象。

const vegetable = new Set(["青菜", "萝卜"]);
vegetable.add("苹果");
console.log(vegetable);

根据会返回该Set对象的原理，可以实现对于该Set对象的链式操作。

const vegetable = new Set(["青菜", "萝卜"]);
vegetable.add("苹果").add("香蕉").add("土豆").add("橘子");
console.log(vegetable);

{"青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"}

2)、Set.prototype.clear()

移除Set对象内的所有元素。

const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
vegetable.clear();
console.log(vegetable);     // 清空后集合为空

3)、Set.prototype.delete(value)

移除集合中与这个值相等的元素，并返回是否删除成功。
在执行删除操作前，程序内部会先执行Set.prototype.has(value)，判断要删除的元素是否存在， 如果该元素存在，则在删除元素后返回 true，否则返回 false。

const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
const r1 = vegetable.delete("萝卜");
const r2 = vegetable.delete("卜萝");
console.log(r1, r2);

true false

4)、Set.prototype.entries()

返回一个新的迭代器对象，该对象包含集合对象中的按插入顺序排列的所有元素的值的[value, value] 数组，因为集合只有值的存在，所以数组中的元素都是相等的。

const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
for (let [key, value] of vegetable.entries()) {
    console.log(key, value);
}

5)、Set.prototype.forEach(callbackFn[, thisArg])

按照插入顺序，为Set对象中的每一个值调用一次callBackFn。如果提供了thisArg参数，回调中的this会是这个参数。

参数如下：

  • callbackFn： 为集合中每个元素执行的回调函数，该函数接收三个参数：
    • currentValue： 正在被操作的元素。
    • currentKey：由于集合没有索引，所以 currentKey 也表示这个正在被操作的元素。
    • set：调用当前 forEach 方法的集合对象。
  • thisArg：回调函数执行过程中的 this 值。

演示代码： 👇

vegetable.forEach(function (currentValue, currentKey, set) {
    console.log(currentValue, currentKey, set)
})

青菜 青菜 Set(6){'青菜', '萝卜', '苹果', '香蕉', '土豆',…}
萝卜 萝卜 Set(6){'青菜', '萝卜', '苹果', '香蕉', '土豆',…}
......

6)、Set.prototype.has(value)

返回一个布尔值，表示该值在Set中存在与否。

const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
console.log(vegetable.has("土豆"));       // true
console.log(vegetable.has("豆土"));       // false

7)、Set.prototype.keys()

因为集合只有值的存在，与values()方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。

const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
for (let item of vegetable.keys()) {
    console.log(item)
}

青菜
萝卜
苹果
香蕉
土豆
橘子

8)、Set.prototype.values()

返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。

const vegetable = new Set(["青菜", "萝卜", "苹果", "香蕉", "土豆", "橘子"]);
for (let item of vegetable.values()) {
    console.log(item)
}

青菜
萝卜
苹果
香蕉
土豆
橘子

9)、Set.prototype[@@iterator]()

返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。用法与 Set.prototype.keys() 和 Set.prototype.values() 方法一样。

for (let item of vegetable[Symbol.iterator]()) {
    console.log(item)
}

青菜
萝卜
苹果
香蕉
土豆
橘子

实际上，Set.prototype.keys() 和 Set.prototype.values() 方法返回也是一个迭代器对象，数据内容一致。使用 next() 方法进行观察。

const iterator = vegetable[Symbol.iterator]()
console.log("iterator:", iterator.next())
console.log("iterator:", iterator.next())

const keys = vegetable.keys()
console.log("keys:", keys.next())
console.log("keys:", keys.next())

const values = vegetable.values()
console.log("values:", values.next())
console.log("values:", values.next())

五、扩展集合方法

1)、向集合原型添加方法

/**
 * 更新(update)集合，添加来自 others 中的所有元素, 灵感来自Python
 * @param others: 可迭代对象
 * @return {Set<any>} 添加结果后集合
 */
Set.prototype.update = function (others) {
    if (others.constructor === Set) {
        for (let i of others) {
            this.add(i);
        }
    } else {
        for (let i = 0; i < others.length; i++) {
            this.add(others[i]);
        }
    }
    return this
}

/**
 * 更新集合，移除也存在于 others 中的元素，也就是移除两个集合中都存在的元素
 * @param elems 需要更新的另一集合
 * @return {Set<any>} 返回新的集合
 */
Set.prototype.difference_update = function (elems) {
    for (let e of elems) {
        if (this.has(e)) {
            this.delete(e);
        } else {
            this.add(e);
        }
    }
    return this
}

/**
 * 返回集合的差集方法, 灵感来自Python
 * @param set 需要比较的另一集合
 * @returns {Set<any>} 差集集合
 */
Set.prototype.difference = function (set) {
    const diff = new Set();
    for (let item of set) {
        if (!this.has(item)) {
            diff.add(item);
        }
    }
    return diff
}

/**
 * 返回集合的交集方法, 灵感来自Python
 * @param set 需要比较的另一集合
 * @returns {Set<any>} 交集集合
 */
Set.prototype.intersection = function (set) {
    const common = new Set();
    for (let item of set) {
        if (this.has(item)) {
            common.add(item);
        }
    }
    return common
}

/**
 * 返回集合的并集方法, 灵感来自Python
 * @param set 需要合并的另一集合
 * @returns {Set<any>} 合并集合
 */
Set.prototype.union = function (set) {
    return this.update(set)
}

/**
 * 获取集合长度
 * @return {number} 长度值
 */
Set.prototype.length = function () {
    return this.size;
}

2)、继承
如果想在不影响原本集合构造函数的前提下扩展集合的方法，可以使用继承集合的方式对其扩展。

class MySet extends Set {
    /**
     * 更新(update)集合，添加来自 others 中的所有元素, 灵感来自Python
     * @param others: 可迭代对象
     * @return {Set<any>} 添加结果后集合
     */
    update(others) {
        if (others.constructor === Set) {
            for (let i of others) {
                this.add(i);
            }
        } else {
            for (let i = 0; i < others.length; i++) {
                this.add(others[i]);
            }
        }
        return this
    }

    /**
     * 更新集合，移除也存在于 others 中的元素，也就是移除两个集合中都存在的元素
     * @param elems 需要更新的另一集合
     * @return {Set<any>} 返回新的集合
     */
    difference_update(elems) {
        for (let e of elems) {
            if (this.has(e)) {
                this.delete(e);
            } else {
                this.add(e);
            }
        }
        return this
    }

    /**
     * 返回集合的差集方法, 灵感来自Python
     * @param set 需要比较的另一集合
     * @returns {Set<any>} 差集集合
     */
    difference(set) {
        const diff = new Set();
        for (let item of set) {
            if (!this.has(item)) {
                diff.add(item);
            }
        }
        return diff
    }

    /**
     * 返回集合的交集方法, 灵感来自Python
     * @param set 需要比较的另一集合
     * @returns {Set<any>} 交集集合
     */
    intersection(set) {
        const common = new Set();
        for (let item of set) {
            if (this.has(item)) {
                common.add(item);
            }
        }
        return common
    }

    /**
     * 返回集合的并集方法, 灵感来自Python
     * @param set 需要合并的另一集合
     * @returns {Set<any>} 合并集合
     */
    union(set) {
        return this.update(set)
    }

    length() {
        return this.size;
    }
}

参考资料💖

官方文档：

相关博客👒

XianZhe_
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6_Set数据类型概括
qq_43260366的博客
08-30 465
就个人而言，觉得 keys、values、entries遍历方法作用不大，因为获取的还是遍历器，还是需要遍历 遍历器才能获取数据！存储一组数据(和数组非常相似，区别是无法存储重复的元素(精确相等===))set(集合)数据类型为Es6新增的数据类型(是引用数据类型)；(1)Set 结构的实例有四个遍历方法，可以用于遍历成员。[6]clear()方法用于清除该set的所有成员；[3]delete()方法删除Set结构的某个值。[4]has()方法判断Set结构中是否有该元素。(2)使用for of遍历。...
ES6新特性（中）——ES6的集合（set集合、map集合等）
m0_46420078的博客
12-13 2301
ES6的集合 1、Set集合 2、WeakSet集合 3、Map集合
带你入门 JavaScript ES6 (五) 集合
weixin_34038652的博客
01-12 90
本文同步带你入门 带你入门 JavaScript ES6 (五) 集合，转载请注明出处。 前面我们学习了： for of 变量和扩展语法 块作用域变量和解构 箭头函数 类 本章我们将学习 ES6 中的 Set(集合) 及 WeakSet 集合 的相关用法及使用场景。 一、概述 Set 集合是 ES6 引入的新的内置对象类型，其特点同数...
【JS】ES6-Set
m0_50947589的博客
06-20 389
set（集合）是一种新的数据结构，其特点是数据成员唯一，类似于数组，但是没有索引。
ES6 Set数据类型
雾里看花叹朦胧
10-16 516
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，插入顺序。Set 本身是一个构造函数，用来生成 Set 数据结构。const set = new Set(); set.add(1); set.add(4); set.add(2); set.add(3); for (let val of set) { console.log(val); //1 4 2
日常学习笔记 - ES6中的Set类型
weixin_46737742的博客
03-15 944
Set本质是ES6中新添加的一种数据类型，在结构上类似于数组，但set集合中的元素具有唯一性。
JavaScript ES6函数式编程入门经典_javascript_
10-01
JavaScript ES6函数式编程是现代Web开发中的重要概念，它为开发者提供了更高效、更简洁的编程方式。本文将深入探讨ES6中的函数式编程特性，帮助初学者掌握这一核心技能。 1. **箭头函数**：箭头函数是ES6引入的一种...
ES6中Set和Map用法实例详解
10-15
Set和Map作为ES6的新特性，不仅丰富了JavaScript的数据结构类型，还提高了数据管理的效率。Set适用于存储唯一值的场景，而Map则适用于需要复杂键值对管理的应用。了解并掌握这两者的用法对于前端开发者来说是十分...
Javascript ES6中对象类型Sets的介绍与使用详解
10-19
总之，JavaScript ES6 中的 Set 对象类型提供了一种高效且方便的方式来处理唯一值的集合。无论是在日常开发还是在特定场景如数组去重、集合运算中，Set 都能发挥重要作用，提高代码的可读性和效率。理解并熟练运用 ...
Javascript ES6中数据类型Symbol的使用详解
10-19
Symbol类型是es6新增的一个数据类型，Symbol值通过Symbol函数生成Symbol类型是保证每个属性的名字都是独一无二的，对于一个对象由对个模块构成的情况非常有用，本文主要介绍了Javascript ES6中数据类型Symbol使用的...
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
10-17
主要介绍了JS实现集合的交集、补集、差集、去重运算,结合实例形式分析了ES5与ES6语法环境下的集合常见运算操作技巧,需要的朋友可以参考下
JavaScript集合类：Array、Map、Set
bingguang1993的博客
08-19 354
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/cathar/article/details/53363845 在JavaScript中不像java有那么多的数据结构。在实际工作中，使用对象还是数组需要仔细考虑下。例如：如果实现 Map的功能，既可以使用关联数组，也可以使用对象，那么区别...
JavaScript中ES6的Set的基本用法
weixin_52844244的博客
02-09 247
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
【JS012】ES6的学习笔记之数据结构——集合Set
Commas的博客
08-26 243
日期：2021年8月23日 作者：Commas 注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^ (ง •_•)ง 积跬步以致千里，ES6的学习笔记 1.01365 = 37.7834；0.99365 = 0.0255 1.02365 = 1377.4083；0.98365 = 0.0006 文章目录一、Set的介绍二、Set的属性和方法三、Set的用途 一、Set的介绍 说明：Symbol是ES6引入的一种新的原始数据类型，.
ES6 Set 数据类型
weixin_43931898的博客
10-31 223
定义：Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 语法： new Set([iterable]); 参数： iterable 如果传递一个可迭代对象，它的所有元素将不重复地被添加到新的 Set中。如果不指定此参数或其值为null，则新的 Set为空。 返回值 一个新的Set对象。 set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 ...
js ES6的Set 对象
wu118765783的博客
10-16 172
大家好，我是pkqk，废话不多说直接上代码来更好的了解Set 对象。 //创建Set 对象 let set=new Set(); /* 里面可以直接传null,undefined,字符串,数组。 其他类型要用[]数组的形式来传值 */ let a=new Set([{1:"a"}]); console.log(a); let b=new Set([1]); console.log(b); let c=new Set([Symbol(1)]); console.log(c); let.
ES6 集合
最新发布
无
09-27 744
前言   此文介绍了ES6中集合相关的Set和Map结构，跟随此文你将了解到。 ES6为什么引入Set结构 强弱引用与垃圾回收 WeakMap之polyfill实现 WeakMap的应用场景 Set   Set 是值的集合，类似数组，元素有序且唯一。 属性方法 Set.prototype.size 用于返回Set实例中的元素个数 Set.prototype.add 用于向Set实例末尾添加元素，并返回实例   注意重复的元素不会被添加进去，也就说明了Set内元素是唯一的。 Set.prototype.del
js-es6-set数据结构
diandiwang的博客
10-04 302
集合的基本概念：集合是由一组无序且唯一（即不能重复）的项组成的。这个数据结构使用了与有限集合相同的数学概念，应用在计算机的数据结构中。 特点：key 和 value 相同，没有重复的 value。 数据结构 Set,它类似于数组，但是成员的值都是唯一的，没有重复的值。 1.创建Set  传入的参数放在数组里 let s1=new Set(); let s2=new Set([1,2,3
JavaScript在ES6 中的 Set、Map
过客匆匆，恍如烟
01-13 387
ES6 新增了几种集合类型，简单介绍 Set、Map着两个类型,比较新的 Firefox、Chrome（需要在 about:flags 启用实验性 JavaScript）以及 IE11 都有不同程度的实现。 Set 是 ES6 新增的有序列表集合，它不会包含重复项。Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。之前我
JavaScript ES6：Map与JSON转换及Set数据结构
此外，ES6引入的Set和Map数据结构，以及Iterator和for...of循环等特性，极大地增强了JavaScript处理复杂数据结构的能力，使得它更适合于构建大型应用程序。 总结来说，Map和JSON之间的转换是JavaScript开发中常见的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值