数据结构
一、js 原生 数据结构: 数据结构都是基于 原生数据结构 实现的。
重点:个人理解,数据结构就是储存数据的结构(如:数组、对象、set、map) https://www.cnblogs.com/zai1/p/11216368.html
1、数组:省略
2、对象: js 对象的属性名是包括空字符串在内的所有字符串,所以对象的属性名可以是中文。
调用对象的方式,两种: 第二种 方式中,属性名是可以动态设置。
stooge.first_name 、
stooge[“first_name”]
3、集合(set):https://www.runoob.com/w3cnote/es6-map-set.html 类似于数组的储存,放在一个集合里
let mySet = new Set(); mySet.add(1); // Set(1) {1} mySet.add(5); // Set(2) {1, 5} mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性 mySet.add("some text"); // Set(3) {1, 5, "some text"} 这里体现了类型的多样性
4、映射(Map):https://www.runoob.com/w3cnote/es6-map-set.html (Map 对象保存键值对)
Map对象和数组有什么区别呢? https://blog.csdn.net/chenna1102cn/article/details/74931966 或 https://www.jb51.net/article/135685.htm
Map 和 数组(二维数组) 可以互相转化。https://blog.csdn.net/z9061/article/details/83413015
map 与 原生对象区别 :https://www.cnblogs.com/mengfangui/p/9934849.html
map 的使用场景:https://www.jianshu.com/p/e6bc5a770b7a(推荐)
理解:map数据类型就是弥补了 对象 属性名 只能字符串的限制。在字典数据结构上优势就很明显,键值对的键可以是数字,不需要把字符串再转成数字。
var myMap = new Map(); var key = "a string"; myMap.set(key, "和键'a string'关联的值"); // 这里的key可以是任意数据类型 myMap.get(key); // "和键'a string'关联的值" myMap.get("a string"); // "和键'a string'关联的值" // 因为 key === 'a string'
二、数据结构:【数据结构 都是基于 js 本身的 数据类对象进行组合的,如对象、数组、map都可以变成字典】
1、字典【key-value】:数据处理中 字典类的数据处理是比较多的。
场景: 比如 地区码 对应 地区名称。使用字典数据结构 处理会方便点。
a、 一般我们从后端获取到的数据结构是一个数组,如
[{code:0001,city:'杭州'},{code:0002,city:'上海'},{code:0003,city:'南昌'}]
· 直接处理这种结构,总是要做一个循环,根据一个code值,去查对应的地区。如果把这种数据变成 字典 的数据结构。直接通过code值,获取到对应的地区。如下,字典结构:
{'0001':'杭州','0002':'上海','0003':'南昌'}
b、js中可以实现 字典的 数据结构的 有几种方式:数组型的字典、对象型的字典、映射型(Map)型的字典。
// 数组型 字典 let arrList = [] arrList['0001'] = '杭州' arrList['0002'] = '上海' arrList['0003'] = '南昌' // 对象型 字典 let arrList = {} arrList['0001'] = '杭州' arrList['0002'] = '上海' arrList['0003'] = '南昌' // 映射型 字典 let arrList = new Map() arrList.set('0001', '杭州') arrList.set('0002', '上海') arrList.set('0003', '南昌')
扩展知识:js的数组 如果 手动设置下边的话,这个数值就不能按照正常的数组来使用。因为数组长度可能就不准确了。 https://www.cnblogs.com/goloving/p/9180588.html
let arr = [] // 如果下边是字符串 arr['name'] = 'nice' // arr.length = 0 // 如果下标是 数字,以最大的下标表示 length arr[80] = 'ueue' // arr.length = 81
2、列表:https://www.jianshu.com/p/cea9f3be42f5
var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: "请假申请", pid: 1 }, { id: 3, name: "出差申请", pid: 1 }, { id: 4, name: "请假记录", pid: 2 }, { id: 5, name: "系统设置", pid: 0 }, { id: 6, name: "权限管理", pid: 5 }, { id: 7, name: "用户角色", pid: 6 }, { id: 8, name: "菜单设置", pid: 6 }, ];
对列表的操作:【根据需要,可以实现各种操作。这里就说下常用的 添加 和 查找功能】
添加:JS中一般通过数组的push方法,塞进去。【其它方法这里不介绍】
查找:查找 name为特定值的那一项,它的pid的值? 【待补充。。。】
3、树:树结构是可以转化为列表的,即树结构的数据可以使用列表表示。https://blog.csdn.net/u013373006/article/details/82108873
var data = [ {id: 1, name: "办公管理", pid: 0 , children:[ { id: 2, name: "请假申请", pid: 1, hildren:[ { id: 4, name: "请假记录", pid: 2 }, ], }, { id: 3, name: "出差申请", pid: 1}, ] }, {id: 5, name: "系统设置", pid: 0 , children:[ { id: 6, name: "权限管理", pid: 5, hildren:[ { id: 7, name: "用户角色", pid: 6 }, { id: 8, name: "菜单设置", pid: 6 }, ] }, ] }, ];
树结构转化为列表:【因为列表中 pid 项 说明了,当前项所在树的层级。】
注意:这数组的顺序是有意义的,只要数组下面的pid和他一样或比它小,后面的数组就不是他的后代节点了。
var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: "请假申请", pid: 1 }, { id: 3, name: "出差申请", pid: 1 }, { id: 4, name: "请假记录", pid: 2 }, { id: 5, name: "系统设置", pid: 0 }, { id: 6, name: "权限管理", pid: 5 }, { id: 7, name: "用户角色", pid: 6 }, { id: 8, name: "菜单设置", pid: 6 }, ];
对树的操作:
递归查找某一项:https://blog.csdn.net/weixin_45613604/article/details/109839225