作为一名前端程序猿,相对于后端操作数据的机会较少。然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选、重构。相对于后端语言,我们没有Linq,Dictionary等利器。因此,特此介绍一种根据字典思想操作数据的方法。

1.从一个简单的场景说起:我们分别传入0-6,页面上打印出对应的星期一到星期七,像我这样的菜鸟可能会这样写:  

var getWeekDay = function (dayNum) {
var strweekday = "";
switch (dayNum) {
case 0:
strweekday = "今天是星期一";
break;

......

case 6:
strweekday = "今天是星期天";
break;
}
return strweekday;
}

看上去写的有点累赘,而通过字典方式可以这样:

  var dayNum = 3,
    arrweekDic = ["一", "二", "三", "四", "五", "六", "天"],
    strweekday = "今天是星期" + arrweekDic[dayNum];

  哈哈~是不是看上去要好一点了?

2.前段时间碰到过这样一个场景:

  从页面上很容易便能搜集到这样一个数据(模拟数据):

  var list = [ { City: "北京", Province: "北京", KeyID: "1" },
         { City: "三亚", Province: "海南", KeyID: "2" },
         { City: "成都", Province: "四川", KeyID: "3" },
           { City: "绵阳", Province: "四川", KeyID: "4" },
           { City: "杭州", Province: "浙江", KeyID: "5" },
         { City: "绍兴", Province: "浙江", KeyID: "6" } ];

 然而真正需要的确是这样一个数据格式:

        {[{ City: "北京", Province: "北京", KeyID: "1" }],

          [{ City: "三亚", Province: "海南", KeyID: "2" }],

          [{ City: "成都", Province: "四川", KeyID: "3" },{ City: "绵阳", Province: "四川", KeyID: "4" },]

          [{ City: "杭州", Province: "浙江", KeyID: "5" },{ City: "绍兴", Province: "浙江", KeyID: "6" } ]}

因此必须得将数据的格式重新弄一弄。如果按照我这个菜鸟的方法,估计就直接:

  for(var i = 0,len = list.length;i < len;i++){

   for(...){

    //噼里啪啦各种整的天昏地暗

    }

  }

 //然而通过字典方式却可以这样:

首先构造一个字典类型的数据:

  var keyArr = {
    "1": "1",
    "2": "2",
    "3": "3-4",
    "4": "3-4",
    "5": "5-6-7",
    "6": "5-6-7",
    "7": "5-6-7"
  }

  再根据keyArr 操作:

function getKeyIDGroups(list, keyArr) {

  var group = {};

  for (var index in list) {

    var per = list[index],

    key = keyArr[per.KeyID];

    if (typeof key === "undefined") { continue; };

    if (group[key] === undefined) {

    group[key] = [per];

} else {

    group[key].push(per);

    }
  }
  return group;
 };

这样看起来怎么着也感觉好一点吧,特别是以后有KeyID = 8, 9, 10再需要维护的时候,只需要改keyArr 的格式就行啦~

3.还有这么一天,后端给了我这样一个数据:

[{
 "puoductLineID": "0",
 "puoductLineName": "XXX",
   "productVoList": [
  {
   "productID": "00",
     "productName": "XXX",
     "productLineID": "0",
     "programList": [
    {
      "programID": "000",
      "productID": "00",
      "serviceSetList": [
        {
          "serviceSetID": "0000",
          "serviceSetName": "XXX",
          "programID": "000",
            "serviceList": [
              {
                "ServiceID": "00000",
                "ServiceName": "XXX",
                "ip": "127.0.0.1",
                "port": "8080",
                "serviceSetID": "0000"
              }...
            ]
          }...
        ]
      }...
    ]
  }
  ...
   ]
 }
 ...
]

天啦,一个嵌套了5层,每一层都可能有可能无,只第一层就有300多条数据啊~而我则需要拿出所有的ServiceSetID和ServiceName。于是我无奈地找到了后端同学,告诉他应该他把数据构造好再给我。而他却一脸不以为然地说,这么简单,随便写两个循环不就搞定了么~我还忙得很,于是就这样吃了闭门羹。算了,自己试着写写吧。于是用字典方式也算是较为轻松地完成吧:

function filterData(data, pCode) {
  if (typeof data["serviceSetID"] !== "undefined") {
  return true;
 } else {
  var listColumnName = "",
  flag = false;
  for (var k = 0; k < listNames.length; k++) {
    if (typeof data[listNames[k]] !== "undefined") {
    listColumnName = listNames[k];
    break;
  }
 }
for (var i = 0; i < data[listColumnName].length; i++) {
  var per = data[listColumnName][i],
  code = "",
  name = "",
  nextPCode = "";
  for (var key in per) {
  if (per.hasOwnProperty(key)) {
    if (typeof filed[key] !== "undefined") {
    nextPCode = code = per[key];
    name = per[filed[key]];
    break;
  }
 }
}
if (filterData(per, nextPCode)) {
  result_jian.push({
  code: code,
  name: name,
  pCode: pCode
  });
    flag = true;
    }
   }
   return flag;
  }
};

javascript通过字典思想操作数据的更多相关文章

  1. Javascript 解读与思想

    Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维

  2. 前端 javascript 数据类型 字典

    定义字典 a = {"k1":"v1","k2":"v2",}; Object {k1: "v1", ...

  3. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  4. 第六章:javascript:字典

    字典是一种以键-值对应形式存储的数据结构,就像电话薄里的名字和电话号码一样.只要找一个电话,查找名字,名字找到后,电话号码也就找到了.这里的键值是你用来查找的东西,值就是要查的到的结果. javasc ...

  5. 浅谈javascript的面向对象思想

    面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...

  6. JavaScript数据结构——字典和散列表的实现

    在前一篇文章中,我们介绍了如何在JavaScript中实现集合.字典和集合的主要区别就在于,集合中数据是以[值,值]的形式保存的,我们只关心值本身:而在字典和散列表中数据是以[键,值]的形式保存的,键 ...

  7. JavaScript结构三层——思想快速介绍

    本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...

  8. JavaScript结构三层——思想快速入门

      本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...

  9. [Javascript] 面向对象编程思想

    1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...

随机推荐

  1. Android如何在一个线性布局里完美显示两个listview啊?

    复写一个listView ,在你布局文件中使用此view: <ScrollView android:layout_width="fill_parent" android:la ...

  2. android Button 颜色的变化(点击,放开,点击不放)

    参考: http://endual.iteye.com/blog/1534258 总结: 定义res/drawable/button_style.xml文件 <?xml version=&quo ...

  3. Flash Vector例子

    var s1:Student = new Student(); var s2:Student = new Student(); var s3:Student = new Student(); s1.n ...

  4. javascript在alert()出现中文乱码

    今天在写jquery代码时,alert()总是出现中文乱码 琢磨了好一会儿,在网上查的资料是html页面上设置charset为GB2312 <meta charset="GB2312& ...

  5. handlebars模板库的资源

    web 开发中,js 解析JSON 是经常的事情.非常繁琐.handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方 ...

  6. 浅谈pageobject模式

    先来看两段代码 代码1: package com.zlshuo.selenium.nonaming.pageobject; /** * @author leshuo * @version 2014年5 ...

  7. Android开发必知--使用View.setId的正确姿势

    这两天在写一个柱状图的自定义控件,用的直接继承ViewGroup的方式实现的,我们都知道,这是自定义控件里面最简单的一种了,有时间写个总结分享一下.这里我想说的重点是,在写这个自定义控件的时候遇到了个 ...

  8. UVA 4728 Squares(凸包+旋转卡壳)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17267 [思路] 凸包+旋转卡壳 求出凸包,用旋转卡壳算出凸包的直 ...

  9. Dot Net设计模式—MVC模式

    1 MVC设计模式简介 MVC结构是为那些需要为同样的数据提供多个视图的应用程序而设计的,它很好的实现了数据层与表示层的分离.MVC作为一种开发模型,通常用于分布式应用系统的设计和分析中,以及用于确定 ...

  10. RGB Bayer Color分析

    RGB Bayer Color分析 Bayer色彩滤波阵列 拜耳色彩滤波阵列(Bayer Color Filter Array,CFA)是非常有名的彩色图片的数字采集格式.色彩滤波器的模式如上图所示, ...