作为一名前端程序猿,相对于后端操作数据的机会较少。然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选、重构。相对于后端语言,我们没有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. 《鸟哥的Linux私房菜》读书笔记一

    1.CPU为一个具有特定功能的芯片,里面含有微指令集,一个CPU又可以分为两个主要的单元:算术逻辑单元和控制单元.CPU读取的数据都是从内存读取来的,内存内的数据是从输入单元传输来的.CPU处理完也要 ...

  2. Android Canvas使用drawBitmap绘制图片

    1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float top, ...

  3. No modifications are allowed to a locked ParameterMap

    错误:java.lang.IllegalStateException: No modifications are allowed to a locked ParameterMap at org.apa ...

  4. redis+PHP实现的一个优先级去重队列

    主要思路是用一个set做前端去重缓冲, 若干个list做后端的多优先级消息队列, 用一个进程来进行分发, 即从set中分发消息到队列. set缓冲的设计为当天有效, 所以有个零点问题,有可能在零点前s ...

  5. svn文件提交时强制写注释

    这个操作需要修改版本库中的一个钩子文件,在你创建的版本库中有一个hooks文件夹,初始的时候其中有一个文件叫pre-commit.tmpl 在windows下将其修改为pre-commit.bat,在 ...

  6. 常用的Git命令

    我的常用的Git命令 Git仓库配置常用 1. clone 克隆一份远程的Git版本库 git clone git://github.com/someone/some_project.git some ...

  7. JVM 的 工作原理,层次结构 以及 GC工作原理

    JVM Java 虚拟机 Java 虚拟机(Java virtual machine,JVM)是运行 Java 程序必不可少的机制.JVM实现了Java语言最重要的特征:即平台无关性.原理:编译后的 ...

  8. Android——Cocosd2d-x手机游戏开发学习思路

    手机APP应用如雨后春笋般冒了出来,而在众多的APP应用中,游戏占据了半壁江山.它丰富着人们的业余生活,增进了人们之间的沟通交流.也有许多开发的朋友对游戏开发情有独钟,他们不止是享受着有很多的人们去下 ...

  9. 【转】PyDev for Eclipse 简介

      转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-pydev/index.html PyDev for Eclipse 是一 ...

  10. CodeIgniter开发实际案例-新闻网站【转】

    CodeIgniter开发实际案例-新闻网站 转:http://blog.csdn.net/ict2014/article/details/22104711?utm_source=tuicool&am ...