JS和JSON的关系

1. JSON到底是什么?

json是一种数据格式,在前后端的数据交互中有较为广泛的应用。就好像中国通用普通话,国际交流通用英语一样。
但是,JSON这个数据跟任何编程语言都无关。只不过,这个数据的发明者再创造之处,发现JS中的对象的格式非常具有魅力,参考了js中的对象的格式,发明了一种叫JSON的数据。

JSON的作用:使用ajax进行前后台数据交换,移动端与服务端的数据交换
(json就是前后端数据的统一格式,有利于编写和解析)

2. JSON数据规则

(1) 必须是字符
(2) 基础格式参考js中的对象(array和object)
(3) 对象格式的key部分必须放在双引号中,单引号都不行
(4) 不允许出现没有意义的逗号
(5) 不允许出现函数、undefined、NaN、可以出现null
(6) 不允许出现单引号

例:(n为错,y为对)
	var json = {"name":"admin","age":18};   // n,违反了1
	var json = "{'name':'admin'}";          // n,违反了3
	var json = "['hello',123,true]";        // n,违反了6
	var json = `["hello",123,true]`;        // y
	var json = '{"name":"admin"}';          // y
	var json = '{"name":"admin",}';         // n,违反了4
	var json = '{"name":"admin","show":undefined}';  // n,违反了5
	var json = '[{"name":"admin"},{"name":"zhangsan"},]';   // n,违反了4
	var json = '[{"name":"admin"},{"name":"zhangsan"}]';   // y

以上是在js中表示的json

如何专门表示json:
有json文件,扩展名为:.json的文件
json文件自身的所有内容,默认就是字符
所以,在json文件中只需要严格符合2,3,4,5即可

3. 对象和JSON转换

3.1、对象转JSON

原始数据是对象,符合对象的规则,不符合对象的规则没法转换且JS会报错,程序压根就没法执行。转换结果数据是JSON,自己默认符合JSON的规则。

语法转换规则:JSON.stringify(对象)

例:
	var obj = {
			            name:"admin",
			            age:18,
			            sex:"男",
			            show:function(){},
			            a:undefined,
			            b:NaN,
			            c:null,
			        }
			
			        var str = JSON.stringify(obj);

注:因为json不识别函数,undefined,NaN,所以在强行转换之后,函数和undefined会被忽略,NaN被转成null

3.2、JSON转对象

原始数据是JSON,符合JSON的规则,转换结果数据是对象,自己默认符合对象规则

语法转换规则:JSON.parse(str)

例:(t为true,f为false)
 var str = `{"name":"root"}`;				// t
 var str = {"name":"admin","age":18};		//f 不是字符
 var str = "{'name':'admin'}";				//f  key要双引号包
 var str = "['hello',123,true]";				//f 不允许出现单引号
 var str = '["hello",123,true]';				// t
 var str = '{"name":"admin",}';			// f 出现多余逗号
 var str = '{"name":"admin","show":function(){}}';		// f 出现函数
 var str = '[{"name":"admin"},{"name":"zhangsan"}]';	//t
 var str = `{"name":'admin'}`;				// f 出现单引号
var o = JSON.parse(str);					

注意:因为是将json转成对象,json本身是字符,不管怎么写,js都不报错。但是如何不符合json的规则,在转换过程中,json会报错。

实际中: 以上这些东西都是写在<script>中的,所以说JSON是js的原生内容,也就意味着js可以直接取出JSON对象中的数据,只要var 对象名称 = json格式对象,我们就在js中直接通过对象格式的名称来获取到对象中的数据,不需要解析

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
This file creates a global JSON object containing two methods: stringify and parse. JSON.stringify(value, replacer, space) value any JavaScript value, usually an object or array. replacer an optional parameter that determines how object values are stringified for objects. It can be a function or an array of strings. space an optional parameter that specifies the indentation of nested structures. If it is omitted, the text will be packed without extra whitespace. If it is a number, it will specify the number of spaces to indent at each level. If it is a string (such as '\t' or ' '), it contains the characters used to indent at each level. This method produces a JSON text from a JavaScript value. When an object value is found, if the object contains a toJSON method, its toJSON method will be called and the result will be stringified. A toJSON method does not serialize: it returns the value represented by the name/value pair that should be serialized, or undefined if nothing should be serialized. The toJSON method will be passed the key associated with the value, and this will be bound to the value For example, this would serialize Dates as ISO strings. Date.prototype.toJSON = function (key) { function f(n) { // Format integers to have at least two digits. return n < 10 ? '0' + n : n; } return this.getUTCFullYear() + '-' + f(this.getUTCMonth() + 1) + '-' + f(this.getUTCDate()) + 'T' + f(this.getUTCHours()) + ':' + f(this.getUTCMinutes()) + ':' + f(this.getUTCSeconds()) + 'Z'; }; You can provide an optional replacer method. It will be passed the key and value of each member, with this bound to the containing object. The value that is returned from your method will be serialized. If your method returns undefined, then the member will be excluded from the serialization. If the replacer parameter is an array of strings, then it will be used to select the members to be serialized. It filters the results such that only members with keys listed in the replacer array are stringified. Values that do not have JSON representations, such as undefined or functions, will not be serialized. Such values in objects will be dropped; in arrays they will be replaced with null. You can use a replacer function to replace those with JSON values. JSON.stringify(undefined) returns undefined. The optional space parameter produces a stringification of the value that is filled with line breaks and indentation to make it easier to read. If the space parameter is a non-empty string, then that string will be used for indentation. If the space parameter is a number, then the indentation will be that many spaces. Example: text = JSON.stringify(['e', {pluribus: 'unum'}]); // text is '["e",{"pluribus":"unum"}]' text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t'); // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]' text = JSON.stringify([new Date()], function (key, value) { return this[key] instanceof Date ? 'Date(' + this[key] + ')' : value; }); // text is '["Date(---current time---)"]' JSON.parse(text, reviver) This method parses a JSON text to produce an object or array. It can throw a SyntaxError exception. The optional reviver parameter is a function that can filter and transform the results. It receives each of the keys and values, and its return value is used instead of the original value. If it returns what it received, then the structure is not modified. If it returns undefined then the member is deleted. Example: // Parse the text. Values that look like ISO date strings will // be converted to Date objects. myData = JSON.parse(text, function (key, value) { var a; if (typeof value === 'string') { a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value); if (a) { return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])); } } return value; }); myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) { var d; if (typeof value === 'string' && value.slice(0, 5) === 'Date(' && value.slice(-1) === ')') { d = new Date(value.slice(5, -1)); if (d) { return d; } } return value; }); This is a reference implementation. You are free to copy, modify, or redistribute.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值