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 相关文章推荐
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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 全局变量范围分析
2009/08/07 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python的面向对象思想分析
2015/01/14 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
优秀教导主任事迹材料
2014/05/09 职场文书
实验室的标语
2014/06/20 职场文书
个人租房协议书范本
2014/09/30 职场文书
员工自我评价范文
2015/03/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
python实现会员管理系统
2022/03/18 Python