JS查漏补缺——JSON的了解与使用

阿皮想当小怪兽
140 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

JSON

🤔在开发的时候我们会经常遇到JSON，JSON到底是什么？

JSON是一种非常重要的数据格式（用来保存一部分数据） ，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。

应用场景：

  • 网络数据的传输JSON数据；
  • 项目的某些配置文件；
  • 非关系型数据库（NoSQL）将json作为存储格式；

基本语法：

JSON的顶层支持三种类型的值：

  • 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
123
  • 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
{
  "name":"eureka",
  "age": 19
}
  • 数组值：数组的值可以是简单值、对象值、数组值；
[  123,  {    "name":"Eureka"  }]

🚨注意：JSON不能加注释，而且属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号。

JSON序列化

在MDN上提到：JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript。

🤔为什么需要JSON序列化呢？

场景：将对象数据存储到localStorage

const obj = {
  name: 'eureka',
  age: 19,
  hobby:['滑板']
}

localStorage.setItem("obj",obj)

如果直接将obj对象存储到localStorage，setItem会将对象类型转成string， 而obj对象转成string类型，则会转成 "[object object]" , 我们要存储的内容根本存不到localStorage里面。

所以我们需要将对象JSON序列化：

const obj = {
  name: 'eureka',
  age: 19,
  hobby:['滑板']
}
// 将obj转成JSON格式的字符串
const objString = JSON.stringify(obj)

// 将对象数据存储localStorage
localStorage.setItem("obj", objString)

这样就可以将对象数据存储到localStorage里面了

而我们之后要用到JSON序列化之后的数据则要将其解析才能使用：

const jsonString = localStorage.getItem("obj")

// 将JSON格式的字符串转回对象
const info = JSON.parse(jsonString)
console.log(info)

JSON方法

序列化方法 JSON.stringify()

返回与指定值对应的 JSON 字符串，可以通过额外的参数，控制仅包含某些属性，或者以自定义方法来替换某些 key 对应的属性值。

  1. 上面代码一样直接转化
  2. stringfy第二个参数：replacer
  • 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
  • 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
// 对key和value起到一个拦截作用
const jsonString3 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return value + 1
  }
  return value
})
console.log(jsonString3)
  • 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
// 相当于起到了过滤的作用
const jsonString2 = JSON.stringify(obj, ["name", "hobby"])
console.log(jsonString2)
  1. stringfy第三个参数space

指定缩进用的空白字符串，用于美化输出（pretty-print）；

  • 如果该参数没有提供（或者为 null），将没有空格。
  • 如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；
  • 如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；
const jsonString4 = JSON.stringify(obj, null, "---")
console.log(jsonString4)

  1. 如果obj对象中有toJSON方法，则转化JSON字符串时会转化成toJSON方法内容的字符串
const obj = {
  name: 'eureka',
  age: 19,
  hobby:['滑板'],
  toJSON: function() {
    return "123456"
  }
}

解析JSON字符串方法 JSON.parse()

解析 JSON 字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性，在返回之前进行某些修改。

  1. 像上面代码一样直接转化
  2. parse第二个参数：reviver
const info = JSON.parse(JSONString, (key, value) => {
  if (key === "age") {
    return value - 1
  }
  return value
})
console.log(info)
avatar
文章
阅读
粉丝