JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解

習(xí)目標(biāo)：

節(jié)數(shù)知識(shí)點(diǎn)要求第一節(jié) 數(shù)組去重?cái)?shù)組去重了解第二節(jié) 數(shù)組排序數(shù)組排序了解第三節(jié) json概述json概述掌握第四節(jié) json方法json方法掌握第五節(jié) json解析json解析掌握

一、數(shù)組去重

數(shù)組去重是指：從數(shù)組中找到相同的元素，并將相同的元素刪除。

保證數(shù)組中的每個(gè)元素都是獨(dú)一無(wú)二的操作。

1.1.indexOf去重

基本思想是：利用數(shù)組的indexOf方法，目的是尋找存入?yún)?shù)在數(shù)組中第一次出現(xiàn)的位置。

缺點(diǎn)：實(shí)現(xiàn)這個(gè)方法的時(shí)候會(huì)遍歷數(shù)組直到找到目標(biāo)為止，消耗掉很多時(shí)間。

var arr=[1,2,1,3,1,4**，2,3];
var arr2=[];
for(var i=0;i

最初arr2中沒有元素。

循環(huán)判斷，

只要arr中的元素不在arr2中

就把a(bǔ)rr中的這個(gè)元素存入arr2中

那么最后arr2中的元素就是arr中所有不重復(fù)的元素

hash表去重

基本思想是：將已經(jīng)出現(xiàn)過(guò)的元素當(dāng)做屬性名，存入一個(gè)object****內(nèi)，下標(biāo)的引用要比用indexOf搜索數(shù)組快的多

缺點(diǎn)：內(nèi)存占用很多，以犧牲空間來(lái)?yè)Q取時(shí)間。

var arr=[1,2,1,3,1,4];
var result=[]
var hash={};
for (var i=0; arr[i] !=undefined; i++) {
if (!hash[arr[i]]) {
result.push(arr[i]);

hash[arr[i]]=true;

}
}

最初result中沒有元素

hash對(duì)象中沒有屬性
一直循環(huán)，直到數(shù)組元素是null為止

判斷如果：

【hash對(duì)象】中，沒有名為

【當(dāng)前arr元素】的屬性

則

為新數(shù)組result中添加這個(gè)元素

并為hash對(duì)象添加這個(gè)屬性

二、數(shù)組排序

2.1冒泡排序

冒泡排序法：

數(shù)組當(dāng)中兩兩相鄰的元素比較，如果前一個(gè)比后一個(gè)大，那么兩個(gè)數(shù)組元素就交換（就是把小的放前面），最終會(huì)找到一個(gè)最大的元素，放到最后面，然后再一次的循環(huán)比較。

$arr=[100,90,98,70,85,60,87]

第1次冒泡：90,98,70,85,60,87,100

第2次冒泡：90,70,85,60,87,98,100

第3次冒泡：70,85,60,87,90,98,100

第4次冒泡：70,60,85,87,90,98,100

第5次冒泡：60,70,85,87,90,98,100

第6次冒泡：60,70,85,87,90,98,100

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-TGSauQSx-1608259559098)(020803JS算法和json解析.assets/clip_image006.png)]

2.2.快速排序

快速排序“的思想很簡(jiǎn)單，整個(gè)排序過(guò)程只需要三步：

（1）在數(shù)據(jù)集之中，選擇一個(gè)元素作為“基準(zhǔn)”（pivot）。

（2）所有小于“基準(zhǔn)”的元素，都移到“基準(zhǔn)”的左邊；所有大于“基準(zhǔn)”的元素，都移到“基準(zhǔn)”的右邊。

（3）對(duì)"基準(zhǔn)"左邊和右邊的兩個(gè)子集，不斷重復(fù)第一步和第二步，直到所有子集只剩下一個(gè)元素為止。

2.3 遞歸函數(shù)

能夠自己調(diào)用自己的函數(shù)稱為遞歸函數(shù)。

可以說(shuō)遞歸是編程思想當(dāng)中最讓人頭疼的一種算法也不為過(guò)。

下面我們來(lái)看一個(gè)遞歸中最經(jīng)典的例子

? var func=function (x) {

? if (x===1) {

? return 1;

? } else {

? return x*func(x-1);

? }

? };

? 這是遞歸中最經(jīng)典的一個(gè)例子，叫做N!。

2.4 二分查找

二分查找的前提：有序數(shù)組,自然順序（從小到大順序）

找到中間的數(shù)，這個(gè)中間的數(shù)和你輸入的數(shù)進(jìn)行比較，如果你輸入的數(shù)比中間的數(shù)大，就到后一半數(shù)據(jù)查找，否則就到前一半數(shù)據(jù)查找。

重復(fù)以上過(guò)程，直到找到滿足條件的記錄

var arr=[2, 4, 5, 9, 31, 60, 79, 80, 90];
使用原型來(lái)做。如果有這個(gè)數(shù)來(lái)輸出true,沒有輸出false.

三、JSON概述

JSON****英文全稱JavaScript Object Notation，是一種輕量級(jí)的數(shù)據(jù)交換格式。它可以存儲(chǔ)數(shù)據(jù)和傳輸數(shù)據(jù)。

? JSON是一門獨(dú)立的語(yǔ)言，用于存儲(chǔ)和傳輸數(shù)據(jù)的格式，通常用于服務(wù)端向網(wǎng)頁(yè)傳遞數(shù)據(jù) 。

? JSON語(yǔ)言采用了JavaScript的語(yǔ)法，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的 API 或工具包，但是還是需要說(shuō)明的一點(diǎn)就是：

? JSON和Javascript是兩門不同的語(yǔ)言。

JSON****的格式僅僅是一個(gè)文本，而文本是可以被任何編程語(yǔ)言讀取及作為數(shù)據(jù)格式傳遞的。

3.1 json的語(yǔ)法

· 數(shù)據(jù)在名稱/值對(duì)中

· 數(shù)據(jù)由逗號(hào)分隔

· 大括號(hào)保存對(duì)象

· 中括號(hào)保存數(shù)組

JSON 對(duì)象在大括號(hào)（{}）中書寫：

Var obj={

“name”:”peter”,

**“sex”:”**男”,

“age”:25

}

對(duì)象可以包含多個(gè)名稱/值對(duì)：

JSON 數(shù)據(jù)的書寫格式是：名稱/值對(duì)。

名稱/值對(duì)包括字段名稱（在雙引號(hào)中），后面寫一個(gè)冒號(hào)，然后是值

{ “name”:“halon”, “sex”:“woman”, “from”:“希臘” }

3.2 JSON 與 JS 對(duì)象的區(qū)別與對(duì)比

區(qū)別JSONJavascript含義僅僅是一種數(shù)據(jù)格式表示類的實(shí)例傳輸可以跨平臺(tái)數(shù)據(jù)傳輸，速度快不能傳輸表現(xiàn)1.鍵值對(duì)方式，鍵名必須加雙引號(hào) 2.值不能是方法函數(shù)，不能是undefined/NaN1.鍵值對(duì)方式，鍵名不加引號(hào) 2.值可以是函數(shù)、對(duì)象、字符串、數(shù)字、boolean 等

四、JSON提供的方法

個(gè)人理解，JSON就是

(1)將【前臺(tái)的數(shù)據(jù)（對(duì)象、數(shù)組等）】轉(zhuǎn)換成【字符串發(fā)送給后臺(tái)】。

(2)將【后臺(tái)回傳的數(shù)據(jù)（字符串）】轉(zhuǎn)換為【普通的數(shù)據(jù)（對(duì)象、數(shù)組等）】。

4.1 parse()方法

JSON.parse(后臺(tái)傳輸過(guò)來(lái)的數(shù)據(jù))

反序列化（有時(shí)候也被稱作JSON數(shù)據(jù)解析，簡(jiǎn)稱為JSON解析），

能夠把JSON字符串轉(zhuǎn)換成JS的數(shù)據(jù)類型。

轉(zhuǎn)換的時(shí)候，如果字符串中存在不符合JSON要求的格式，會(huì)直接報(bào)錯(cuò)。

JSON解析就是通過(guò)某種手段，將【后臺(tái)回傳的字符串?dāng)?shù)據(jù)】轉(zhuǎn)換成【可以直接被使用的數(shù)據(jù)】的過(guò)程。

通常情況下JS中的JSON解析會(huì)直接采用JSON中提供的JSON.parse方法來(lái)直接轉(zhuǎn)換。

var info='{
 "name":"halon",
 "sex":"woman",
 "from":"希臘" 
}'

console.log(JSON.parse(info));

4.2 stringify()方法

JSON.stringify(要往后臺(tái)傳輸?shù)臄?shù)據(jù))

序列化（有時(shí)候也被稱作JSON數(shù)據(jù)封裝或數(shù)據(jù)加密）

能夠把JS的數(shù)據(jù)類型轉(zhuǎn)換成JSON字符串。

轉(zhuǎn)換的時(shí)候，如果數(shù)據(jù)中存在不符合JSON要求的格式，會(huì)做對(duì)應(yīng)的處理

么是 JSON?

JSON 英文全稱 JavaScript Object Notation
JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式。
JSON是獨(dú)立的語(yǔ)言 *
JSON 易于理解。
json對(duì)象使用js語(yǔ)法，但是json字符串僅僅是一個(gè)文本。
文本可以被任何一種編程語(yǔ)言讀取及作為數(shù)據(jù)格式傳遞。

JSON 格式化后為 JavaScript 對(duì)象

JSON 格式在語(yǔ)法上與創(chuàng)建 JavaScript 對(duì)象代碼是相同的。

由于它們很相似，所以 JavaScript 程序可以很容易的將 JSON 數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對(duì)象。

JSON 語(yǔ)法規(guī)則
數(shù)據(jù)為鍵/值對(duì)。
數(shù)據(jù)由逗號(hào)分隔。
大括號(hào)保存對(duì)象
方括號(hào)保存數(shù)組

JSON 數(shù)據(jù) - 一個(gè)名稱對(duì)應(yīng)一個(gè)值

JSON 數(shù)據(jù)格式為鍵/值對(duì)，就像 JavaScript 對(duì)象屬性。

鍵/值對(duì)包括字段名稱（在雙引號(hào)中），后面一個(gè)冒號(hào)，然后是值：

"name":"Runoob"

JSON 對(duì)象

JSON 對(duì)象保存在大括號(hào)內(nèi)。

就像在 JavaScript 中, 對(duì)象可以保存多個(gè) 鍵/值對(duì)：

{"name":"Runoob", "url":"www.runoob.com"}

謂遞歸算法，是將問(wèn)題轉(zhuǎn)化為規(guī)模縮小的同類問(wèn)題的子問(wèn)題，每一個(gè)子問(wèn)題都用一個(gè)同樣的算法去解決。一般來(lái)說(shuō)，一個(gè)遞歸算法就是函數(shù)調(diào)用自身去解決它的子問(wèn)題。

使用遞歸算法實(shí)現(xiàn)：大題的分?jǐn)?shù)值等于其下各小題的分?jǐn)?shù)值之和。

本文講解所用到的數(shù)據(jù)集合（已是樹形結(jié)構(gòu)）。

一、節(jié)點(diǎn)數(shù)據(jù)集合

var nodes=[{
"id": "EQ06-9006C8BBE68A475BAC04858F60E0249D",
"name": "題目1",
"type": "解答題",
"children": [{
"id": "EQ06-CC80CFD8702F47E4A42AF63B0BA10569",
"name": "題目1.1",
"type": "解答題",
"score": 5
}, {
"id": "EQ06-06F7EBA807D445EB937B920ED2250016",
"name": "題目1.2",
"type": "解答題",
"score": 6
}],
"score": 10
}, {
"id": "EQ06-0F0A8DA4B5834D1BB96504546EA47DA9",
"name": "題目2",
"type": "解答題",
"children": [{
"id": "EQ06-660D9E79B5054EA296D15EFA6D1F5462",
"name": "題目2.1",
"type": "解答題",
"score": 10
}, {
"id": "EQ06-C5D5191018B94E8C8D1E9AB3AD5E4C61",
"name": "題目2.2",
"type": "解答題",
"score": 20,
"children": [{
"id": "EQ06-037CBCDFD897434A839619D4AF07E030",
"name": "題目2.2.1",
"type": "解答題",
"score": 5
}, {
"id": "EQ06-FC7CAE767F4E48D6B3E0B78D5E4BC473",
"name": "題目2.2.2",
"type": "解答題",
"score": 6
}, {
"id": "EQ06-FC7CAE767F4E48D6B3E0B78D5E4BC474",
"name": "題目2.2.3",
"type": "解答題",
"score": 7
}]
}],
"score": 40
}];

起初朋友給我發(fā)了一段數(shù)據(jù)，輸出的是題目節(jié)點(diǎn)信息，其中包含題目的分?jǐn)?shù)值：score，原始數(shù)據(jù)已經(jīng)過(guò)樹形結(jié)構(gòu)處理了。

他的需求是：題目的分?jǐn)?shù)值 score 是創(chuàng)建題目時(shí)預(yù)估定義的一個(gè)分?jǐn)?shù)值，如20分；實(shí)際情況是在某個(gè)大題的下面還可以創(chuàng)建小題，小題也會(huì)定義一個(gè)分?jǐn)?shù)值 score，這樣一來(lái)，某個(gè)大題原先預(yù)估定義的分?jǐn)?shù)值 score 可能與它下面所有小題的分?jǐn)?shù)值 score 加起來(lái)的和并不相等，這樣大題的分?jǐn)?shù)值 score 就顯得不準(zhǔn)確，希望我在前端能幫忙處理一下，使得大題的分?jǐn)?shù)值等于匯總了其下所有小題的分?jǐn)?shù)值之和，以符合題目分?jǐn)?shù)在實(shí)際展現(xiàn)時(shí)的準(zhǔn)確無(wú)誤。

接到朋友的這個(gè) issue，我想了一下，大致要求就是針對(duì)于某個(gè)節(jié)點(diǎn)的屬性（這里是 score），匯總累加其下所有子節(jié)點(diǎn)的這個(gè)屬性（score）的數(shù)值，然后將這一過(guò)程中累加得到的數(shù)值賦到父節(jié)點(diǎn)的這個(gè)屬性（score）上。

為了實(shí)現(xiàn)樹型結(jié)構(gòu)數(shù)據(jù)的遍歷與處理，免不了要想到使用遞歸函數(shù)來(lái)實(shí)現(xiàn)。我們先來(lái)看一下定義，所謂遞歸算法，是將問(wèn)題轉(zhuǎn)化為規(guī)模縮小的同類問(wèn)題的子問(wèn)題，每一個(gè)子問(wèn)題都用一個(gè)同樣的算法去解決。一般來(lái)說(shuō)，一個(gè)遞歸算法就是函數(shù)調(diào)用自身去解決它的子問(wèn)題。

遞歸算法的特點(diǎn)：
在函數(shù)過(guò)程中調(diào)用自身。
在遞歸過(guò)程中，必須有一個(gè)明確的條件判斷遞歸的結(jié)束，既遞歸出口。
遞歸算法簡(jiǎn)潔但效率低，通常不作為推薦算法。

上面這是原理性的解釋，講的也是十分明確，下面我們結(jié)合實(shí)例來(lái)細(xì)細(xì)琢磨。

二、編寫一個(gè)遞歸算法，實(shí)現(xiàn)匯總累加節(jié)點(diǎn)的分?jǐn)?shù)值

var getScoreSum=function (data, options){
//默認(rèn)參數(shù)配置
var options={
scoreField: options.scoreField || "score", //分?jǐn)?shù)屬性名
childrenField: options.childrenField || "children", //子節(jié)點(diǎn)集合屬性名
spread: options.spread || false
};
var scoreSum=0; //定義父級(jí)節(jié)點(diǎn)匯總分?jǐn)?shù)的局部變量
if(data && data.length > 0){
for(var i=0, item; i < data.length; i++){
item=data[i];
var itemScore=item[options.scoreField] || 0, itemChildren=item[options.childrenField] || []; //定義本次循環(huán)中的局部變量
var tempSum=0; //定義當(dāng)前條目匯總分?jǐn)?shù)的臨時(shí)變量
//是否有子節(jié)點(diǎn)
if(itemChildren && itemChildren.length > 0){
var tempCldSum=getScoreSum(itemChildren, options) || 0; //遞歸調(diào)用 getScoreSum() 方法，獲取當(dāng)前節(jié)點(diǎn)下的子節(jié)點(diǎn)集合的匯總分?jǐn)?shù) tempCldSum
tempSum +=tempCldSum; //子節(jié)點(diǎn)集合的匯總分?jǐn)?shù) tempCldSum，追加到當(dāng)前節(jié)點(diǎn)匯總分?jǐn)?shù) tempSum 上
}else{
tempSum +=itemScore; //沒有子節(jié)點(diǎn)，以當(dāng)前節(jié)點(diǎn)的分?jǐn)?shù)值追加到當(dāng)前節(jié)點(diǎn)匯總分?jǐn)?shù) tempSum 上
delete item[options.childrenField]; //刪除屬性
}
item["scoreSum"]=tempSum; //已有或一個(gè)新的節(jié)點(diǎn)屬性：scoreSum，并使用當(dāng)前節(jié)點(diǎn)匯總分?jǐn)?shù) tempSum 賦值
item["name"]=item.name + '（' + (item.scoreSum || item.score) + ' 分）' //其他屬性設(shè)置
item["spread"]=options.spread;
scoreSum +=tempSum; //當(dāng)前節(jié)點(diǎn)匯總分?jǐn)?shù)追加到父級(jí)節(jié)點(diǎn)匯總分?jǐn)?shù)上
}
}
return scoreSum;
}

在方法中用到了調(diào)用方法自身的執(zhí)行語(yǔ)句，目的是遍歷所有子節(jié)點(diǎn)，做相同的累加處理。

三、調(diào)用遞歸函數(shù)，并測(cè)試題目的分?jǐn)?shù)值在實(shí)際數(shù)據(jù)展現(xiàn)時(shí)是否準(zhǔn)確無(wú)誤

//layui 模塊化組件引用
layui.use(['jquery', 'layer', 'tree'], function () {
var $=layui.$, layer=layui.layer, tree=layui.tree;
//分?jǐn)?shù)匯總處理
getScoreSum(nodes, {scoreField: "score", childrenField: "children", spread: true});
//console.log(nodes);
//構(gòu)建樹節(jié)點(diǎn)
var buildTreeNodes=function (options) {
options=options || {};
var treeNodes=[{ name: "全部分組", spread: true, children: nodes }];
$("#treeGroup").empty(); //先清空DOM
layui.tree({
elem: '#treeGroup',
nodes: treeNodes,
click: function (node) {
var self=$(this.elem);
var nodeLinks=self.find("li>a");
nodeLinks.removeClass("active");
nodeLinks.filter(function (index) {
return $('cite', this).text()==node.name;
}).addClass('active');
nodeLinks.splice(0, 1); //刪除數(shù)組第一項(xiàng)：全部分組
console.log(node); //node即為當(dāng)前點(diǎn)擊的節(jié)點(diǎn)數(shù)據(jù)
document.getElementById("nodeContent").innerHTML=JSON.stringify(node, null, 2); //使用JSON.stringify() 格式化輸出JSON字符串
}
});
if (options.selectedNodeName) {
var elem=$("#treeGroup");
var nodeLinks=elem.find("ul>li>a");
nodeLinks.removeClass("active");
nodeLinks.filter(function (index) {
return $('cite', this).text()==options.selectedNodeName;
}).trigger('click');
}
}
buildTreeNodes();
});

在這里我用的是 layui 框架中的 tree 組件來(lái)展現(xiàn)遞歸處理后的數(shù)據(jù)。新建一個(gè) scoreSum.html 和 scoreSum.js 文件，在 scoreSum.html 中放一個(gè) id="tree" 的元素，用來(lái)加載遞歸處理匯總累加分?jǐn)?shù)值之后的樹形節(jié)點(diǎn)數(shù)據(jù)。

scoreSum.html 頁(yè)面的代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>使用遞歸匯總累加題目分?jǐn)?shù)值</title>
<link rel="stylesheet" href="assets/layui/css/layui.css" media="all" />
<style type="text/css">
body{
margin: 12px;
}
.layui-tree li a.active{
border-color: lightblue;
background-color: #b1deff;
}
</style>
</head>
<body>
<div class="layui-row layui-col-space20" style="margin-top: 15px;">
<div class="layui-col-md4">
<fieldset class="layui-elem-field">
<legend>題目索引</legend>
<blockquote class="layui-elem-quote layui-quote-nm layui-bg-gray">
<p>大題下面有小題，大題的分?jǐn)?shù)是匯總其下各小題的分?jǐn)?shù)</p>
</blockquote>
<div class="layui-field-box">
<ul id="tree"><li class="text-muted">正在加載...</li></ul>
</div>
</fieldset>
</div>
<div class="layui-col-md8">
<fieldset class="layui-elem-field">
<legend>題目信息</legend>
<div class="layui-field-box">
<blockquote class="layui-elem-quote">
<p><i class="layui-icon"></i> 題目的分?jǐn)?shù)值以“scoreSum”為準(zhǔn)，“score”是從數(shù)據(jù)庫(kù)中讀出來(lái)的，僅作參考。</p>
</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">
<pre id="nodeContent"><span class="layui-word-aux">點(diǎn)擊左邊節(jié)點(diǎn)，以加載節(jié)點(diǎn)信息……</span></pre>
</blockquote>
</div>
</fieldset>
</div>
</div>
<script type="text/javascript" src="assets/layui/layui.js"></script>
<script type="text/javascript" src="scoreSum.js"></script>
</body>
</html>

scoreSum.js 存放的就是上面幾段腳本：

//節(jié)點(diǎn)數(shù)據(jù)集合
var nodes=[{
……
}];
//使用遞歸算法，實(shí)現(xiàn)匯總累加節(jié)點(diǎn)的分?jǐn)?shù)值
var getScoreSum=function (data, options){
……
}
//layui 模塊化組件引用
layui.use(['jquery', 'layer', 'tree'], function () {
var $=layui.$, layer=layui.layer, tree=layui.tree;
……
buildTreeNodes();
});

四、效果截圖

效果截圖：大題的分?jǐn)?shù)值是其下小題分?jǐn)?shù)值的累計(jì)之和（11=5+6）。

本案例完整的項(xiàng)目文件目錄截圖。

在線咨詢

上一篇：Web前端培訓(xùn)：理解CSS位置屬性
下一篇：AdminLTE3 + AJAX 登錄窗體

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商