javascript通过字典思想操作数据
作为一名前端程序猿,相对于后端操作数据的机会较少。然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选、重构。相对于后端语言,我们没有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通过字典思想操作数据的更多相关文章
- Javascript 解读与思想
Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维
- 前端 javascript 数据类型 字典
定义字典 a = {"k1":"v1","k2":"v2",}; Object {k1: "v1", ...
- 聚焦JavaScript面向对象的思想
面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...
- 第六章:javascript:字典
字典是一种以键-值对应形式存储的数据结构,就像电话薄里的名字和电话号码一样.只要找一个电话,查找名字,名字找到后,电话号码也就找到了.这里的键值是你用来查找的东西,值就是要查的到的结果. javasc ...
- 浅谈javascript的面向对象思想
面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...
- JavaScript数据结构——字典和散列表的实现
在前一篇文章中,我们介绍了如何在JavaScript中实现集合.字典和集合的主要区别就在于,集合中数据是以[值,值]的形式保存的,我们只关心值本身:而在字典和散列表中数据是以[键,值]的形式保存的,键 ...
- JavaScript结构三层——思想快速介绍
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...
- JavaScript结构三层——思想快速入门
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...
- [Javascript] 面向对象编程思想
1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...
随机推荐
- perl use base 继承
centos6.5:/root/podinns/lib#cat First.pm package First; use base qw(Second); sub new { my $self = {} ...
- 三星 PMU NXE2000,x-powers的AXP228,NXE2000
核心板PMIC X4418CV2并没有用三星推荐的PMU NXE2000,而是自主研发,采用x-powers的AXP228,这是因为AXP228更符合用户的习惯,更适合做产品,他们有如下区别: PMU ...
- Web---HTTP请求、重定向、转发和数据压缩
HTTP常用的请求方式包括: GET-最为常见,但发送的数据量很小,发送的数据直接包含到url的后面. POST-可以包含大量数据,数据在请求正文中通过表单进行提交. HEAD,PUT,DELETE. ...
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...
- MVC 依赖注入/控制反转
http://www.cnblogs.com/cnmaxu/archive/2010/10/12/1848735.html http://www.cnblogs.com/artech/archive/ ...
- HW4.18
public class Solution { public static void main(String[] args) { System.out.println("Graph 1&qu ...
- 最短路SPFA
用邻接矩阵a表示一幅图,a[i][j]表示从点i到点j的边长,如果为0则无边.(这是无负边,0边的情况) 这张图有T个点,C条边,要求求出从Ts走到Te的最短路. 用f[i]表示从Ts走到i点的最短路 ...
- latin1字符集在navicat下显示乱码(mysql)
用navicat查看一个表的内容时显示如下
- 【转】PyDev for Eclipse 简介
转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-pydev/index.html PyDev for Eclipse 是一 ...
- Yii2 验证码
没有用默认的layout 验证码点击不会改变 下面是静态页面代码 <div class="col-sm-12 login"> <div class=" ...