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实现控制内容的向上向下滚动效果
Jun 26 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
js实现无缝轮播图特效
May 09 Javascript
vuex的使用步骤
Jan 06 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
深入理解php的MySQL连接类
2013/06/07 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP生成器简单实例
2015/05/13 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Python深入学习之装饰器
2014/08/31 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python按钮的响应事件详解
2019/03/04 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
EJB实例的生命周期
2016/10/28 面试题
优秀应届毕业生推荐信
2014/02/18 职场文书
上课迟到检讨书
2014/02/19 职场文书
前处理组长岗位职责
2014/03/01 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
田径运动会通讯稿
2014/09/13 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript