js处理层级数据结构的方法小结


Posted in Javascript onJanuary 17, 2017

开发者对复杂的数据结构的处理能力也是体现开发者水平的一个度量吧。。。最近发现自己对一些嵌套数据结构、层级数据结构的处理能力不大足。。。经常被这些把自己绕晕。。。严重影响开发效率。。。就稍微低总结了一下下。。。

一、mongodb设计层级关系数据(这里主要说的是mongoose)

①假设有这样的一个场景。某个文章下面有评论,每个评论可以被回复,每个回复又可以被回复...

首先,我们知道,普通的一对多的关系,可以通过引用,populate操作找出相应的引用对象,如:

var essaySchema = new mongoose.Schema({ //文章schema
 user:{
 type: mongoose.Schema.Types.ObjectId, //发布者的引用
 ref: 'user', //引用自User Model
 require: true //非空
 },
 ...
});

文章与评论的关系,就是一对多。自然也是按照这种处理方式即可。

但是,评论与回复的关系,就有点意思了。首先,评论和回复,回复与该回复的回复虽然是不同的东西(看着就拗口),但是这些的shema的信息都是由相同的字段构成。也就是说,可以说是自己嵌套了多个自己。

这个时候,就要这样处理了:

//评论Schema定义
var commentSchema = new mongoose.Schema({
 content: {
 type: String,
 require: true
 },
 created: {
 type: Date,
 "default": Date.now
 },
 user: {
 type: mongoose.Schema.Types.ObjectId, //用户的引用
 ref: 'user', //引用自User Model
 require: true //非空
 },
 subComment: [this], //自评论的类型为评论类型,也就是本身类型
});

最关键就是最后一句,实质上就是递归地引用了自身。查找的时候,也确实是需要根据上一层的subComment找到自己。套了深层的时候,查找的时候会容易绕晕,而且查找速度也会降低。建议做层级限制。

实践小项目:一个简单版node+express+mongodb的图片分享

二、实际开发场景中的层级关系数据

①假设有这样的一个场景,有一个商品数组,每个商品有两个维度,颜色和规格。颜色和规格的组合会产生的sku(可以理解为每种组合情况的一个标识)数量为颜色数量*规格数量。当我们渲染完毕之后,顾客每切换一个规格,都要找到相应的sku。

设想一下,假如顾客每切换一个规格,我们就根据第几个商品,切换的规格,没有被切换的规格去查找。那么每次都是一个三重循环。。。

这种情况下,比较好的做法就是,初始化获得数据的时候,建立三维数据,即Array[商品index][颜色][规格]。这样每次切换,只要读取相应的项就可以找到sku了。

但是,假若商品的维度不是二维,而是多维呢,而且不一定每种组合都存在这样的商品的呢?

构造数据的方法,就显得不大明智了,一是组合数过多,并不是每种组合商品都存在,而是循环太多重。

这个时候,又要利用对象去构造数据了。

第一步,根据展示需要构造。展示的时候,只需要知道,某个商品的某个维度是某个值即可。即:

var obj = {[
{'商品':'1',sku:'','维度1':'...','维度2':'...',...}
]}

当点击切换维度的时候,首先根据原来的维度信息,更新用户新选的维度。遍历该新的维度对象,与维度信息数据比较,如果一一相符则找到新的sku。然后再更新即可。

在这里就要明确自己的"筹码"与"目标",根据哪些东西,通过哪些途径可以到达目标。将每一步拆分成一个小方法去做。。。

②假设有这样的一个场景,首先要根据一些规则合并一些请求去请求不同的数据(即返回的数据,是多个参数结合在一起的,必须还要解析出数据原先的对应关系),然后获得部分数据。再用获得的部分数据中某条数据的参数去请求第二个接口。然后获得不同的一些数据。

首先想到的可能是用promise处理,待两个接口都请求完毕后再进行处理。但是假如,第一个接口获得的是大部分主要的数据,第二个是小部分的数据。这个时候,等待第二个接口似乎就有点"不划算"了,特别是在用户体验上,当一个用户打开某个页面的时候,白屏就不好啦。

这个时候,我们就要善于利用对象去构造符合我们的数据对象了。

我们可以这样初始化一个对象:

var obj = {
 '唯一的参数1'+‘_'+'唯一的参数1的id' : {
 第一次请求的数据 : [],
 第二次请求的数据 : [], 
 },
 '唯一的参数2'+‘_'+'唯一的参数2的id' : {
 第一次请求的数据 : [],
 第二次请求的数据 : [], 
 },
 ...
}

总之,就是要找到唯一的东西,来构造对象。然后再根据这个唯一的值把相应的数据填上。好吧,我都说晕了。看个例子:

for(var i = 0;i < data.length; i++){
 for(var j = 0;j < data[i].params.length; j++){
 obj[data[i].groupId + '_' + data[i].params[j].pcId] = {};
 }
}
//请求数据回来后
for(var i = 0;i < data.length; i++){
 for(var j = 0;j < data[i].params.length; j++){
 obj[data[i].groupId + '_' + data[i].params[j].pcId][firstItem] = data[i].params[j].list;
 }
}
//第二次数据回来后
for(var i = 0;i < data.length; i++){
 for(var j = 0;j < data[i].params.length; j++){
 obj[data[i].groupId + '_' + data[i].params[j].pcId][moreItem] = data[i].params[j].list;
 }
}

注意,如果是用vue,因为第二次请求的数据参数来自第一次,所以请二次数据回来之后,需要用全局api,set方法处理才会生效。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS实现的最简Table选项卡效果
Oct 14 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
Bootstrap插件全集
Jul 18 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
深入理解javascript中的 “this”
Jan 17 #Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 #Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 #Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
js树形控件脚本代码
2008/07/24 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python机器学习之决策树算法
2017/12/22 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
对Python 语音识别框架详解
2018/12/24 Python
python实现XML解析的方法解析
2019/11/16 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
物流管理专业自荐信
2014/06/23 职场文书
法学院毕业生求职信
2014/06/25 职场文书
财务检查整改报告
2014/11/06 职场文书
交通肇事罪辩护词
2015/05/21 职场文书