2016.7
前言
工作中會經(jīng)常遇到對數(shù)據(jù)的處理业稼，入行一個多月，我目前接觸到的技術腔稀，也是日常工作中常用的语盈，是利用ajax來請求接口和后臺對接進行數(shù)據(jù)交互舱馅，數(shù)據(jù)的形式是JSON格式。這就需要我們能夠熟練地對JavaScript的對象和數(shù)組進行操作處理刀荒，尤其是對復雜的JSON嵌套形式的對象進行操作，完成我們想要達成的目的棘钞。在代碼方面缠借，目前工作上采用的依然是JavaScript最有名的類庫jQuery。
打算以后對工作中遇到以及平時接觸到的一些數(shù)據(jù)處理問題的實現(xiàn)方法進行記錄宜猜，作為個人思考和學習的筆記整理總結泼返，更多的是一些實際問題的代碼實例而非理論知識，主要是方便今后再次遇到類似問題時進行查閱姨拥。作為新手前端绅喉，有的問題也許會很簡單，甚至記錄的也并非最優(yōu)解叫乌。
遍歷對象和數(shù)組
問題一
這是我在新手交流群里看到的一道題柴罐，是FreeCodeCamp上的。
有以下數(shù)據(jù)：
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];
類似于保存了一個通訊錄憨奸，需要寫一個lookUp函數(shù)來查詢這個通訊錄革屠，lookUp有兩個參數(shù)：firstName和prop。如果它們都存在排宰，函數(shù)返回prop屬性對應的值似芝；如果firstName 值不存在，返回 "No such contact"板甘；如果prop 屬性不存在党瓮，返回 "No such property"。 eg. lookUp('Harry', 'number');
一開始我把這個問題想得復雜了盐类，主要還是自己基礎知識不扎實和經(jīng)驗上的欠缺寞奸。
先看給出的數(shù)據(jù)形式呛谜，contacts是一個數(shù)組作為通訊錄，里面的每一項都是一個對象（通訊錄中的人）蝇闭，對象包含了名字等信息呻率。題目是要通過一個函數(shù)傳遞人的名字和一個屬性，在通訊錄中查找呻引，如果沒有這個名字礼仗，返回一個信息；如果傳遞的屬性名不存在逻悠，又返回另一個信息元践；如果都能查找到（有這個人，這個人也有這個屬性）童谒，則返回傳遞屬性的值单旁。這里面有一個潛在的邏輯是，如果查到?jīng)]有這個名字饥伊，就不再做后面的判斷象浑，直接返回查無此人，當能查到這個人琅豆，再做其是否有這個屬性的判斷愉豺，同樣地，沒有這個屬性茫因，直接返回查無此信息蚪拦。
最開始我的思路是，將所有的firstName的value提取出來組成一個新的數(shù)組冻押，循環(huán)新數(shù)組來看參數(shù)是否匹配里面的某一項驰贷。這固然是一個辦法，不過要是對遍歷有些理解洛巢，能靈活運用括袒，就可以直接用更簡單的方式來實現(xiàn)了，于是想到了如下方法：
function lookUp(firstName, prop){
for(var i in contacts){
if(contacts[i].firstName == firstName){
contacts[firstName] = contacts[i];
}
}
if(!contacts[firstName]){
return 'No such contact';
}
if(!contacts[firstName][prop]){
return 'No such property';
}
return contacts[firstName][prop];
}
實現(xiàn)不難狼渊，用到了一個下標替換來定位參數(shù)匹配的對象箱熬。
問題二
這個是在工作上遇到的，是對一個區(qū)域ID查詢輸出該區(qū)域的省市區(qū)全稱狈邑，中國那么多地方城须，這個數(shù)據(jù)量還是挺大的，仔細看了下JSON結構米苹，大致可以概括為下面那樣：
var data = [
{ id : '1', name : 'AAA省', childs : [
{ id : '101', name : 'AA市', childs :[
{ id : '10101', name : 'A區(qū)' },
{ id : '10102', name : 'B區(qū)' }
]},
{ id : '102', name : 'BB縣', childs :[
{ id : '10201', name : 'A市' },
{ id : '10202', name : 'B市' }
]}
]},
{ id : '2', name : 'BBB省', childs : [
{ id : '201', name : 'CC市', childs :[
{ id : '20101', name : 'C區(qū)' },
{ id : '20102', name : 'D區(qū)' }
]},
{ id : '202', name : 'DD縣', childs :[
{ id : '20201', name : 'C市' },
{ id : '20202', name : 'D市' }
]}
]},
{ id : '3', name : 'CCC市', childs : [
{ id : '301', name : '市轄區(qū)', childs :[
{ id : '30101', name : 'E區(qū)' },
{ id : '30102', name : 'F區(qū)' }
]},
{ id : '302', name : 'DD縣', childs :[
{ id : '30201', name : 'E市' },
{ id : '30202', name : 'F市' }
]}
]}
];
比如給我們一個id20202糕伐，我們需要輸出的最終值就是BBB省DD縣D市，這個我是用笨辦法蘸嘶，層層遍歷嵌套來解決的良瞧。
function getArea(areaId){
outLoop:
for(var i in data){
for(var j in data[i]['childs']){
for(var k in data[i]['childs'][j]['childs']){
if(areaId == data[i]['childs'][j]['childs'][k]['id']){
var province = data[i]['name'],
city = data[i]['childs'][j]['name'],
district = data[i]['childs'][j]['childs'][k]['name'];
console.log(province + city + district);
break outLoop;
}
}
}
}
}
getArea(20202); //BBB省DD縣D市
需要注意兩點：遍歷對象提取鍵值對要用引號陪汽；拿到目標后終止所有嵌套循環(huán)的辦法，單純break只能終止本層循環(huán)褥蚯。
