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