作为一名前端程序猿,相对于后端操作数据的机会较少。然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选、重构。相对于后端语言,我们没有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. Listview 异步加载图片之优化篇(有图有码有解释)

    在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有b ...

  2. 三年所有JAVA技术文档列表

    学习工作流workflow管理基础概念.pdf 深入浅出Struts2(PDF).zip 深入浅出Hibernate.pdf 敏捷软件开发:原则.模式与实践.rar 精通Oracle.10g.Pl.S ...

  3. 【CF】196 Div.2 D. Book of Evil

    显然这个图是一课树,看着题目首先联想到LCA(肯定是可以解的).但是看了一下数据大小,应该会TLE.然后,忽然想到一个前面做过的题目,大概是在一定条件下树中某结点旋转成为根后查询最长路径.结果灵感就来 ...

  4. bzoj3131

    这是一道很好也很烦的综合题…… 首先我们肯定要先把f(i)处理出来这是毫无疑问的 我们要求出数位乘积为now的个数,首先是空间上的问题 直接肯定会爆空间,不难发现 乘积的质因数只有2,3,5,7,并且 ...

  5. Android-adb shell 读取手机系统文件

    1.首先保证手机是root 状态 2.运行 adb shell 页面以后 su root 3.ls 就会发现目录结构可以显示了

  6. android学习之BUG——The connection to adb is down, and a severe error has occured.

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...

  7. Cocos2d-x学习之windows 7的visual studo 2010开发环境安装

    1.引擎代码的下载 官方版本地址为: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download 目前最新版本是cocos2d-2.0-rc0a ...

  8. Tag file directory /struts-tags does not start with "/WEB-INF/tags"

    使用自定义标签,记得引用路径 <%@taglib prefix="s" uri="/struts-tags" %>

  9. python 实现对象模型

    # -*- coding:utf-8 -*- """ python 实现对象模型 创建 bmicalcpage 类 """ class bm ...

  10. WP8模拟器需要BIOS开启虚拟化支持(转载)

    在BIOS里启用hypervisor和virtualization,然后安装WP8 SDK. 如果出现“当前用户未添加到Hyper-V管理组时”, 以管理员身份运行CMD: net localgrou ...