Set 集合,不同于 Array,是一种没有重复值的集合。

以下代码出自于《JavaScript 权威指南(第六版)》P217,注意:这里并不是指 es6 / es2015 中的 Set 集合。它只是提供了一种实现类的例子,因为代码写得很巧妙,我就想记录下来并分享给大家。

// 定义一个 Set 构造函数
function Set() {
this.values = {}; // values 以键值对的形式表示集合的数据
this.n = 0; // n 集合中值的个数
// arguments 是实际参数的一个类数组对象
// 保证在 new Set(1,'sarah',{}) 初始化构造函数时调用原型上的 add 方法,将传入的参数添加到集合中
this.add.apply(this, arguments);
} // 将每个参数添加至集合中
Set.prototype.add = function() {
// 遍历每一个参数
for (var i = 0; i < arguments.length; i++) {
var val = arguments[i], // 值
str = Set._v2s(val); // 键:通过值得到相应的键
// 保证集合无重复值
if (!this.values.hasOwnProperty(str)) {
this.values[str] = val;
this.n++; // 集合中值的计数加一
}
}
return this; // 支持链式调用
} // 删除元素
Set.prototype.remove = function() {
// 遍历每一个参数
for (var i = 0; i < arguments.length; i++) {
var str = Set._v2s(arguments[i]); // 通过值得到相应的键
if (this.values.hasOwnProperty(str)) { // 若 values 集合中存在该属性
delete this.values[str]; // 删除元素
this.n--; // 集合中值的计数减一
}
}
return this; // 支持链式调用
} // 检测是否包含某个值
Set.prototype.contains = function(value) {
return this.values.hasOwnProperty(Set._v2s(value));
} // 返回集合的大小
Set.prototype.size = function() {
return this.n;
} // 遍历集合中的所有元素,在指定的上下文中调用回调函数 f
Set.prototype.foreach = function(f, context) {
for (var s in this.values) {
if (this.values.hasOwnProperty(s)) {
f.call(context, this.values[s]);
}
}
} // 在 Set 方法上定义一个自定义属性 _v2s
// 该属性的值是一个方法,用于将传入的值转成对应的字符串(其实就像是打标签)
Set._v2s = function(val) {
switch (val) {
case undefined: return 'u'; // 如果是 undefined,就返回 'u'
case null: return 'n';
case true: return 't';
case false: return 'f';
default: switch (typeof val) {
case 'number': return '#' + val; // 如果是数字,就添加 # 前缀 ,例如 #123, #0.5
case 'string': return '"' + val; // 如果是字符串,就添加 " 前缀 , 例如 "hello, "world
default: return '@' + objectId(val); // 如果是数组、函数、对象等,就添加 @ 前缀,objectId 方法会返回一个特定数字,如:@100
}
} function objectId(o) {
var prop = "|**objectid**|"; // 给数组/ 函数/ 对象定义一个私有属性,用以存放 id
if (!o.hasOwnProperty(prop)) { // 添加该属性前先判断该对象是否已经存在该属性
o[prop] = Set._v2s.next++; // 不存在则添加该属性,值为 next
}
return o[prop];
}
}
// 在 Set._v2s.next 方法上定义一个自定义属性 next,初始值为 100
// 这样做的好处是,避免了全局变量污染,并且将该属性与对应的方法绑定在一起
Set._v2s.next = 100;

以上代码就定义好了一个 Set 类,它可以向集合中添加元素,也可以删除元素,还可以查询某个元素是否在该集合中等等。下面我们就来测试一下:

var arr  = [3, 4, 5];
var set = new Set(1, 1, 3, 'sarah', null, undefined, function () {}, arr, {});
console.log(set);

打印 set,结果如下:

我在 new Set ( ) 的时候传入了 9 个参数,但打印结果中显示 n = 8,并且参数 1 只出现了一次,即 #1 。这说明了,set 集合不会添加重复值。

其它示例:

    var arr  = [3, 4, 5];
var set = new Set(1, 1, 3, 'sarah', null, undefined, function () {}, arr, {}); console.log(set.remove(null)); // n = 7
console.log(set.contains('sarah')); // true
console.log(set.contains('lissy')); // false set.add([3, 4, 5]); // 可以成功,因为数组是引用类型,当前添加的这个 [3, 4, 5] 跟之前的 arr 不是指向同一个引用
console.log(set.size()); //

我写这篇文章的目的不在于向大家提供 Set 这个构造函数,主要还是为了加深对类的理解。这其中在函数上定义自定义属性这一操作,是我在之前的代码中没有用到过的,它可以解决一些全局变量的问题,又可以和对应的函数紧密关联在一起,我觉得非常有用。

作者不才,文中若有错误,望请指正,避免误人子弟。

Set.js--创建无重复值的无序集合的更多相关文章

  1. MYSQL中防止插入重复记录的解决方案(无重复值更新)

    说明:一般我们使用MYSQL插入记录时,类似于这样的语句: insert into table_name(email,phone,user_id) values(‘test9@163.com’,’99 ...

  2. JS 数组去重复值

    var arr1 = [90, 91, 92]; var arr2 = [80, 81]; var arr3 = [80, 71, 72, 73]; var arr = arr1.concat(50, ...

  3. js 数组排除重复值(string)

    前提:数组中的元素类型为:string 在网上看了许多高大尚的文章,还是解决不了我的string arry 的问题,只能怪自己脑残了,上代码: <!DOCTYPE html> <ht ...

  4. js 创建List<Map> 这种格式的集合

    //赋值 var list_map = new Array(); for ( var i = 0; i < 10; i++) { list_map.push({baidux:'baidux'+i ...

  5. js中var的有或无--重复声明和以后的声明

    js中var的有或无--重复声明和以后的声明 使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误. 如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色. 如果重复 ...

  6. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  7. JS前端无侵入实现防止重复提交请求技术

    JS前端无侵入实现防止重复提交请求技术 最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...

  8. 【转】javascript中值传递,地址传递,引用传递的问题(使用js创建list对象时会用到)

    function initEditModal_SI(node) { if (node.siArray == undefined) { node.siArray = new Object(); } va ...

  9. JS两个数组比较,删除重复值巧妙方法

    //方法一 var arr1 = [1,2,3,4,5,6,7,8]; //数组A var arr2 = [1,2,3,11,12,13,14];//数组B var temp = []; //临时数组 ...

随机推荐

  1. linux centos6.5安装KVM

    1.安装kvm,vnc软件 http://www.server110.com/kvm/201404/10467.html yum install kvm,缺啥补啥 yum install kvm km ...

  2. 程序员十大热门flag,有你的吗?

    2018的尾声,南方人期盼已久的下雪天终于到了,实在是太鸡冻了! 而赏雪的喜悦也伴随着寒冷的忧伤 早上起床越来越难,衣服怎么裹都还是冷 这时,穿搭届的神话般的人物——程序员们,可能又要引起轰动了吧! ...

  3. 痞子衡嵌入式:一表全搜罗常见低功耗广域物联网协议(NB-IoT/eMTC/LoRa/SigFox...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是低功耗广域物联网协议. 上一篇痞子衡给大家搜罗了短距离无线通信协议,它是物联网的基础,但它的应用距离比较短,对于长距离的物联网应用鞭长莫 ...

  4. babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects

    原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...

  5. 【转载】C#将图片转换为二进制流调用

    在C#中可以使用MemoryStream类.BinaryFormatter类等来操作图片,将图片读取到二进制数据流中,最终转成二进制数据流进行调用,详细的实现如下方法所示. private byte[ ...

  6. WPF TabControl Unload俩次的解决方案

    WPF中,有些控件会多次触发Unload,有点莫名其妙~ Unload的多次触发 TabControl的内容,我是这么设置的: 在TabItem的CacheSettingView中,监听Loaded/ ...

  7. [PHP] PHP多个进程配合redis的有序集合实现大文件去重

    1.对一个大文件比如我的文件为 -rw-r--r--  1 ubuntu ubuntu  9.1G Mar  1 17:53 2018-12-awk-uniq.txt 2.使用split命令切割成10 ...

  8. C# 处理PPT水印(一)——添加水印效果(文字水印、图片水印)

    对文档添加水印可以有效声明和保护文档,是保护重要文件的方式之一.在PPT文档中同样也可以设置水印,包括文本水印和图片水印,本文将讲述如何通过Spire.Presentation for .NET来对P ...

  9. Apollo配置中心动态刷新日志级别

    Apollo配置中心动态刷新日志级别 添加次配置后,当在apollo上面调整日志级别不需要重启服务器,马上就能生效 /** * 结合apollo动态刷新日志级别 * @author: nj * @da ...

  10. 加载loading对话框的功能(不退出沉浸式效果)

    上一篇基于修改系统源码的前提下,实现了完全的沉浸式体验效果.可参考这篇 戳这 一.自定义Dialog 在沉浸式效果下,当界面弹出对话框时,对话框将获取到焦点,这将导致界面退出沉浸式效果,那么是不是能通 ...