在最近做項(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);
? ? ? ? ? ? ? ? ? ? }