JSON详解

1,324 阅读2分钟

一、JSON基本语法

1.png

二、JSON序列化

1.png

三、JSON序列化方法

1.png

四、Stringify的参数replace(序列化方法补充)

  1. JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串:
  • 如果指定了一个 replacer 函数,则可以选择性地替换值;
  • 如果指定的 replacer 是数组,则可选择性地仅包含数组指定的属性
  1. JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串:
  • 如果指定了一个 replacer 函数,则可以选择性地替换值;
  • 如果指定的 replacer 是数组,则可选择性地仅包含数组指定的属性;
  1. 当然,它还可以跟上第三个参数space:转换成json格式前面空间的样式
  2. 如果对象本身包含toJSON方法
  name: "why",
  age: 18,
  friends: {
    name: "kobe"
  },
  hobbies: ["篮球", "足球"],
  // toJSON: function() {
  //   return "123456"
  // }
}

// 需求: 将上面的对象转成JSON字符串

// 1.直接转化
const jsonString1 = JSON.stringify(obj)
console.log(jsonString1)

// 2.stringify第二个参数replacer
// 2.1. 传入数组: 设定哪些是需要转换
const jsonString2 = JSON.stringify(obj, ["name", "friends"])
console.log(jsonString2)

// 2.2. 传入回调函数:
const jsonString3 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return value + 1
  }
  return value
})
console.log(jsonString3)

// 3.stringify第三参数 space
const jsonString4 = JSON.stringify(obj, null, "")
console.log(jsonString4)

// 4.如果obj对象中有toJSON方法,上面·stringify方法转化出来的都是toString返回的内容

五、parse方法

JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。

  • 提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)

const info = JSON.parse(JSONString, (key, value) => {
  if (key === "age") {
    return value - 1
  }
  return value
})
console.log(info)

六、使用JSON序列化深拷贝

使用JSON序列化深拷贝

我们生成的新对象和之前的对象并不是同一个对象:

  • 相当于是进行了一次深拷贝

注意:这种方法它对函数是无能为力的

创建出来的info中是没有foo函数的,这是因为stringify并不会对函数进行处理;

引用赋值与浅拷贝

  name: "why",
  age: 18,
  friends: {
    name: "kobe"
  },
  hobbies: ["篮球", "足球"],
  foo: function() {
    console.log("foo function")
  }
}

// 将obj对象的内容放到info变量中
// 1.引用赋值
const info = obj
obj.age = 100
console.log(info.age)

// 2.浅拷贝
const info2 = { ...obj }
obj.age = 1000
console.log(info2.age)

obj.friends.name = "james"
console.log(info2.friends.name)

// 3.stringify和parse来实现深拷贝
const jsonString = JSON.stringify(obj)
const info3 = JSON.parse(jsonString)

浅拷贝示意图 1.png