怎样使用JS实现json对象数组按对象属性排序
这次给大家带来怎样使用JS实现json对象数组按对象属性排序，使用JS实现json对象数组按对象属性排序的注意事项有哪些，下面就是实战案例，一起来看一下。
在实际工作经常会出现这样一个问题：后台返回一个数组中有i个json数据，需要我们根据json中某一项进行数组的排序。
例如返回的数据结构大概是这样：
{
result:[
{id:1,name:'中国银行'},
{id:3,name:'北京银行'},
{id:2,name:'河北银行'},
{id:10,name:'保定银行'},
{id:7,name:'涞水银行'}
]
}现在我们根据业务需要，要根据id的大小进行排序，按照id小的json到id大的json顺序重新排列数组的顺序
在js中添加排序的方法：
这里使用JavaScript sort() 方法，首先解释下这个sort的方法
语法：arrayObject.sort(sortby)
sortby：可选，规定排序顺序。必须是函数。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
下面开始使用sort(sortby) 来进行这个排序，并打印到控制台：
function sortId(a,b){
return a.id-b.id
}
result.sort(sortId);
console.log(result);完整测试示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.gxlcms.com json数组排序</title>
</head>
<body>
<script>
var result = [
{id:1,name:'中国银行'},
{id:3,name:'北京银行'},
{id:2,name:'河北银行'},
{id:10,name:'保定银行'},
{id:7,name:'涞水银行'}
]
function sortId(a,b){
return a.id-b.id
}
result.sort(sortId);
console.log(result);
</script>
</body>
</html>然后查看控制台，排序成功：
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
vuex入门教学步奏详解
怎样对vuex进阶使用
使用vue-admin-template优化步骤详解
绛旓細鎸夌収id灏忕殑json鍒癷d澶х殑json椤哄簭閲嶆柊鎺掑垪鏁扮粍鐨勯『搴忓湪js涓坊鍔犳帓搴忕殑鏂规硶锛氳繖閲浣跨敤JavaScript sort() 鏂规硶锛岄鍏堣В閲婁笅杩欎釜sort鐨勬柟娉曡娉曪細arrayObject.sort(sortby)sortby锛氬彲閫夛紝瑙勫畾鎺掑簭椤哄簭銆傚繀椤绘槸鍑芥暟銆傚鏋滆皟鐢ㄨ鏂规硶鏃舵病鏈変娇鐢ㄥ弬鏁帮紝灏嗘寜瀛楁瘝椤哄簭瀵规暟缁勪腑鐨勫厓绱犺繘琛屾帓搴忥紝璇村緱鏇寸簿纭偣锛屾槸鎸夌収瀛...
绛旓細1銆侀鍏堝墠绔竴鑸槸浠ュ璞＄殑褰㈠紡瀛樻暟鎹紝鐜板湪浠ュ璞＄殑褰㈠紡璇存庝箞瀛樸傚厛澹版槑涓涓嬮渶瑕佸瓨鐨勫璞銆2銆佹帴鐫瀛樿繖涓璞＄殑鏁版嵁锛孞SON.stringify鏄妸鏁版嵁杞崲鎴愬瓧绗︿覆鐨勫舰寮忋3銆佺劧鍚庡彇瀵硅薄鏁版嵁锛孞SON.parse鏄妸瀛楃涓叉暟鎹浆鎹负 JavaScript 瀵硅薄銆4銆佹渶鍚庡鏋滄兂瑕佸垹闄ocalStorage涓殑鏌愪釜瀵硅薄鏁版嵁锛屽彲浠ュ涓嬪浘杩欐牱...
绛旓細1銆佸厛瀹氫箟涓涓猨son鍙橀噺銆2銆佺劧鍚庡畾涔夎繖涓彉閲忕殑鍊硷紝鍏跺疄涓涓猨son瀵硅薄灏辨槸涓涓猳bj瀵硅薄銆3銆佽娣诲姞json瀵硅薄鐨勫厓绱狅紝鐩存帴浣跨敤鏁扮粍涓嬫爣鏂瑰紡锛屾坊鍔犻敭鍜屽煎氨琛屼簡銆4銆佽涓簀son瀵硅薄娣诲姞瀵硅薄锛屾垜浠彲浠ュ厛鍒涘缓涓涓璞°5銆佺劧鍚庝篃鏄娇鐢ㄦ暟缁勪笅鏍囨柟寮忥紝涓哄叾璧嬪间负鏂扮殑瀵硅薄鍙橀噺灏辫浜嗐6銆佸湪娴忚鍣ㄩ噷锛屾垜浠氨鍙互...
绛旓細1. js鏁扮粍濡備綍娣诲姞json鏁版嵁 鍦↗avaScript涓紝鍙互浣跨敤push()鏂规硶鍚戞暟缁勪腑娣诲姞JSON鏁版嵁銆備緥濡傦細```let arr = [];arr.push({name: "Tom", age: 20});arr.push({name: "Jerry", age: 22});console.log(arr);```杈撳嚭缁撴灉涓猴細```[{"name":"Tom","age":20},{"name":"Jerry","age"...
绛旓細绗竴绉 JSON.parse(jsonString)绗簩绉 eval("("+jsonString+")")绗笁绉 var obj=(function ToJSON(o){ if(typeof(o)=="string")try{return new Function("return "+o)();}catch(e){return null;} })("[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',...
绛旓細濡備笅锛欽SON瀛楃涓诧細 JSON瀵硅薄锛 1銆佸皢String杞寲涓篔SON 2銆佸皢JSON杞寲涓篠tring 涓夈丣SON鐨勮緭鍑虹編鍖栦笂涓鑺傛垜浠鍒颁簡灏咼SON瀵硅薄杞寲涓篔SON瀛楃涓插彲浠鐢↗SON.stringify() 鏂规硶锛宻tringify杩樻湁涓彲閫夊弬鏁皊pace锛1<=space<=10锛夛紝鍙互鎸囧畾缂╄繘鐨勭┖鏍兼暟锛岀敤浜庣編鍖栬緭鍑猴紱 鎴戜滑鐪嬩笅浠ｇ爜锛 寰呯編鍖栫殑JSON锛 缇庡寲...
绛旓細1. JSON.parse鏂规硶绠浠 `JSON.parse`鏄疛avaScript鍐呯疆鐨勪竴涓柟娉曪紝涓撻棬鐢ㄤ簬灏咼SON鏍煎紡鐨勫瓧绗︿覆杞崲涓篔avaScript瀵硅薄銆傝繖涓柟娉曢潪甯搁珮鏁堬紝骞朵笖鍙互甯姪閬垮厤鎵嬪姩瑙ｆ瀽JSON鏃跺彲鑳介亣鍒扮殑閿欒銆2. 浣跨敤鏂规硶 浣跨敤`JSON.parse`鏂规硶闈炲父绠鍗曘傚亣璁炬垜浠湁涓涓狫SON瀛楃涓诧紝鎴戜滑鍙渶瑕佸皢杩欎釜瀛楃涓蹭綔涓哄弬鏁颁紶閫掔粰`JSON....
绛旓細1銆佹寜鐓ф弿杩帮紝棰樹富鏄兂灏嗗鏉℃暟鎹褰曟彁浜ゅ埌鏈嶅姟绔紝鍚屾椂鏈嶅姟绔皢鏁版嵁鎻掑叆鍒版暟鎹簱銆傞偅涔堟濊矾鏄皢澶氭潯鏁版嵁瀛樺湪鏁扮粍涓紝璋冪敤post鏂规硶鐨勬帴鍙ｄ紶鍏ュ悗绔2銆佹柟娉曞涓嬶細var sendData = [];sendData.push({name:'david',age:'20'});sendData.push({name:'peter',age:'23'});3銆佷紶閫掓暟鎹粰鏈嶅姟绔紝...
绛旓細// 鍒犻櫎灞炴 sexcreateJson("sex"); // 杈撳嚭 Object {name="banana", color="red"}console.log(str1);鍑芥暟搴旇鏈変笁涓弬鏁扮殑锛岀涓涓涓 json 瀵硅薄锛屼絾搴斾綘瑕佹眰锛屽彧鍐欎簡涓や釜锛屾墍浠ュ嚱鏁板彧鑳界敤浜庝慨鏀 str1銆
绛旓細閫氳繃 JSON.parse 灏嗕綘鐨 JsonInfo 鐨勫瓧绗︿覆绫诲瀷鐨勫彉閲忚浆涓 js 瀵硅薄锛歷ar jsonObj = JSON.parse(jsonStr);鐪嬪埌 json 瀛楃涓查噷鐨勪腑鎷彿浜嗘病鏈夛紵杩欎釜瀵硅薄鍚嶄负 sites 鐨 key 瀵瑰簲鐨 value 鏄竴涓暟缁勶紝涔熷氨鏄 sites[0]锛宻ites[1]...浣犲彲浠ョ悊瑙涓 jsonObj 鐨 sites 灏辨槸涓涓暟缁勫悕锛屾墍浠ヤ篃灏...
