總結(jié)js處理json數(shù)據(jù)各個方法

在最近做項(xiàng)目中?發(fā)現(xiàn)一個很重要的事眠副,前端更多的是和后端接口打交道,如何把數(shù)據(jù)處理好了之后,按照相應(yīng)的功能渲染到頁面上霜旧,于是如何更好更快更準(zhǔn)確的用js處理好數(shù)據(jù)就為其重要。

因此儡率,寫下這篇博客挂据,不僅是為了讓大家受益,也是為了自己以后方便查閱儿普,鞏固基礎(chǔ)崎逃。

進(jìn)入正題:

一、json字符串與js對象之間的轉(zhuǎn)換:

1. json字符串轉(zhuǎn)js對象

eg:var jsonStr = '{"name":"xiao","age":12}' ;

????????console.log(JSON.parse(jsonStr?));

2.js對象轉(zhuǎn)json字符串

eg:var jsonObj =??{"name":"xiao","age":12};

? ? ? ?console.log(JSON.stringify(jsonObj?))

二眉孩、for-in遍歷json:

eg:var json = [ {"name":"第1條"}, {"name":"第2條"}, {"name":"第3條"}]

? ??????for(let i in json){console.log( json[i].name );}

三个绍、for-in遍歷多層json:

eg:var userArray = [ { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" },"Email": "" }, { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" }, { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }];

for(let i in userArray) //首先循環(huán)第一層json{
? for(let?j?in userArray[i]){ //循環(huán)第一層json中的值

? ? ?console.log( userArray[i][j] ) //打印循環(huán)出來的json值,每個值都會被循環(huán)出來,包括第二層json

? ? ? for( let k in userArray[i][j] ){

? ? ? console.log( userArray[i][j][k] ) //打印循環(huán)出來的第二層json值

}

}

}

四浪汪、匹配id:

eg:let arr1 = ['aaa','bbb','ccc','ddd'];

? ? ? ? let arr2 = [ {id:'aaa',name:'蘋果1'}, {id:'bbb',name:'蘋果2'}, {id:'ccc',name:'蘋果3'},? ? ? ? ? ?{id:'ddd',name:'蘋果4'}, {id:'eee',name:'蘋果5'} ];

? ? ? for (let i in arr2){

? ? ? ? for(let k in arr1){

? ? ? ? ? ?if(i == k){

? ? ? ? ? ? ?let str = [];

? ? ? ? ? ? ?str.push(i);

? ? ? ? ? ? ?console.log(str)

}

}

}

五巴柿、將數(shù)組下標(biāo)設(shè)置為1:

var json = [ {"name":"第1條"}, {"name":"第2條"}, {"name":"第3條"}] ;

for(let i in json){

? console.log( Number(i)+1 );

}

六、取數(shù)組中的最大值:

var jsonMax =??[ {id:'aaa',cjnum:'70'}, {id:'bbb',cjnum : '20'}, {id:'ccc',cjnum:'45'}, {id:'ddd',cjnum: '80'}, {id:'eee',cjnum:'55'} ]

let data = jsonMax;

let numberMax = 0;

for(let i = 0 ; i<jsonMax.length;i++){

if(parseFloat (jsonMax[i].cjnum)>numberMax?){//如果70大于0就進(jìn)入死遭,將70賦值給numberMax广恢,此時,numberMax為70呀潭,循環(huán)繼續(xù)钉迷,80大于70,滿足條件蜗侈,進(jìn)來篷牌,此時,numberMax由原來的70變成了80踏幻。

numberMax? ?=?parseFloat (jsonMax[i].cjnum) ;

}

}

console.log(?numberMax )

2枷颊、用es6取最大值

let max_item = [];? ? ? ?

let max_arr = [{age:9,"name":'ma'},{age:13,'name':'rong'}];? ? ?

????for(let j in max_arr){? ? ?

?????max_item.push(max_arr[j].age)? ? ? ? ?

}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(Math.max(...max_item))




七、改變json中key的名字

? ? var json = [{

? ? a: 1,

? ? ? ? ? b: '張三',

? ? ? ? ? c: '13000000000',

? ? ? ? },

? ? ? ? {

? ? ? ? ? a: 2,

? ? ? ? ? b: '李四',

? ? ? ? ? c: '13100000000'

? ? ? ? }

? ? ? ]

? ? ? for (var i = 0; i < json.length; i++) {

? ? ? ? json[i].id = json[i].a;

? ? ? ? json[i].name = json[i].b;

? ? ? ? json[i].tel = json[i].c;

? ? ? ? delete json[i].a

? ? ? ? delete json[i].b

? ? ? ? delete json[i].c

? ? ? }

? ? ? console.log(json)

八该面、日期排序

var?data?=?{??

??"rows":?[{????????"name":?"張三",????????"time":?"2011/4/1?0:00:00",????},

? ? ? ? ? ? ? ?{????????"name":?"李四",????????"time":?"2015/5/6?12:30:00",????},

? ? ? ? ? ? ? ?{????????"name":?"王五",????????"time":?"2012/10/1?22:10:00",????},

? ? ? ? ? ? ? ?{????????"name":?"趙六",????????"time":?"2011/9/1?22:10:00",????}]};

????????????????var?rows?=?data.rows;rows.sort(function(a,b){??

??????????????????????return?Date.parse(a.time)?-?Date.parse(b.time);//時間正序});

? ? ? ????????????????????for(var?i?=0,l=rows.length;i<l;i++){??

? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(rows[i].name?+?"?|?"?+?rows[i].time);

? ? ? ? ? ? ? ? ? ? }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末夭苗,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子隔缀,更是在濱河造成了極大的恐慌题造,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猾瘸,死亡現(xiàn)場離奇詭異界赔,居然都是意外死亡丢习,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門淮悼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來咐低,“玉大人,你說我怎么就攤上這事袜腥〖粒” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵羹令,是天一觀的道長鲤屡。 經(jīng)常有香客問我,道長福侈,這世上最難降的妖魔是什么酒来? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮癌刽,結(jié)果婚禮上役首,老公的妹妹穿的比我還像新娘。我一直安慰自己显拜,他們只是感情好衡奥,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著远荠,像睡著了一般矮固。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上譬淳,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天档址,我揣著相機(jī)與錄音,去河邊找鬼邻梆。 笑死守伸,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的浦妄。 我是一名探鬼主播尼摹,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼剂娄!你這毒婦竟也來了蠢涝?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤阅懦,失蹤者是張志新(化名)和其女友劉穎和二,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耳胎,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡惯吕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年惕它,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片废登。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡怠缸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出钳宪,到底是詐尸還是另有隱情,我是刑警寧澤扳炬,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布吏颖,位于F島的核電站,受9級特大地震影響恨樟,放射性物質(zhì)發(fā)生泄漏半醉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一劝术、第九天 我趴在偏房一處隱蔽的房頂上張望缩多。 院中可真熱鬧,春花似錦养晋、人聲如沸衬吆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽逊抡。三九已至,卻和暖如春零酪,著一層夾襖步出監(jiān)牢的瞬間冒嫡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工四苇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留孝凌,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓月腋,卻偏偏與公主長得像蟀架,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子罗售,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345