欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

javascript 對象json

阮建安1年前7瀏覽0評論

今天我們來講一下Javascript對象中的JSON。JSON是一種輕量級的數據交換格式,以鍵值對方式存儲數據,快速有效地進行數據交換。相信想必大家在項目開發中已經深有體會,實踐當中也有了自己的一些心得體會。

首先,讓我們看看JSON是如何定義對象的,這是我們在工程實踐中最常見的用法。

{
"name": "Peter",
"age": 28,
"city": "Beijing",
"job": "Software Engineer"
}

上述對象結構以鍵值對進行存儲,在這里,name、age、city、job分別是對象的屬性名,對應的值分別為Peter、28、Beijing、Software Engineer。通過{}將屬性名和屬性值綁定在一起,使它變成了一個JSON對象,是不是很直觀易懂呢?

在這里提醒大家,因為JSON格式要求屬性名和字符串必須要用雙引號來包裹,否則會報錯。下面這個例子就可以引發錯誤:

{
name: "Peter",
age: 28,
city: "Beijing",
job: "Software Engineer"
}

下一步,帶你一起了解JSON.parse()方法和JSON.stringify()方法。

JSON.parse()方法,用于將一個符合JSON格式的字符類型轉換成一個Javascript對象。

var str = '{"name": "Peter", "age": 28, "city": "Beijing", "job": "Software Engineer"}';
var obj = JSON.parse(str);
console.log(obj.name);   // "Peter"
console.log(obj.age);    // 28
console.log(obj.city);   // "Beijing"
console.log(obj.job);    // "Software Engineer"

JSON.stringify()方法的作用是將一個對象或數組轉換為JSON字符串:

var obj = {name: "Peter", age: 28, city: "Beijing", job: "Software Engineer"};
console.log(JSON.stringify(obj));   // "{"name":"Peter","age":28,"city":"Beijing","job":"Software Engineer"}"

接下來,舉一個實際場景的例子。一個RESTful API接口返回的數據如下:

[
{
"word": "github",
"description": "一個代碼托管平臺"
},{
"word": "ubuntu",
"description": "一個基于Debian的操作系統"
},{
"word": "npm",
"description": "Node.js的包管理器"
}
]

我們需要通過Javascript將它轉換為一個具體的數組,對其進行操作:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000', true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var responseArr = JSON.parse(xhr.responseText);
console.log(responseArr[0].word);   // github
console.log(responseArr[1].description);   // 一個基于Debian的操作系統
}
}

上述代碼通過XMLHttpRequest對象從服務器端獲取RESTful API接口返回的數據,然后通過JSON.parse()方法將它轉換成了一個Javascript對象。此時我們就可以對這個數組進行操作。

總結一下,JSON作為一種輕量簡便的數據格式,在前端開發工作中扮演著非常重要的角色。掌握JSON相關的方法,對于提高代碼水平也十分有幫助,希望大家通過閱讀這篇文章,掌握JSON的相關知識,運用起來更加高效便捷。