JS HOME JS Introduction JS Where To JS Output JS Statements JS Syntax JS Comments JS Variables JS Let JS Const JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Object Properties JS Object Methods JS Object Display JS Object Constructors JS Events JS Strings JS String Methods JS String Search JS String Templates JS Numbers JS BigInt JS Number Methods JS Number Properties JS Arrays JS Array Methods JS Array Search JS Array Sort JS Array Iteration JS Array Const JS Dates JS Date Formats JS Date Get Methods JS Date Set Methods JS Math JS Random JS Booleans JS Comparisons JS If Else JS Switch JS Loop For JS Loop For In JS Loop For Of JS Loop While JS Break JS Iterables JS Sets JS Set Methods JS Maps JS Map Methods JS Typeof JS Type Conversion JS Destructuring JS Bitwise JS RegExp JS Precedence JS Errors JS Scope JS Hoisting JS Strict Mode JS this Keyword JS Arrow Function JS Classes JS Modules JS JSON JS Debugging JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words
JavaScript JSON
JSON 是一種儲存和傳輸資料的檔案格式。
什麼是 JSON？
- JSON 通常在資料從伺服器傳送到網頁時使用。
- JSON 的意思是 **J**ava**S**cript **O**bject **N**otation（JavaScript 物件表示法）
- JSON 是一種輕量級的資料交換格式
- JSON 是“自描述的”，並且易於理解
* JSON 語法源自 JavaScript 物件表示法語法，但 JSON 格式僅為文字。用於讀取和生成 JSON 資料的程式碼可以用任何程式語言編寫。
JSON 示例
此 JSON 語法定義了一個 employees 物件：一個包含 3 個員工記錄（物件）的陣列
JSON 示例
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
JSON 格式可解析為 JavaScript 物件
JSON 格式在語法上與建立 JavaScript 物件的程式碼相同。
由於這種相似性，JavaScript 程式可以輕鬆地將 JSON 資料轉換為本地 JavaScript 物件。
JSON 語法規則
- 資料採用“名稱/值”對的形式
- 資料由逗號分隔
- 花括號包含物件
- 方括號包含陣列
JSON 資料 - 名稱和值
JSON 資料以“名稱/值”對的形式編寫，就像 JavaScript 物件屬性一樣。
“名稱/值”對由一個欄位名（用雙引號括起來）、一個冒號，然後是一個值組成
"firstName":"John"
JSON 名稱需要雙引號。JavaScript 名稱則不需要。
JSON 物件
JSON 物件寫在花括號內。
就像在 JavaScript 中一樣，物件可以包含多個“名稱/值”對
{"firstName":"John", "lastName":"Doe"}
JSON 陣列
JSON 陣列寫在方括號內。
就像在 JavaScript 中一樣，陣列可以包含物件
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
在上面的示例中，“employees”物件是一個數組。它包含三個物件。
每個物件都是一個人的記錄（包含名字和姓氏）。
將 JSON 文字轉換為 JavaScript 物件
JSON 的一個常見用途是從 Web 伺服器讀取資料，並在網頁中顯示資料。
為簡單起見，這可以透過使用字串作為輸入來演示。
首先，建立一個包含 JSON 語法的 JavaScript 字串
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
然後，使用 JavaScript 內建函式 JSON.parse() 將字串轉換為 JavaScript 物件
const obj = JSON.parse(text);
最後，在您的頁面中使用新的 JavaScript 物件
示例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
自己動手試一試 »
您可以在我們的 JSON 教程 中瞭解更多關於 JSON 的資訊。
JavaScript JSON
