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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
使用JS动态显示文本
Sep 09 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
用python代码做configure文件
2014/07/20 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
浅析Python四种数据类型
2018/09/26 Python
python pygame实现方向键控制小球
2019/05/17 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python 忽略文件名编码的方法
2020/08/01 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
车工岗位职责
2013/11/26 职场文书
小学生成长感言
2014/01/30 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
物流仓管员岗位职责
2015/04/01 职场文书