JavaScript 对象与 JSON：揭秘

我更害怕自己无法运用所赋予的能力。我更害怕自己拖延和懒惰。——丹泽尔·华盛顿

介绍

本文旨在阐明JavaScript 对象和JavaScript 对象表示法(JSON) 之间的区别。初学者在使用JSON数据时，很容易将其与JavaScript 对象混淆。JSON跨越不同的编程语言，而JavaScript 对象则仅限于 JavaScript。

由于javaScript 对象和JSON之间的相似性，因此可以使用 javascript 程序将JSON数据转换为本机JavaScript 对象，反之亦然。

那么，什么是 JSON？

JavaScript 对象表示法(JSON) 是一种用于存储和传输数据的轻量级格式。它通常用于将数据从服务器发送到网页，并且具有自描述性且易于理解。

Douglas Crockford最初在 21 世纪初指定了JSON格式。

由于JSON格式仅为文本，因此可以轻松地将其发送到服务器或从服务器接收，并可由任何编程语言用作数据格式。

JSON是JavaScript 的一个子集，几乎所有现代编程语言都以某种形式支持它。

JSON的结构基于两种基本结构，

键/值对的集合。
值的有序列表。

此外， JSON中允许有六种数据类型，包括：

大批
布尔值
无效的
数字
目的
细绳

什么是 javaScript 对象？

javaScript 对象用于存储数据集合。除原始数据类型（数字、字符串、布尔值、null、undefined 和符号）外，所有 JavaScript 值都是对象。

JavaScript 对象稍微复杂一些，因为它们可能包含多种原始数据类型。它们包含在花括号 {...} 中，可以通过对象字面量、对象构造函数语法、构造函数和原型来创建。

在其基本形式中，javaScript 对象是键：值对，其中键称为字符串，值可以是任何名称。

JSON 的功能/特性/语法

在JSON中，支持的六种数据类型将采用各种形式。

	{
	"name":"Ben Halp",
	"age":35,
	"car": null,
	"address":{
	"street": "55, cathedral road",
	"city": "Boston",
	"cop" : true
	},
	"hobbies":["reading", "golfing"]
	}

	{
	"name":"Ben Halp",
	"age":35,
	"car": null,
	"address":{
	"street": "55, cathedral road",
	"city": "Boston",
	"cop" : true
	},
	"hobbies":["reading", "golfing"]
	}

view raw data.json hosted with ❤ by GitHub

	{
	"name":"Ben Halp",
	"age":35,
	"car": null,
	"address":{
	"street": "55, cathedral road",
	"city": "Boston",
	"cop" : true
	},
	"hobbies":["reading", "golfing"]
	}

view raw data.json hosted with ❤ by GitHub

从上面的例子来看，name被设置为字符串，其键和值都用双引号引起来，age被设置为数字，address包含在一个对象中，在address对象中，key cop被设置为布尔值，car为空，hobbies被设置为一个数组。

在JSON中，严禁在文件内部使用注释。

	{
	"name":"Ben Halp",
	"age":35,
	"car": null,
	"address":{
	"street": "55, cathedral road",
	"city": "Boston",
	"cop" : true //Boolean
	},
	"hobbies":["reading", "golfing"] //Array
	}

view raw data.json hosted with ❤ by GitHub

	{
	"name":"Ben Halp",
	"age":35,
	"car": null,
	"address":{
	"street": "55, cathedral road",
	"city": "Boston",
	"cop" : true //Boolean
	},
	"hobbies":["reading", "golfing"] //Array
	}

view raw data.json hosted with ❤ by GitHub

	{
	"name":"Ben Halp",
	"age":35,
	"car": null,
	"address":{
	"street": "55, cathedral road",
	"city": "Boston",
	"cop" : true //Boolean
	},
	"hobbies":["reading", "golfing"] //Array
	}

view raw data.json hosted with ❤ by GitHub

由于代码中的注释，data.json文件中的上述代码将给我们一个错误。

还值得注意的是，JSON受到超过 50 种语言的支持，包括 JavaScript、Perl、Java、Python、Ruby、php、C。
JSON中不允许使用函数或方法，因为它们仅支持数据格式。

javaScript 对象的特点/特性/语法

键不需要用双引号引起来，只有值需要用双引号引起来。

	let person = {
	name : "Erik Wolfgang",
	location : "Europe",
	established : "1945"
	}

view raw app.js hosted with ❤ by GitHub

	let person = {
	name : "Erik Wolfgang",
	location : "Europe",
	established : "1945"
	}

view raw app.js hosted with ❤ by GitHub

	let person = {
	name : "Erik Wolfgang",
	location : "Europe",
	established : "1945"
	}

view raw app.js hosted with ❤ by GitHub

这使得区分javaScript 对象和JSON变得更加容易。

此外，JavaScript 对象也可能包含一个函数作为其成员之一。

	let member = {
	name: "dave",
	"amount": function() {
	return 300000;
	},
	"city": "bristol"
	};

view raw app.js hosted with ❤ by GitHub

	let member = {
	name: "dave",
	"amount": function() {
	return 300000;
	},
	"city": "bristol"
	};

view raw app.js hosted with ❤ by GitHub

	let member = {
	name: "dave",
	"amount": function() {
	return 300000;
	},
	"city": "bristol"
	};

view raw app.js hosted with ❤ by GitHub

从上面的代码可以看出，amount是成员对象的一个方法，它包含的数据存储在对象属性中。

javaScript 对象本质上是可变的。也就是说，它们的状态在创建后可以被修改。

	let data = { name:"Viktor", age:40, haircolor:"pink"}

	let x = data;
	x.age = 10; // This will change both x.age and data.age

view raw app.js hosted with ❤ by GitHub

	let data = { name:"Viktor", age:40, haircolor:"pink"}

	let x = data;
	x.age = 10; // This will change both x.age and data.age

view raw app.js hosted with ❤ by GitHub

	let data = { name:"Viktor", age:40, haircolor:"pink"}

	let x = data;
	x.age = 10; // This will change both x.age and data.age

view raw app.js hosted with ❤ by GitHub

javascript 对象有其自己的原始数据类型的对象版本。

	let first = new Object(); // A new Object object
	let second = new String(); // A new String object
	let third = new Number(); // A new Number object
	let fourth = new Boolean(); // A new Boolean object
	let fifth = new Array(); // A new Array object
	let sixth = new RegExp(); // A new RegExp object
	let seventh = new Function(); // A new Function object
	let eight = new Date(); // A new Date object

view raw app.js hosted with ❤ by GitHub

	let first = new Object(); // A new Object object
	let second = new String(); // A new String object
	let third = new Number(); // A new Number object
	let fourth = new Boolean(); // A new Boolean object
	let fifth = new Array(); // A new Array object
	let sixth = new RegExp(); // A new RegExp object
	let seventh = new Function(); // A new Function object
	let eight = new Date(); // A new Date object

view raw app.js hosted with ❤ by GitHub

	let first = new Object(); // A new Object object
	let second = new String(); // A new String object
	let third = new Number(); // A new Number object
	let fourth = new Boolean(); // A new Boolean object
	let fifth = new Array(); // A new Array object
	let sixth = new RegExp(); // A new RegExp object
	let seventh = new Function(); // A new Function object
	let eight = new Date(); // A new Date object

view raw app.js hosted with ❤ by GitHub

最好使用原始数据类型（字符串、数字、布尔值、空值、未定义、符号），因为它们更快且不复杂。

可以通过两种方式访问 javascript 对象的成员：括号符号和点符号。

	// Bracket Notation

	let person = {
	name : "Kudvenkat",
	location : "India",
	age : 95
	}
	console.log(person['name']); // Output : Kudvenkat



	//Dot Notation

	let person = {
	name : "Kudvenkat",
	location : "India",
	age : 95
	}
	console.log(person.name); // Output : Kudvenkat

view raw app.js hosted with ❤ by GitHub

	// Bracket Notation

	let person = {
	name : "Kudvenkat",
	location : "India",
	age : 95
	}
	console.log(person['name']); // Output : Kudvenkat



	//Dot Notation

	let person = {
	name : "Kudvenkat",
	location : "India",
	age : 95
	}
	console.log(person.name); // Output : Kudvenkat

view raw app.js hosted with ❤ by GitHub

	// Bracket Notation

	let person = {
	name : "Kudvenkat",
	location : "India",
	age : 95
	}
	console.log(person['name']); // Output : Kudvenkat



	//Dot Notation

	let person = {
	name : "Kudvenkat",
	location : "India",
	age : 95
	}
	console.log(person.name); // Output : Kudvenkat

view raw app.js hosted with ❤ by GitHub

JSON 到 JavaScript 对象的转换

JSON可以使用JSON.parse()函数转换为 JavaScript 对象。值得注意的是，如果从文件或服务器检索的数据不是JSON格式，则会发生错误。

	// JSON data in a javaScript variable
	let data = '{"name": "Andre", "age": 19, "country": "Venezuela"}';

	// Converting JSON string into a javaScript object
	let obj = JSON.parse(data);

	// Get Data From javaScript Object
	alert(obj.name); // Output: Andre
	alert(obj.age); // Output: 19
	alert(obj.country); // Output: Venezuela

view raw app.js hosted with ❤ by GitHub

	// JSON data in a javaScript variable
	let data = '{"name": "Andre", "age": 19, "country": "Venezuela"}';

	// Converting JSON string into a javaScript object
	let obj = JSON.parse(data);

	// Get Data From javaScript Object
	alert(obj.name); // Output: Andre
	alert(obj.age); // Output: 19
	alert(obj.country); // Output: Venezuela

view raw app.js hosted with ❤ by GitHub

	// JSON data in a javaScript variable
	let data = '{"name": "Andre", "age": 19, "country": "Venezuela"}';

	// Converting JSON string into a javaScript object
	let obj = JSON.parse(data);

	// Get Data From javaScript Object
	alert(obj.name); // Output: Andre
	alert(obj.age); // Output: 19
	alert(obj.country); // Output: Venezuela

view raw app.js hosted with ❤ by GitHub

从上面的例子中，我们能够使用JSON.parse()函数将JSON字符串转换为 javascript 对象，还可以使用我们之前讨论过的点符号访问每个字符串的值。

将 JavaScript 对象转换为 JSON

javascript 对象也可以使用JSON.stringify()方法转换为JSON。

	// javaScript Object in a javaScript variable
	let data = { name: "Perpetual", age: 26, city: "Lagos" };

	// Converting javaScript Object into a JSON string
	let obj = JSON.stringify(data);

	// Display Data From a JSON string
	alert(obj); // Output: {"name": "Perpetual","age": 26,"city": "Lagos"}

view raw app.js hosted with ❤ by GitHub

	// javaScript Object in a javaScript variable
	let data = { name: "Perpetual", age: 26, city: "Lagos" };

	// Converting javaScript Object into a JSON string
	let obj = JSON.stringify(data);

	// Display Data From a JSON string
	alert(obj); // Output: {"name": "Perpetual","age": 26,"city": "Lagos"}

view raw app.js hosted with ❤ by GitHub

	// javaScript Object in a javaScript variable
	let data = { name: "Perpetual", age: 26, city: "Lagos" };

	// Converting javaScript Object into a JSON string
	let obj = JSON.stringify(data);

	// Display Data From a JSON string
	alert(obj); // Output: {"name": "Perpetual","age": 26,"city": "Lagos"}

view raw app.js hosted with ❤ by GitHub

obj现在是一个字符串。此外，所有主流浏览器都支持JSON.stringify() 。

结论

在 JavaScript 中，几乎所有东西都是对象。因此，熟悉对象非常重要。此外，对象让我们能够更清晰地阅读代码，也有助于更好地表示数据。

通过本文的帮助，我相信您应该能够一眼就识别出javascript Object和JSON之间的主要区别。

要获取有关 Web 开发的更多免费内容，请订阅我的新闻通讯：
此处

鏂囩珷鏉ユ簮锛�https://dev.to/desoga/javascript-object-vs-json-demystified-494j