JSON
===
[TOC]
# 參考資源
http://www.runoob.com/json/json-tutorial.html
# 概念
JSON: JavaScript Object Notation(JavaScript 對象表示法)。JSON 是存儲和交換文本信息的語法。JSON 使用 Javascript語法來描述數據對象,但是 JSON獨立于語言和平臺。PHP、Nodejs等編程語言都支持JSON。
一個JSON對象的列子:
```
{
"sites": [
{ "name":"菜鳥教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
] }
```
JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。由于這種相似性,無需解析器,JavaScript 程序能夠使用內建的 eval() 函數,用 JSON 數據來生成原生的 JavaScript 對象。
# JSON 語法規則
JSON 語法是 JavaScript 對象表示語法的子集。
數據在名稱/值對中
數據由逗號分隔
大括號保存對象
中括號保存數組
## JSON 名稱/值對
JSON 數據的書寫格式是:名稱/值對。名稱/值對包括字段名稱(在雙引號中),后面寫一個冒號,然后是值:
"name" : "菜鳥教程"
## JSON 值
JSON 值可以是:
* 數字(整數或浮點數)
* 字符串(在雙引號中)
* 邏輯值(true 或 false)
* 數組(在中括號中)
* 對象(在大括號中)
* null
## JSON 數字
JSON 數字可以是整型或者浮點型:
```
{ "age":30 }
```
## JSON 對象
JSON 對象在大括號({})中書寫,對象可以包含多個名稱/值對:
```
{ "name":"菜鳥教程" , "url":"www.runoob.com" }
```
你可以使用點號(.)來訪問對象的值:
```
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;
```
你也可以使用中括號([])來訪問對象的值:
```
x = myObj["name"];
```
你可以使用 for-in 來循環對象的屬性:
```
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
…
}
```
在 for-in 循環對象的屬性時,使用中括號([])來訪問屬性的值:
```
var myObj = { "name":"runoob", "alexa":10000, "site":null };
let str=””
for (x in myObj) {
str+= myObj[x];
}
```
JSON 對象中可以包含另外一個 JSON 對象:
```
myObj = {
"name": "runoob",
"alexa": 10000,
"sites": {
"site1": "www.runoob.com",
"site2": "m.runoob.com",
"site3": "c.runoob.com"
}
}
```
你可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象。
```
x = myObj.sites.site1; // 或者 x = myObj.sites["site1"];
```
你可以使用點號(.)來修改 JSON 對象的值:
```
myObj.sites.site1 = "www.google.com";
```
你可以使用中括號([])來修改 JSON 對象的值:
```
myObj.sites["site1"] = "www.google.com";
```
我們可以使用 delete 關鍵字來刪除 JSON 對象的屬性:
```
delete myObj.sites.site1;
```
你可以使用中括號([])來刪除 JSON 對象的屬性:
```
delete myObj.sites["site1"]
```
## JSON 數組
JSON 數組在中括號中書寫:
數組可包含多個對象:
```
let myObj = {
"name": "網站",
"sites": [{
"name": "菜鳥教程",
"url": "www.runoob.com"
}, {
"name": "google",
"url": "www.google.com"
}, {
"name": "微博",
"url": "www.weibo.com"
}]
}
```
在上面的例子中,對象 "sites" 是包含三個對象的數組。每個對象代表一條關于某個網站(name、url)的記錄。
我們可以使用索引值來訪問數組,索引從 0 開始:
```
x = myObj.sites[0];
```
你可以使用 for-in 來訪問數組:
```
for (let i in myObj.sites) {
x += myObj.sites[i];
}
```
你也可以使用 for 循環:
```
for (i = 0; i < myObj.sites.length; i++) {
x += myObj.sites[i];
}
```
你可以使用索引值來修改數組值:
```
myObj.sites[1] = "Github";
```
我們可以使用 delete 關鍵字來刪除數組元素:
```
delete myObj.sites[1];
```
## JSON 布爾值
JSON 布爾值可以是 true 或者 false:
```
{ "flag":true }
```
## JSON null
JSON 可以設置 null 值:
```
{ "runoob":null }
```
# JSON.parse()
JSON 通常用于與服務端交換數據。在接收服務器數據時一般是字符串。我們可以使用 JSON.parse() 方法將數據轉換為 JavaScript 對象。
```
JSON.parse(text[, reviver])
```
參數說明:
* text:必需, 一個有效的 JSON 字符串。
* reviver:可選,一個轉換結果的函數, 將為對象的每個成員調用此函數。
例如我們從服務器接收了以下數據:
```
{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
```
我們使用 JSON.parse() 方法處理以上數據,將其轉換為 JavaScript 對象:
```
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
```
# JSON.stringify()
JSON 通常用于與服務端交換數據。在向服務器發送數據時一般是字符串。我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換為字符串。
```
JSON.stringify(value[, replacer[, space]])
```
參數說明:
* value:必需, 一個有效的 JSON 對象。
* replacer:可選。用于轉換結果的函數或數組。如果 replacer 為函數,則 JSON.stringify 將調用該函數,并傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined,則排除成員。根對象的鍵是一個空字符串:""。如果 replacer 是一個數組,則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。當 value 參數也為數組時,將忽略 replacer 數組。
* space:可選,文本添加縮進、空格和換行符,如果 space 是一個數字,則返回值文本在每個級別縮進指定數目的空格,如果 space 大于 10,則文本縮進 10 個空格。space 有可以使用非數字,如: 。
## JavaScript 對象轉換
例如我們向服務器發送以下數據:
```
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
```
我們使用 JSON.stringify() 方法處理以上數據,將其轉換為字符串:
```
var myJSON = JSON.stringify(obj);
‘{ "name":"runoob", "alexa":10000, "site":"www.runoob.com"}’
```
# JavaScript 數組轉換
我們也可以將 JavaScript 數組轉換為 JSON 字符串:
```
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- 移動客戶端開發
- uni-app基礎
- 快速入門程序
- 單頁程序
- 底部Tab導航
- Vue語法基礎
- 模版語法
- 計算屬性與偵聽器
- Class與Style綁定
- 樣式與布局
- Box模型
- Flex布局
- 內置指令
- 基本指令
- v-model與表單
- 條件渲染指令
- 列表渲染指令v-for
- 事件與自定義屬性
- 生命周期
- 項目實踐
- 學生實驗
- 貝店商品列表
- 加載更多數據
- 詳情頁面
- 自定義組件
- 內置組件
- 表單組件
- 技術專題
- 狀態管理vuex
- Flyio
- Mockjs
- SCSS
- 條件編譯
- 常用功能實現
- 上拉加載更多數據
- 數據加載綜合案例
- Teaset UI組件庫
- Teaset設計
- Teaset使用基礎
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代碼模版
- 項目實踐
- 標簽組件
- 失物招領客戶端原型
- 發布頁面
- 檢索頁面
- 詳情頁面
- 服務端開發技術
- 服務端開發環境配置
- Koajs快速入門
- 快速入門
- 常用Koa中間件介紹
- 文件上傳
- RestfulApi
- 一個復雜的RESTful例子
- 使用Mockjs生成模擬數據
- Thinkjs快速入門
- MVC模式
- Thinkjs介紹
- 快速入門
- RESTful服務
- RBAC案例
- 關聯模型
- 應用開發框架
- 服務端開發
- PC端管理界面開發
- 移動端開發
- 項目實踐
- 失物招領項目
- 移動客戶端UI設計
- 服務端設計
- 數據庫設計
- Event(事件)
- 客戶端設計
- 事件列表頁面
- 發布頁面
- 事件詳情頁面
- API設計
- image
- event
- 微信公眾號開發
- ui設計規范