js处理层级数据结构的一些总结

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

一、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方法处理才会生效。

  

好吧。。。说了那么多,或许我自己明白自己在说啥。。。手动苦笑。。。 

时间: 2024-12-29 07:52:43

js处理层级数据结构的一些总结的相关文章

用JS描述的数据结构及算法表示——栈和队列(基础版)

前言:找了上课时数据结构的教程来看,但是用的语言是c++,所以具体实现在网上搜大神的博客来看,我看到的大神们的博客都写得特别好,不止讲了最基本的思想和算法实现,更多的是侧重于实例运用,一边看一边在心里隐隐歌颂大神的厉害,然后别人的厉害不是我的,所以到底看得各种受打击+头昏脑涨,写这个系列是希望自己能够总结学到东一块.西一下的知识,因为水平有限+经验不足,所以在此只说最基础的思想,附上我自己的算法实现(肯定还有更优解),如果要想看进阶版的,可以在园里搜“数据结构”,各种语言实现和进阶提升的文章有很

js图的数据结构处理----邻链表,广度优先搜索,最小路径

//邻居连表 //先加入各顶点,然后加入边 //队列 var Queue = (function(){ var item = new WeakMap(); class Queue{ constructor(){ item.set(this,[]); } enqueue(ele){ var ls = item.get(this); ls.push(ele); } dequeue(){ var ls = item.get(this); return ls.shift(); } size(){ var

js解析emoji表情

Emoji 公司的产品之前只有网页端,并没有提供emoji表情,之后将某个模块整合到app中,里面有个评论功能,在手机端可以输入emoji,显示的时候是空白,说明数据库并没有存储成功,查阅资料后得知emoji是四个字节,而mysql5.5.3前的版本utf8编码最多只支持3个字节. js解析emoji 先需要了解几个概念,js的编码方式.utf16.unicode 1.JavaScript语言采用Unicode字符集,但是只支持一种编码方法ucs-2 2.utf16编码 utf16是ucs-2的

与Javascript相关的数据结构和算法

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:豪情链接:http://www.zhihu.com/question/36882354/answer/69416260来源:知乎 建议先打好基础,了解js语言的特性或玩法,然后再来玩算法,个人感觉才能四两拨千斤,算法这种东西,是高级抽象的东西,简单说:是熟悉计算机语言解决日常需求的前提下,熟练的选择一种高效的做事方式,先了解如何将日常的需求或人类的自然语言转换为计算机语言,然后在进一步的确定算法在整个代码开发中所扮演的角色

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

Node.js 启航

什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器. 每一种解析器都是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情.例如运行在浏览器中的JS的用途是操作DOM,浏览器就提供了document之类的内置对象.而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器,NodeJS就相应提供了fs.

JS数组+JS循环题

先看JS循环作业题: 一.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 <script type="text/javascript"> var a=0.0001; var i=0; while(a<=8848){ a=a*2; i++; } alert(i); </script> 这个题主要考察的点:1.当要求得到什么效果或者多少次结束时,我们可以考虑运动while语句是比较方便的: 2.对折一次厚度要*2,所以下次折叠后,

node.js的总结-可以应付bat的社招面试

什么是NodeJS Node.js采用模块化结构,按照CommonJS规范定义和使用模块.模块与文件是一一对应关系,即加载一个模块,实际上就是加载对应的一个模块文件. JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器. 每一种解析器都是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情.例如运行在浏览器中的JS的用途是操作DOM

node.js入门系列(一)--Node.js简介

什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器. 每一种解析器都是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情.例如运行在浏览器中的JS的用途是操作DOM,浏览器就提供了document之类的内置对象.而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器,NodeJS就相应提供了fs.