JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数

下面是关于 JavaScript 中 JSON.parse 函数和 JSON.stringify 函数的详细讲解。

JSON 简介

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript 的一个子集,可以被多种不同编程语言读取和写入。

在 JavaScript 中要想将 JSON 数据转换为对象,或者将对象转换为 JSON 数据,可以使用 JSON.parse() 和 JSON.stringify() 方法。

JSON.parse() 方法

JSON.parse() 方法用于将一个JSON字符串转换为JavaScript对象。

基本用法:

const jsonStr = '{"name":"Jack", "age": 18, "city":"New York"}'
const obj = JSON.parse(jsonStr)
console.log(obj.name) // 输出 "Jack"

如果 JSON 字符串不符合规范(如缺失双引号或者属性名未加引号等),则该方法会抛出 SyntaxError 错误。

在 JSON.parse() 方法中还有一个可选的 reviver 参数,可以用来修改解析出来的对象或者数组。

例如,下面的代码演示了 reviver 参数的用法:

const jsonStr = '{"name":"Jack", "age": 18, "city":"New York"}'
const obj = JSON.parse(jsonStr, (key, value) => {
  if (key === 'age') {
    return value + 1
  }
  return value
})
console.log(obj.age) // 输出 19

在这个例子中,reviver函数判断如果键值为 "age" ,则将值加1后返回,否则返回原始值。

JSON.stringify() 方法

JSON.stringify() 方法将 JavaScript 对象或数组转换为 JSON 字符串。

基本用法:

const obj = {name: 'Jack', age: 18, city: 'New York'}
const jsonStr = JSON.stringify(obj)
console.log(jsonStr) 
// 打印结果: {"name": "Jack","age":18,"city":"New York"}

在 JSON.stringify() 方法中还包括第二个和第三个可选参数,分别是 replacer 和 space。

replacer 参数可以是一个函数或者数组。如果参数是一个函数,该函数将有机会修改存储在 JSON 字符串中的每个值。如果参数是一个数组,只有包含在数组中的属性名才会被序列化到 JSON 字符串中。

例如:

const obj = { a: 1, b: 2, c: 3 }
const jsonStr = JSON.stringify(obj, ['a', 'c']) 
console.log(jsonStr)
// 打印结果:{"a":1, "c":3}

// 使用 replacer 函数过滤
const jsonStr2 = JSON.stringify(obj, (key, value) => {
  if (key === 'a') {
    return undefined
  }
  return value
})
console.log(jsonStr2)
// 打印结果:{"b":2,"c":3}

space 参数可选,用来控制缩进的空格数。例如:

const obj = {name: 'Jack', age: 18, city: 'New York'}
const jsonStr = JSON.stringify(obj, null, 2)
console.log(jsonStr)
// 打印结果:
// {
//   "name": "Jack",
//   "age": 18,
//   "city": "New York"
// }

以上是关于 JSON.parse() 和 JSON.stringify() 方法的详细讲解攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数 - Python技术站

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

相关文章

  • js 键盘记录实现(兼容FireFox和IE)

    实现JS键盘记录兼容FireFox和IE的方法有很多种。下面我将为大家介绍一种比较常用的实现方式。 1. 监听键盘事件 要实现JS键盘记录,首先我们需要监听用户的键盘事件。一般情况下,用户在按下键盘上的按键时,会触发以下三种事件: keydown: 在键盘按下时触发,可能会连续触发多次。 keyup: 在键盘松开时触发,可能会连续触发多次。 keypress…

    JavaScript 2023年6月11日
    00
  • javascript使用输出语句实现网页特效代码

    请听我详细讲解。 在 JavaScript 中,我们可以使用输出语句实现网页特效代码。主要有两种方法:通过console.log向浏览器控制台输出信息或直接操作网页DOM元素来实现特效效果。 通过 console.log 输出信息 console.log 是 JavaScript 中常用的控制台输出方式,它可以输出文本信息或变量的值,并可以跟着一些格式化标记…

    JavaScript 2023年5月28日
    00
  • 利用JavaScript编写Python内置函数查询工具

    我来讲解一下”利用JavaScript编写Python内置函数查询工具”的攻略。 步骤一:准备工作 首先,我们需要在网页上嵌入一个文本框和一个按钮,文本框用于输入Python内置函数的名称,按钮用于触发查询操作。这个过程可以通过HTML和JavaScript代码来实现。 <body> <input type="text"…

    JavaScript 2023年5月28日
    00
  • js 递归和定时器的实例解析

    JS 递归和定时器的实例解析 什么是递归? 递归是一种算法或函数设计技术,它是通过函数体内调用函数本身来完成的。通常情况下,递归函数是以递归式的表达式来定义的。简单来说,递归可以看作是把大的问题不断化解成相同的小问题,最终解决相同的小问题就能解决大的问题。 递归的示例 function sum(n) { if (n <= 1) return 1; re…

    JavaScript 2023年6月11日
    00
  • JS实现轮播图效果的3种简单方法

    JS实现轮播图效果的3种简单方法 1. 利用定时器来实现轮播图效果 首先,我们需要先定义图片数组,以便进行遍历,设置一个计数器,每隔一段时间,计数器加1,通过计数器来更改图片。 HTML代码: <div id="slider"> <img src="img1.jpg" alt="图片一&qu…

    JavaScript 2023年6月11日
    00
  • javascript实现一款好看的秒表计时器

    接下来我将为您详细讲解如何使用JavaScript实现一款好看的秒表计时器。实现这个计时器总体步骤如下: 确定计时器的基本功能。 创建基本的HTML结构。 编写JavaScript代码实现计时器逻辑。 优化样式,增强用户体验。 下面我将逐步解释实现的步骤。 1. 确定计时器的基本功能 在我们开始写代码之前,需要确定计时器的基本功能。我们的计时器主要有三个功能…

    JavaScript 2023年5月27日
    00
  • 使用webstorm进行javascript的Debug调试功能

    以下是详细讲解使用WebStorm进行JavaScript Debug调试功能的完整攻略: 约定 在本攻略中,我们使用WebStorm Version 2020.3.2,并假设你已经安装和配置好了WebStorm IDE。同时,我们使用以下的JavaScript代码示例: function sum(a, b) { return a + b; } consol…

    JavaScript 2023年6月11日
    00
  • vscode中vue-cli项目es-lint的配置方法

    下面是详细讲解“vscode中vue-cli项目es-lint的配置方法”的完整攻略: 1. 安装ESLint 首先请确保你的vscode里已经安装了 ESLint 插件,如果没有安装可以在插件市场中搜索并进行安装。ESLint 是 Javascript 的语法规范,可以用于代码的静态检查,还可以进行代码风格的约束。ESLint还支持vue、react等框架…

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