谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

JSON是一种轻量级的数据交换格式,提供了在不同编程语言之间交换数据的标准格式。在JavaScript中,JSON对象提供了一种方便的方式将JavaScript对象转换成JSON格式的字符串或者将JSON格式的字符串转换成JavaScript对象。而JSON.stringify()和JSON.parse()就是这两种转换方式。

JSON.stringify(obj)

JSON.stringify()方法接收一个JavaScript对象作为参数,并将其转换成JSON格式的字符串。在转换过程中,除了undefined,函数和symbol三种类型的属性会被自动忽略外,其他类型的属性都会被转换成对应的JSON数据类型。

以下是一个示例:

const obj = {
  name: 'Diana',
  age: 32,
  isMarried: true,
  hobbies: ['reading', 'traveling', 'cooking'],
  address: {
    city: 'Beijing',
    street: 'No. 1 Street',
    postcode: '100010'
  }
};

const jsonString = JSON.stringify(obj);

console.log(jsonString);
// 输出: {"name":"Diana","age":32,"isMarried":true,"hobbies":["reading","traveling","cooking"],"address":{"city":"Beijing","street":"No. 1 Street","postcode":"100010"}}

从上面的示例可以看出,我们利用JSON.stringify()将一个JavaScript对象转换成了对应的JSON格式字符串。在转换过程中,属性名和属性值之间用冒号分隔,不同属性之间用逗号分隔,整个对象用一对花括号包围。

JSON.parse(string)

JSON.parse()方法接收一个JSON格式的字符串作为参数,并将其转换成对应的JavaScript对象。JSON格式的字符串必须满足一定的格式要求,否则将会抛出异常。在转换过程中,JSON.parse()方法会将JSON格式的字符串还原成对应的JavaScript数据类型。

以下是一个示例:

const jsonString = '{"name":"Diana","age":32,"isMarried":true,"hobbies":["reading","traveling","cooking"],"address":{"city":"Beijing","street":"No. 1 Street","postcode":"100010"}}';

const obj = JSON.parse(jsonString);

console.log(obj);
// 输出: { name: 'Diana', age: 32, isMarried: true, hobbies: ['reading','traveling','cooking'], address: { city: 'Beijing', street: 'No. 1 Street', postcode: '100010' } }

从上面的示例可以看出,我们利用JSON.parse()将一个JSON格式字符串转换成了对应的JavaScript对象。在转换过程中,JSON.parse()会将属性名和属性值之间的冒号去掉,用双引号包围所有的属性名,对于数组和对象,用一对方括号或一对花括号包围,而且值必须用引号括起来。

综上所述,JSON.stringify()和JSON.parse()都是将JavaScript对象和JSON格式的字符串相互转换的方法。使用时要遵循转换的规则,尽量避免在JSON格式中使用不被允许的语法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript中require和import的区别详解

    JavaScript中require和import的区别详解 在JavaScript中,有两种方法用于引入外部模块:require和import。这两种方法虽然都能实现模块的引入,但是在用法和功能上存在一些区别,接下来我们将分别讲解它们并提供示例。 require require是CommonJS中使用的一种加载机制,使用较为简单,用于引入基于node.js…

    JavaScript 2023年6月10日
    00
  • 理解 JavaScript Scoping & Hoisting(二)

    理解 JavaScript Scoping & Hoisting(二) 介绍 在 JavaScript 中,作用域和变量提升(hoisting)是非常重要的概念。在第一篇理解 JavaScript Scoping 和 Hoisting 的文章中,我们讨论了作用域和 JavaScript 内部如何解析变量名称的机制。本文将继续深入探讨 JavaScri…

    JavaScript 2023年6月10日
    00
  • JavaScript实现一键复制文本功能的示例代码

    下面是实现一键复制文本功能的示例代码的攻略: 第一步:引入clipboard.js clipboard.js是一个轻量级的JavaScript库,可以帮助我们实现粘贴板相关的功能。首先,我们需要将它的代码引入我们的HTML页面中,可以通过npm进行安装或者直接下载官方发布的脚本文件。 <script src="path/to/clipboar…

    JavaScript 2023年6月11日
    00
  • 使用layui前端框架弹出form表单以及提交的示例

    下面就给你讲解一下使用layui前端框架弹出form表单以及提交的完整攻略。 首先,我们需要在页面中引入layui的CSS和JS文件,并且调用layui的模块: <!– 引入layui –> <link rel="stylesheet" href="../layui/css/layui.css"&…

    JavaScript 2023年6月10日
    00
  • css3强大的动画效果animate使用说明及浏览器兼容介绍

    CSS3强大的动画效果Animate使用说明及浏览器兼容介绍 简介 在网站设计中,动画效果通常能增加用户的交互体验和视觉效果。而CSS3中的动画效果Animate提供了一种简单易用的方式去实现动效,同时支持现代化的浏览器,减少了开发者编写JavaScript代码的工作量。 使用说明 安装 Animate是由第三方JavaScript库jQuery UI提供的…

    JavaScript 2023年6月11日
    00
  • 创建echart多个联动的示例代码

    创建 ECharts 多个联动的示例代码需要以下几个步骤: 引入 ECharts 的资源文件 首先,在你的 HTML 文件中,需要按照以下方式引入 ECharts 的资源文件: <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"&g…

    JavaScript 2023年6月10日
    00
  • 由 JavaScript 的 with 引发的探索

    标题:由 JavaScript 的 with 引发的探索 背景 JavaScript 中的 with 关键字让你可以在代码中使用更简洁的语法来访问一个对象的属性。然而,使用 with 带来的优雅语法留下的是性能问题。本文将介绍如何使用 JavaScript 的基本概念和语法,避免 with 带来的问题。 问题 使用 with 增加了用于作用域查找的代码,导致…

    JavaScript 2023年6月11日
    00
  • javascript实时显示当天日期的方法

    让我们开始讲解“JavaScript实时显示当天日期的方法”的完整攻略。 首先,我们需要了解如何在 HTML 中引入 JavaScript。在 HTML 中使用 <script> 标签引入 JavaScript 代码文件或者直接在 <script> 标签中编写 JavaScript 代码。下面是一个最简单的例子。 <!DOCTY…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部