JSON详解与JSON深拷贝

JSON详解与JSON深拷贝

1、JSON简介

• JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。
• JSON的全称是JavaScript Object Notation（JavaScript对象符号），主要应用于JavaScript中，但是目前已经独立于编程语言，在各个编程语言中都可以使用。
• 目前JSON应用场景：
  • 网络数据传入的JSON数据
  • 项目的某些配置文件
  • 非关系型数据库将JSON作为存储格式

2、JSON基本语法

• JSON支持三种数据类型
  • 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；但是不支持undefined，在JSON中没有undefined
  • 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
  • 数组值：数组的值可以是简单值、对象值、数组值；

//常用方式：对象类型
{
  "name": "byj",
  "age": 18,
  "friend": {
    "name": "abc"
  },
  "hobbies": ["篮球", "足球"]
}
//数组类型
[
  "abc",
  123,
  {
    "name": "abc"
  }
]

3、JSON序列化

• 某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理：

  • 比如我们希望将一个对象保存到localStorage中；
  • 但是如果我们直接存放一个对象，这个对象会被转化成[object Object] 格式的字符串，并不是我们想要的结果；

• 在ES5中引用了JSON全局对象，该对象有两个常用的方法：

  • stringify方法：将JavaScript类型转成对应的JSON字符串；有string开头，将对象转化为字符串
  • parse方法：解析JSON字符串，转回对应的JavaScript类型；

//JSON序列化,通过stringify和parse可以实现互转
//因为JSON是全局对象，类型于Ovject，可以直接使用
const obj = {
  name: 'byj',
  age: 18,
  friends: {
    name: 'abc',
  },
  hobbies: ['篮球', '足球'],
};

// 将obj转成JSON格式的字符串
const objString = JSON.stringify(obj);

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

const jsonString = localStorage.getItem('obj');

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

4、Stringify补充

stringify第二个参数replacer

//传入数组: 设定哪些是需要转换
const jsonString2 = JSON.stringify(obj, ["name", "friends"])
console.log(jsonString2)
//传入回调函数:
const jsonString3 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return value + 1
  }
  return value
})
console.log(jsonString3)

stringify第三参数 space

//space参数会将转换后的字符串自动换行并且在换行中添加指定内容
const jsonString4 = JSON.stringify(obj, null, "---")
console.log(jsonString4)

重写toJSON方法

如果需要转化的obj对象中有toJSON函数，则会覆盖JSON自带的stringify方法

//调用stringify执行toJSON，返回内容都为123456
toJSON: function() {
    return "123456"
 }

5、Parse补充

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

//在将字符串转化为JSON格式对象的过程中，做一层拦截。
const JSONString = '{"name":"byj","age":19,"friends":{"name":"kobe"},"hobbies":["篮球","足球"]}'

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

6、JSON序列化实现深拷贝

通过JSON转化后，新对象和之前的对象并不是同一个对象，即两个对象指向的内存地址不同。

const obj = {
  name: 'byj',
  age: 18,
  friends: {
    name: 'abc',
  },
  hobbies: ['篮球', '足球'],
  // json不会转化函数，如果碰到函数，会自动移除
  foo: function () {
    console.log('foo function');
  },
};
// 通过stringify将obj转化为JSON字符串，通过parse转回JS对象，实现深拷贝
const jsonString = JSON.stringify(obj);
const info = JSON.parse(jsonString);
// 修改原本对象的friends.name的值
obj.friends.name = 'cba';
// 打印旧对象的值
console.log(obj.friends.name);
// 打印新对象的值
console.log(info.friends.name);

• 注意点
  • 创建出来的info中是没有foo函数的，这是因为stringify并不会对函数进行处理
  • undefined、Symbol在序列化的过程中也会被忽略
  • 具体深拷贝推荐使用对应的工具函数