JSON叫做JavaScript Object Notation， JavaScript物件表示法，由JS大牛Douglas發明，
JSON 是存盤和交換文本資訊的語法，類似 XML，
JSON 比 XML 更小、更快，更易決議，
JSON與 XML 異同之處
相同之處
- JSON 是純文本
- JSON 具有"自我描述性"（人類可讀）
- JSON 具有層級結構（值中存在值）
- JSON 可通過 JavaScript 進行決議
- JSON 資料可使用 AJAX 進行傳輸
不同之處
- 沒有結束標簽
- 更短
- 讀寫的速度更快
- 能夠使用內建的 JavaScript eval() 方法進行決議
- 使用陣列
- 不使用保留字
JSON語法
JSON 語法規則
JSON 語法是 JavaScript 物件表示語法的子集，
- 資料在名稱/值對中
- 資料由逗號分隔
- 大括號 {} 保存物件
- 中括號 [] 保存陣列，陣列可以包含多個物件
JSON 資料的書寫格式是：，
key : value
名稱/值對包括欄位名稱（在雙引號中），后面寫一個冒號，然后是值：
"name" : "林江濤"
這很容易理解，等價于這條 JavaScript 陳述句：
name = "菜鳥教程"
JSON與物件實體示例
//物件
var obj={
name:"ret",
age:18,
sex:"男"
}
//JSON
var jon={
"name":"ret",
"age":18,
"sex":"男"
}
JSON 值
JSON 值可以是：
-數字（整數或浮點數）
-字串（在雙引號中）
-邏輯值（true 或 false）
-陣列（在中括號中）
-物件（在大括號中）
-null
JSON數字
JSON 數字可以是整型或者浮點型：
示例
var jon={
"age":30,
"height":18.5
}
console.log(jon.age);
console.log(jon.height);
JSON物件
JSON物件語法
- JSON 物件在大括號 {} 中書寫：
- 物件可以包含多個 key/value（鍵/值）對，
- key 必須是字串，value 可以是合法的 JSON 資料型別（字串, 數字, 物件, 陣列, 布林值或 null），
- key 和 value 中使用冒號(:)分割，
- 每個 key/value 對使用逗號(,)分割，
語法:{key1 : value1, key2 : value2, … keyN : valueN }
物件可以包含多個名稱/值對：
{ "name":"林江濤" , "sex":"男" }
這一點也容易理解，與這條 JavaScript 陳述句等價：
name = "林江濤",
sex= "男"
訪問物件值
可以使用點號（.）來訪問物件的值：也可以使用中括號（[]）來訪問物件的值：
示例
var jon={
"name":"林江濤" ,
"sex":"男",
"kungfu":mykungfu,
"無線影分身術":this
}
function mykungfu(){
console.log("發射了一枚飛鏢");
}
console.log(jon.name);
console.log(jon["sex"])
==注意== json 在進行通過鍵名來獲取值時，需要特別注意一下， 把鍵名賦值給另外一個變數，然后通過.方式去獲取值，這種方式是行不通的，
var my, x;
my = { "name":"林江濤", "年齡":10000, "性別":null };
x = "name";
console.log(my.x) // 結果是 undefined
只能通過 [] 方式去訪問:
var my, x;
my = { "name":"林江濤", "年齡":10000, "性別":null };
x = "name";
console.log(my[x]) // 結果是 林江濤
### 回圈物件 以使用 for-in 來回圈物件的屬性： 示例
var jon={
"name":"林江濤" ,
"sex":"男",
"kungfu":mykungfu,
"無線影分身術":this
}
function mykungfu(){
console.log("發射了一枚飛鏢");
}
for(x in jon){
console.log(jon[x]);
}
JSON物件的新增,修改,洗掉
JSON新增
var my = { "name":"林江濤", "年齡":10000, "性別":null };
my.我是新增的="哈哈哈哈";
console.log(my);
JSON修改
示例
var my = { "name":"林江濤", "年齡":10000, "性別":null };
my.name="天王老子";
console.log(my);
效果
JSON洗掉
示例
var my = { "name":"林江濤", "年齡":10000, "性別":null };
delete my.name
console.log(my);
效果
偷個懶
其實物件就已經包含的其他所有的了因為物件是所有參考型別的基類
所以null 和bool什么的就不一一列舉了
如下,包含JSON和function
JSON 陣列
JSON 陣列在中括號 [] 中書寫：
陣列可包含多個物件：
語法
[
{ key1 : value1-1 , key2:value1-2 },
{ key1 : value2-1 , key2:value2-2 },
{ key1 : value3-1 , key2:value3-2 },
…
{ keyN : valueN-1 , keyN:valueN-2 }
]
示例
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
console.log(我);
因為 JSON 使用 JavaScript 語法所以我們可以象訪問陣列一樣訪問里面的資料
console.log(我.師門[0].關系)
也可以像這樣修改資料：
我.師門[0].關系="老頭子"
回圈陣列
for-in回圈
代碼示例
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
for(i in 我.師門){
console.log(我.師門[i]);
}
效果
也可以回圈出陣列里的鍵值對
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
for(i in 我.師門){
for(j in 我.師門[i]){
console.log(我.師門[i][j])
}
}
for回圈
代碼示例
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
for(i=0 ;i < 我.師門.length ; i++){
console.log(我.師門[i])
}
效果
但從陣列中回圈出來的是物件所以我們不能再使用for回圈遍歷里面的每一個元素了
代碼示例
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
for(i=0 ;i < 我.師門.length ; i++){
for(j=0;j<我.師門[i].length;j++){
console.log(我.師門[i][j]);
}
}
效果,出錯誤了啥也沒有
JOSN陣列的新增修改洗掉
因為josn使用的就是JavaScript的語法,所以josn陣列的新增修改和JavaScript的一模一樣,
那么我這里就寫一下奇奇怪怪的新增修改
新增示例
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
我.師門[我.師門.length]={"HHHH":"HHHH","我是新增的":"對的,他是新來的"};
console.log(我)
效果示例.可以看到,師門下面多出了一個陣列
修改洗掉同上
JSON陣列中的洗掉
洗掉數值的元素，陣列的大小不變，代碼如下：
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
console.log("洗掉前陣列長度:"+我.師門.length);
delete 我.師門[1];
console.log("洗掉后陣列長度:"+我.師門.length)
console.log("查看被洗掉的陣列:"+我.師門[1])
console.log("for in遍歷陣列")
for(i in 我.師門){
console.log("陣列下標:"+i);
console.log( 我.師門[i]);
}
delete 運算子并不是徹底洗掉元素，而是洗掉它的值，但仍會保留空間，
運算子 delete 只是將該值置為 undefined，而不會影響陣列長度，即將其變為稀疏陣列（《JS權威指南》7.5節）
JS 中徹底洗掉 JSON 物件組成的陣列中的元素
在 JS 中，對于某個由 JSON 物件組成的陣列，例如：
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
如果我們想要洗掉其中的第二個json物件，應該怎么做呢？方法和操作陣列完全相同，
但在上面使用delete運算子洗掉陣列的程序中,我們發現這種方法并不是徹底洗掉元素，而是洗掉它的值，但仍會保留空間，
查詢運算子 delete 我們知道它只是將該值置為 undefined，而不會影響陣列長度，即將其變為稀疏陣列
了解及此，也許想著可以將洗掉點之后的元素各往前移動1個單位，實作徹底剔除該元素，但在JS方法中我們可以查到一種更加簡便的方式：splice() 方法
var 我={
"師門":[
{"關系":"師傅","年紀":40,"身高":175},
{"關系":"徒弟","年紀":10,"身高":260},
{"關系":"小徒弟","年紀":3,"身高":170}
],
"name":"林江濤",
"age":100
}
console.log("洗掉前陣列長度:"+我.師門.length);
delete 我.師門.splice(1,1);
console.log("洗掉后陣列長度:"+我.師門.length)
console.log("查看被洗掉的陣列:"+我.師門[1])
console.log("for in遍歷陣列")
for(i in 我.師門){
console.log("陣列下標:"+i);
console.log( 我.師門[i]);
}
效果
如上圖,洗掉后,我.師門長度為二這正是我想要的結果
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/146561.html
標籤：其他
上一篇：基于Jenkins、Node.js、碼云和Shell的Vue前端自動化部署
下一篇：小程式canvas生成海報