JavaScript是一種腳本語(yǔ)言，被廣泛應(yīng)用于Web開(kāi)發(fā)中。作為前端開(kāi)發(fā)必備的語(yǔ)言之一，JavaScript在JSON數(shù)據(jù)的處理上也有其獨(dú)特的處理方式，本文將介紹JavaScript中的本地JSON應(yīng)用。

在JavaScript中，可通過(guò)JSON存儲(chǔ)數(shù)據(jù)，通過(guò)JSON的諸多優(yōu)點(diǎn)，我們可以減少數(shù)據(jù)傳輸帶來(lái)的延遲時(shí)間和開(kāi)銷，并且大幅減少語(yǔ)言和平臺(tái)的限制性。JSON（JavaScript Object Notation）是一種輕量的數(shù)據(jù)交換格式，易于閱讀和編寫(xiě)。

//一個(gè)JSON對(duì)象的定義，擁有一個(gè)數(shù)組和兩個(gè)字符串
{
"fruits": [
"banana",
"apple",
"pear"
],
"location": "China",
"category": "fruit"
}

當(dāng)我們想要在前端通過(guò)一個(gè)URL地址獲取到一些由JSON格式的數(shù)據(jù)時(shí)，我們可以使用ajax異步請(qǐng)求工具，通過(guò)如下代碼來(lái)獲取到數(shù)據(jù)。PS: $.ajax方法需要使用jQuery庫(kù)。

$.ajax({
url: "example.json",
dataType: "json",
success: function(data) {
console.log(data);
}
});

當(dāng)我們需要對(duì)JSON中的數(shù)據(jù)進(jìn)行迭代，如用一個(gè)ul來(lái)展示這個(gè)JSON中的數(shù)組內(nèi)容時(shí)，我們可以使用for…in或者for循環(huán)來(lái)達(dá)成目的。

//使用for循環(huán)，把fruits數(shù)組中的值添加到ul中
$.getJSON("example.json", function(data) {
var ul = $("#list");
for (var i = 0; i< data.fruits.length; i++) {
var li = $("
").append(data.fruits[i]);
$(ul).append(li);
}
});
//使用for…in語(yǔ)句，把JSON中的所有元素都添加到ul中
$("#list").empty();
for (var keyi in data) {    
for (var keyj in data[keyi]) {
var li = $("
");
li.text(data[keyi][keyj]);
li.appendTo("ul#list");
}
}

除了使用$.getJSON()函數(shù)來(lái)訪問(wèn)JSON數(shù)據(jù)，我們還可以使用$.ajax()和$.get()等ajax工具進(jìn)行訪問(wèn)。$.ajax()函數(shù)是一個(gè)維度較高的方法，可以通過(guò)其options參數(shù)來(lái)實(shí)現(xiàn)對(duì)訪問(wèn)的控制。

//使用$.ajax方式，對(duì)從example.json中獲取到的數(shù)據(jù)進(jìn)行展示
$.ajax({
type: "GET",
url: "example.json",
dataType: "json",
success: function(response) {
console.log(response);
var output = "
";
for (var i in response.fruits) {
output += "
" + response.fruits[i] + "
";
}
output += "
";
$("#list").html(output);
}
});

總而言之，JavaScript中的本地JSON是一個(gè)十分強(qiáng)大的工具，通過(guò)它我們不僅可以更加方便快捷地處理數(shù)據(jù)，還可以使得代碼更加簡(jiǎn)潔易于維護(hù)。