JavaScript常见JSON操作实例分析


Posted in Javascript onAugust 08, 2018

本文实例讲述了JavaScript常见JSON操作。分享给大家供大家参考,具体如下:

1、JSON

JSON,JavaScript Object Notation)(JavaScript对象表示法) ,是存储和交换文本信息的语法,是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小,类似 XML,但JSON 比 XML更小、更快,更易解析。

JSON不支持变量、函数、对象实例,只是一种数据的格式。数据在键值对中,数据由逗号分隔。

2、JSON数据类型

(1)简单数据类型:字符串、数值、布尔值,null(不支持JavaScript的 undefined)。

(2)对象:无序的键值对。

(3)数组:有序的值列表。

3、JSON对象与JavaScript对象的不同

(1)属性必须用双引号(最好不要用单引号,可能会出问题)。

(2)末尾无分号。

(3)不支持变量。

4、JSON数组与JavaScript数组的不同

(1)末尾无分号。

(2)不支持变量。

5、序列化

(1)JSON.stringify()方法

把JavaScript对象(JSON对象)序列化为JSON字符串的方法。默认情况下,输出的JSON字符串不包含任何空格字符或缩进,同时会忽略JavScript对象的函数和原型对象。

接收3个参数:过滤器、可选的过滤器(可以是函数,也可以是数组)、可选的字符串缩进数。

var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"]
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符将数组连接成一个字符串
  case "age":
    return value + 1;
  case "adult":
    return undefined;//返回undefined则删除此属性
  default:
    return value;//其他值正常显示
  }
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice","age":23,"adult":true,"friends":["Bruce", "Cindy"]}
alert(jsonText2);//{"name":"Alice","friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","age":24,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
  "name":"Alice",
  "age":23,
  "adult":true,
  "friends":[
    "Bruce",
    "Cindy"
  ]
}
*/

(2)toJSON()方法

作为stringify()方法中第2个参数过滤器的补充。stringify()有时不能满足某些对象进行自定义序列化的需求,则给对象定义toJSON()方法。

序列化对象的顺序:

  • 1)若存在toJSON()方法且能通过它取得有效的值,则调用这个方法。否则,返回对象本身。
  • 2)如果提供了第2个参数,应用此函数过滤器,传入函数过滤器的值是第1步返回的值。
  • 3)对第2步返回的每个值进行相应的序列化。
  • 4)如果提供了第3个参数,执行相应的格式化。
var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"],
  toJSON:function(){
    return {"name":"Alice","id":23,"friends":["Bruce", "Cindy"]};
  }
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符将数组连接成一个字符串
  case "id":
    return value - 1;
  case "age":
    return value + 1;//返回undefined则删除此属性
  default:
    return value;//其他值正常显示
  }
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice", "id":23, "friends":["Bruce", "Cindy"]};
alert(jsonText2);//{"id":23,"friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","id":22,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
  "name":"Alice",
  "id":23,
  "friends":[
    "Bruce",
    "Cindy"
  ]
}
*/

(3)eval()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第一种方法。

var JSText = eval('(' + '{"name":"Alice", "friends":["Bruce", "Cindy"]}' + ')');
alert(JSText.friends);//Bruce,Cindy

注意:eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的。

(4)jQuery.parseJSON()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第二种方法。

需要先引入jQuery的js文件。

var JSText = jQuery.parseJSON('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
alert(JSText.friends);//Bruce,Cindy

注意:从jQuery 3.0开始,不推荐使用jQuery.parseJSON()方法,要解析JSON字符串,请改用原生的JSON.parse()方法。

(5)JSON.parse()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第三种方法。

接收2个参数:JSON字符串和可选的函数(在每个键值对上调用)。

eg1:

var JSText1 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
var JSText2 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}', function(key, value) {
  if (key == "friends")
      return value.join("&");
    else
      return value;
});
alert(JSText1.friends);//Bruce,Cindy
alert(JSText2.friends);//Bruce&Cindy

注意:第一个参数是JSON字符串,因此JSON对象需要用引号引住。

eg2:

var person = {
  name: "Alice",
  age: 23,
  birthday: new Date(1993, 12, 6)//保存了一个Date对象
};
var jsonText = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
alert(jsonText);//{"name":"Alice","age":23,"birthday":"1994-01-05T16:00:00:000Z"}
var JSText = JSON.parse(jsonText, function(key, value) {//解析在JSText中还原了Date对象,则JSText.birthdat属性中会保存一个Date对象
  if (key == "birthday")
    return new Date(value);
  else
    return value;
});
alert(JSText.birthday.getFullYear());//1994,已是Date对象,可以调用getFullYear()
Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
bootstrap Table的一些小操作
Nov 01 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue中的inject学习教程
Apr 24 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 #Javascript
JS实现自定义弹窗功能
Aug 08 #Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 #Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 #Javascript
JS的Ajax与后端交互数据的实例
Aug 08 #Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
You might like
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python Map 函数的使用
2020/08/28 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
公证书标准格式
2014/04/10 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
销售工作决心书
2015/02/04 职场文书
换届选举主持词
2015/07/03 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript