JavaScript 数据结构 之集合创建

目录
  • 一、什么是集合
  • 二、创建集合类
    • 1.has 方法
    • 2.add 方法
    • 3.delete 和 clear 方法
    • 4.size 方法
    • 5.values 方法
  • 三、使用集合
  • 总结

前言:

集合这个词应该比较耳熟,大多数人没接触代码前就学过了。回想一下你的高一数学课本上是不是出现过这个词,就在第一章,概念如下:

一般地,我们把研究的对象统称为元素,把一些元素组成的总体叫作集合。

你看,集合元素,是不是与今天我们学习的数据结构相通呢?

一、什么是集合

集合是由一组无序且唯一(不能重复)的元素组成。数据结构中的集合,对应的是数学概念当中的有限集合

在数学中,比如要展示一个城市集合,我们是这么写的:

N = {北京, 上海, 深圳, 广州}
复制代码

那对应到 JavaScript 当中,就是一个简单的数组了:

var cities = ['北京', '上海', '深圳', '广州']

数学中还有一个 空集 的概念,用 {} 表示,也就是 JavaScript 中的空数组 []

集合的不同之处在于,我们前面学习的栈,队列,链表,都是有序集合。而集合是比较少见的无序集合的数据结构。

因为集合是唯一且无序的,所以我们不能像有序的数据结构一样,用下标来定位元素。无序集合的唯一标识就是元素本身的值。

JavaScript 在 ES6 中也提供了对标集合的数据类型 Set。Set 允许存储唯一的任意类型的值,其实就是集合的实现。

在数学中,集合也有交集,并集,差集等基本运算,本篇我们也会实现。

下面我们自己动手实现一个 Set。

二、创建集合类

我们依然用 class 语法来创建基本结构:

class Set {
  constructor() {
    this.items = {};
  }
}

与栈,队列的原则一致,用一个对象来存储集合的元素最为合适。再者因为元素的唯一性,对于基本类型元素,我们可以直接以元素的值作为对象 Key 值,而不是 0,1,2...

下面就是我们需要声明的方法:

  • add:向集合添加新元素
  • delete:从集合中删除一个元素
  • has:检测元素是否在集合中
  • clear:清空集合
  • size:返回集合的长度
  • values:返回包含集合中所有元素的数组

1.has 方法

首先实现 has 方法,因为它会被 add,delete 等方法调用。

这个方法用来检测某一个元素是否在集合中,存在则返回 true,否则返回 false

has(item) {
  return item in this.items;
}

我们在开头部分说了,直接用元素本身的值作为对象的 key,因此可以直接用 JavaScript ES6 提供的 in 运算符来检测属性是否在对象当中。

还有一种传统的方式如下,与上面效果一致:

has(item) {
  return Object.prototype.hasOwnProperty.call(this.items, item);
}

2.add 方法

有了 has 方法,add 方法的实现就比较简单:

add(item) {
  if(this.has(item)) {
    return false;
  }
  this.items[item] = item
  return true
}

因为要保持元素唯一性,所以在添加元素前先判断当前元素是否在,存在则不添加,不存在才添加。

3.delete 和 clear 方法

这两个方法都是删除元素,前者删除一个元素,后者删除所有元素。

// 删除
delete(item) {
  if(this.has(item)) {
    delete this.items[item]
    return true
  }
  return false
}
// 清空
clear(item) {
  this.item = {}
}

删除也比较简单,删除或清空对象对属性即可。

4.size 方法

size 方法对作用就是返回集合的长度(有多少个元素),实现这个方法有多种方式。

方式一:和之前的栈,队列,链表的实现方式一样,用一个属性 count 来表示长度,在添加和删除的时候更新这个属性的值。

方式二:直接使用 ES6 的 Object.keys 方法来获取属性的数组,获取数组的长度:

size() {
  return Object.keys(this.items).length
}

还是第二种方法简单,就选这个。

5.values 方法

和上面的 size 方法一样,也可以直接获取对象属性值的数组:

values() {
  return Object.values(this.items)
}

三、使用集合

上面我们手动实现了集合类,这里来使用一下:

var set = new Set()
set.add('北京')
set.add('北京')
set.add('上海')
set.add('上海')
// 打印结果
console.log(set.size()) // 2
console.log(set.values()) // ['北京','上海']

添加的检测没问题,再看删除:

console.log(set.has('上海')); // true
console.log(set.has('成都')); // false
set.delete('上海');
console.log(set.values()); ['北京']
console.log(set.has('上海')); // false

删除也没问题,完美实现!

总结

本篇我们手动实现了集合的基本功能,下一节我们在此基础上,实现集合的基本运算

到此这篇关于JavaScript 数据结构 之集合创建的文章就介绍到这了,更多相关JavaScript 集合内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS使用reduce()方法处理树形结构数据

    定义 reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值. reduce() 与forEach().map().filter()这些方法一样,也会对数组中的每一项进行遍历,但是reduce() 可以将遍历的前一个数组项产生的结果与当前遍历项进行运算. 语法 array.reduce(function(prev, cur, index, array){ ... }, init); 回调函数中的参数: prev 必需.表示调用回调时的返

  • JavaScript中的Map数据结构详解

    目录 1. 什么是 Map 2. Map 构造函数 2.1) 数组 2.2) Set 2.3) Map 3. Map 的实例属性和方法 3.1) Map 的属性 size 3.2) Map 的方法 set get has delete clear forEach 4. Map的注意事项 5. Map的使用场景 总结 1. 什么是 Map Map 就是映射的意思,即从键到值的映射. Map 保存键值对,并且能够记住键的原始插入顺序. 那么它和 Object 有什么区别 ? 对象一般用字符串作键 c

  •  JavaScript 数据结构之散列表的创建

    目录 一.什么是散列表 二.创建散列表 1.创建散列函数 2.put 方法 3.get 方法 4.delete 方法 三.使用散列表 四.总结 散列表与字典基本一致,区别是字典存储的 key 是字符串,而散列表是一个数值(哈希值). 到底如何理解散列表呢?下面进入正题. 一.什么是散列表 散列表,也叫做哈希表,可以根据键(Key)直接访问数据在内存中存储的位置. 简单来说,散列表就是字典的另一种实现,它的优势是比字典能更快地找到一个值.在常规的字典操作中,使用get()方法获得一个值,需要遍历整

  • js如何构造elementUI树状菜单的数据结构详解

    背景说明 elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格. 数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型. 需要把list转换成tree的结构. elementUI树状菜单的数据结构 每个节点有4个属性,id.label.newVal.children数组: 通过children数组包含关系标示上下级. var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id:

  • Go语言的数据结构转JSON

    目录 结构体转为 JSON 格式 接口转为 JSON 格式 Marshal() 函数的原型 总结 在日常工作中,除了需要从 JSON 转化为 Go 的数据结构.但往往相反的情况是:我们需要将数据以 JSON 字符串的形式发送到 Web 服务器.今天我们将学会如何从一个结构化数据编码为 JSON . Json(Javascript Object Nanotation)是一种数据交换格式,常用于前后端数据传输.任意一端将数据转换成json 字符串,另一端再将该字符串解析成相应的数据结构,如strin

  • 一组JS创建和操作表格的函数集合

    stone.js //**************************************神吹表格操作函数******************************************************* //隐藏列 function setHiddenRow(tb,iCol){ for (i=0;i<oTable.rows.length;i++){ tb.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCo

  • JavaScript 数据结构之集合创建(2)

    目录 前言 一.集合运算 1.并集 2.交集 3.差集 4.子集 二.使用集合运算 三.总结 前言 上一篇JavaScript 数据结构 之集合创建(1)我们介绍了什么是集合,并且手动实现了一个集合的类.简单总结,集合就是一组元素唯一,并且没有顺序的数据集,关键是元素唯一. ES6 提供了原生的集合支持,就是新增的 Set 数据类型.其实在上篇我们几乎已经实现了 Set 的所有功能,如果还不了解集合,请看上篇内容 但是我们也说到,Set 的基本功能中不包含数学运算如 交集,并集,差集,事实上这也

  • JavaScript 数据结构 之集合创建

    目录 一.什么是集合 二.创建集合类 1.has 方法 2.add 方法 3.delete 和 clear 方法 4.size 方法 5.values 方法 三.使用集合 总结 前言: 集合这个词应该比较耳熟,大多数人没接触代码前就学过了.回想一下你的高一数学课本上是不是出现过这个词,就在第一章,概念如下: 一般地,我们把研究的对象统称为元素,把一些元素组成的总体叫作集合. 你看,集合,元素,是不是与今天我们学习的数据结构相通呢? 一.什么是集合 集合是由一组无序且唯一(不能重复)的元素组成.数

  • JavaScript 数据结构之字典方法

    目录 一.什么是字典 二.创建字典类 1.hasKey 方法 2.set 方法 3.remove 方法 4.get 方法 5.keys, values, keyValues 方法 6.forEach 方法 7.clear, size, isEmpty 方法 三.使用字典 四.总结 前言: 经过上一篇JavaScript 数据结构之集合创建(2)的学习,数据结构的集合部分已经完结了.那么下面我们又要认识一个新的数据结构,它的名字相信你绝不陌生,它就是字典. 这个字典可不是查汉字时用的那个字典.字典

  •  JavaScript 数据结构之散列表的创建(2)

    目录 一.处理散列值冲突 1.分离链接 2.put 方法 3.get 方法 前言: 上一篇我们介绍了什么是散列表,并且用通俗的语言解析了散列表的存储结构,最后动手实现了一个散列表,相信大家对散列表已经不陌生了. 如果还不清楚散列表,请先阅读上一篇文章:JavaScript 数据结构之散列表的创建(1) 上篇末尾我们遗留了一个问题,就是将字符串转化为散列值后可能出现重复.当以散列值(hash 值)为 key 存储数据时,就会有覆盖已有数据的风险.本篇我们看如何处理散列值冲突的问题,并实现更完美的散

  • javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

    本文实例讲述了javascript数据结构之多叉树经典操作.分享给大家供大家参考,具体如下: 多叉树可以实现复杂的数据结构的存储,通过遍历方法可以方便高效的查找数据,提高查找的效率,同时方便管理节点数据.javascript的DOM其实就是以多叉树的形式存储的.下面用javascript来实现多叉树的数据结构 1.创造一个节点 数据是以节点的形式存储的: class Node { constructor(data) { this.data = data; this.parent = null;

  • JavaScript数据结构与算法之栈与队列

    学习起因 曾经有一次在逛V2EX时,碰到这么一个帖子. 数学完全还给老师了,想学回一些基础数学,大概是高中程度的,有什么书籍推荐? 发帖的楼主大学没有高数课程,出去工作时一直在从事前端的工作.感觉到数学知识的匮乏,所以想补一补数学. 看了看帖子,感觉和我很像,因为我的专业是不开高数的,我学的也是前端.也同样感觉到了数学知识匮乏所带来的困顿.同时因为自己的数学思维实在是不怎么好,所以决定努力补习数学与计算机基础知识. 当时也有人说:"前端需要什么数据结构与算法",但是对于这个事情我有自己

  • JS中的算法与数据结构之集合(Set)实例详解

    本文实例讲述了JS中的算法与数据结构之集合(Set).分享给大家供大家参考,具体如下: 集合(Set) 同数学中所学的一样,集合(Set)是由一组无序但彼此之间又有一定关系性的成员构成,每个成员在集合中只能出现一次,不同于我们之前说的字典,链表之类的,它是一种包含了不同元素的数据结构(集合中的元素称为成员),从其定义中我们可以看出它具有两个很重要的特征:首先,集合中的成员是无序的,其次,集合中的成员是不相同的,即集合中不存在相同的成员. 实际上,很多编程语言中,集合并不是一种数据类型,但是如果你

  • JavaScript字典与集合详解

    目录 字典 什么是字典 JavaScript中的字典 字典的应用 集合 什么是集合 JS中的集合 集合中的操作 交集.并集.差集的封装 字典 什么是字典 说到字典,第一时间想到的应该就是新华字典,实际上,这跟编程中的字典类似,两者都有一个特点,就是一一对应(yi yi dui ying),或者说是映射. 字典通常以**[键,值]** 对的形成存储,因为是以键值对的形式存储,更方便通过key来获取value 比如存储用户信息: { 'username': '一碗周', 'age': 18 } Ja

  • javascript中的对象创建 实例附注释

    javascript中的对象创建声明: var obj = {}; 或者 var obj = new Object(); 为对象加入属性,方法: //=====第一种写法==================================== obj.name = '小明'; //为对象加属性 obj.updateName = function(name){//为对象定义updateName方法 this.name = name; } alert(obj.name); obj.updateNam

  • JavaScript数据结构之二叉查找树的定义与表示方法

    本文实例讲述了JavaScript数据结构之二叉查找树的定义与表示方法.分享给大家供大家参考,具体如下: 树是一种非线性的数据结构,以分层的方式存储数据.树被用来存储具有层级关系的数据,比如文件系统中的文件:树还被用来存储有序列表.这里将研究一种特殊的树:二叉树.选择树而不是那些基本的数据结构,是因为在二叉树上进行查找非常快(而在链表上查找则不是这样),为二叉树添加或删除元素也非常快(而对数组执行添加或删除操作则不是这样). 树是n个结点的有限集.最上面的为根,下面为根的子树.树的节点包含一个数

随机推荐