JavaScript JSON 格式操作

　　关于JSON,最重要的是要理解它是一种数据格式，而不是一种编程语言。虽然具有相同的语法，但JSON并不从属于JavaScript。而且，并不是只有JavaScript才使用JSON，毕竟JSON只是一种数据格式。很多编程语言都有针对JSON的解析器和序列化器。

　　首先，说一下JSON的语法，JSON由三种类型组成，简单、对象、数组。简单值包括数值、字符串、布尔值、null。对象由一组键值对组成，其中可以嵌套数组和对象。数组表示一组有序的值得列表，可以包含数组和对象。

console.log(JSON.parse(1))

　　这样写是没有错的，可以直接解析数值，但是这个没有意义，一般实际运用中JSON都是以对象或数组的方式呈现。下面看看对象的表示法：

{"name" : "Miracle","age" : 24
}[1,2,"sd"]

　　JSON的对象和数组与JavaScript的对象字面量和数组字面量很像，在JSON中所有的键都要用双引号包裹，否则会导致语法错误。而字符串的值也必须使用双引号包裹，不能使用单引号，因为会导致语法错误，在数组中也是一样。在JSON中对象可以包含数组，而同样数组也可以包含对象。

{"name" : "Miracle","age" : 24,"skills" : ["AJAX", "ES5", "HTML5", "CSS3"],"friends" : [{"name" : "kirs","age" : 23},{"name" : "HQ","age" : 22}]
}

　　上列代码最外围是一个对象，其中包含了2个简单值，和两个数组，而第二个数组"friends"中又包含了两个对象。

　　解析与序列化

　　在JSON对象诞生之前，JSON的解析一直是使用eval()函数，使用eval()对JSON数据结构求值存在风险，因为可能会执行一些恶意代码。ECMAScript 5对解析JSON的行为进行了规范，定义了全局对象JSON。支持这个对象的浏览器有IE8+、Firefox 3.5+、Safari 4+、 Chrome 和Opera 10.5+。

　　JSON对象有两个方法:stringify()和parse()。stringify()用于将JSON对象的实例转换为JSON字符串，而JSON.parse()则将一个JSON字符串解析为JSON对象。

var jobj = {"name" : "Miracle","age" : 24
}var jtext = JSON.stringify(jobj);console.log(jtext);          //'{"name":"Miracle","age":24}'
console.log(typeof jtext);  //stringvar obj = JSON.parse(jtext);
console.log(obj.name);      //"Miracle"

　　在执行JSON.stringify()方法的时候对于JS中的特殊值比如undefined,function类型会忽略掉当前的键值对。

var jobj = {"name" : "Miracle","age" : 24,"un" : undefined,"getName" : function(){alert(0);}
}console.log(JSON.stringify(jobj)); //'{"name":"Miracle","age":24}'

　　上述代码中jobj对象中包含了一个键为"un",它的值是undefined由于JSON不识别这种基本类型，所以会将键和值全部忽略。JS中的funciton也是。

　　JSON.stringify()方法一共有三个参数，第一个参数是要转化的对象，这个参数是必选项，第二个参数是过滤设置，可以是数组，也可以是function。第三个参数是一个格式化的设置，可以是字符串或者数值。注意这里的过滤和格式化都是对对象的操作。

var jobj = {"name" : "Miracle","age" : 24,"siklls" : ["AJAX", "ES5", "HTML5", "CSS3"]
}console.log(JSON.stringify(jobj, ["name"])); //'{"name":"Miracle"}'

　　如果JSON.stringify()方法的第二个参数是一个数组，那么在执行的时候会匹配数组中的值与每个键的名称是否一样，如果有返回这个键值对，没有就忽略。如果一个都没有最终返回空对象字符串"{}"。

var jobj = {"name" : "Miracle","age" : 24,"siklls" : ["AJAX", "ES5", "HTML5", "CSS3"]
}var s = JSON.stringify(jobj, function(key, val){if(key == "name"){return "who are you?";}else if(key == "siklls"){return undefined;}else {return val;}
});console.log(s);      //{"name":"who are you?","age":24}

　　如果JSON.stringify()第二个参数是函数，那么根据函数返回的值来来匹配，如果函数自始至终都没有返回，那么结果就是undefined。这个函数接受两个参数，当前的键和值，然后根据结果返回当前键和改变后的值。例如代码中else if判断中结果返回了undefined ，前面说过了如果返回的不是JSON类型的数据，JSON会自动过滤。

　　JSON.stringify()方法的最后一个参数是用来格式化字符串。改参数是一个字符串或者数值类型。如果是数值，则使用当前数值的空格数来缩进，如果是字符串则使用字符串来缩进，注意，这里会自动换行。

var jobj = {"name" : "Miracle","age" : 24,"siklls" : ["AJAX", "ES5", "HTML5", "CSS3"]
}var s = JSON.stringify(jobj, null, 4);console.log(s);

上图是使用Chromg 控制台查看的结果。

转载于:https://www.cnblogs.com/miracle-t/p/5576816.html

JavaScript JSON 格式操作相关推荐

Javascript JSON格式
Javascript JSON格式 1)什么是JSON(JavaScript Object Notation)? 是一种轻量级的数据交换格式是独立的语言 2)JSON 语法规则数据为键/值对 ...
javascript json对象操作（基本增删改查）
/*** Json对象操作,增删改查** @author lellansin* @blog www.lellansin.com* @version 0.1* * 解决一些常见的问题* get/set ...
python json数据格式数组内元素递增赋值_利用Python实现JSON格式数据的编码与解码操作...
导读 JSON (全称:JavaScript Object Notation )是一种轻量级的数据交换格式,所谓的轻量级,是与 XML 数据结构相比而言的,在描述相同的数据下,JSON 所需的字符比X ...
JavaScript解析json格式数据简单示例
JavaScript解析json格式数据简单示例本文通过for循环来获取json结点数据,需要的朋友可以参考以下这串json数据用来存储预加载的图片路径: 代码如下: var imgData = [ ...
json格式简介和相关操作
前言:在日常工作中,我们常常会使用json做一些数据的处理,那了解json的一些基础知识和相关操作就尤为重要,本篇就是对于json格式的概括介绍和简单使用. 1.json格式简介 1.1 json基本 ...
JavaScript对象与JSON格式的转换
在Web开发中,JavaScript和JSON是两个经常用到的概念.JavaScript是一种脚本语言,可以用来操作网页的内容和行为,而JSON是一种轻量级的数据交换格式,通常用于在客户端和服务器之间 ...
Lottie--前端动画效果--UI输出json格式--lottie动画在JavaScript中使用
Lottie一个适用于Web.Android.iOS.React Native和Window的移动库,它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画,并 ...
ajax返回数据输出成表,javascript代码实例教程-ajax请求返回Json格式数据如何循环输出成table形式...
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过. 首先,Ajax请求数据,(用的是Jquery的Ajax) [javascript] $(function(){ ...
javascript解析json格式的数据
JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧. 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据 ...
javascript解析json格式的字符串，拼接后显示到表格中
知识点解析json格式的字符串拼接的HTML设置到tbody当中加载json格式的对象结果演示 html代码 <!DOCTYPE html> <html><hea ...

JavaScript JSON 格式操作

JavaScript JSON 格式操作相关推荐

最新文章

热门文章