开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

一 . 什么是JSON

JSON是一种可以在服务器和客户端之间传输的数据格式，可以在各个编程中使用。可以在网络传输、项目的配置文件，非关系型数据库（NoSQL）中看到JSON的使用。

二. 基本语法

• 1. 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
• 2. 对象值：

{
  "name": "Amy",
  "age": 18,
  "friend": {
    "name": "kobe"
  },
  "hobbies": ["篮球", "足球"]
}

• 3. 数组值：

[
  "abc",
  123,
  {
    "name": "kobe"
  }
]

三. JSON序列化方法

JSON.stringify：将JavaScript类型转成对应的JSON字符串

JSON.parse:解析JSON字符串，转回对应的JavaScript类型

const obj = {
  name: "hhh",
  age: 18,
  friends: {
    name: "kobe",
  },
  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("jsonString:" + jsonString);
console.log("info:" + info);//注意对象不能用加号拼接，如果是数组则不展示外面[]
console.log("info:", info);

四. JSON.stringify(value[, replacer [, space]])

1. [replacer 参数]：可选

replacer 参数可以是一个函数或者一个数组。作为函数，它有两个参数，键（key）和值（value），它们都会被序列化。

函数举例：

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {
  foundation: "Mozilla",
  model: "box",
  week: 45,
  transport: "car",
  month: 7,
};
var jsonString = JSON.stringify(foo, replacer);//{"week":45,"month":7}

注意：不能用 replacer 方法，从数组中移除值（values），如若返回 undefined 或者一个函数，将会被 null 取代。

数组举例： 数组的值代表将被序列化成 JSON 字符串的属性名

JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', 只保留“week”和“month”属性值。

2. [space 参数]：可选

space 参数用来控制结果字符串里面的间距（其实就是为了美观一点）

举例：

JSON.stringify({ a: 2 }, null, " ");   // '{\n "a": 2\n}'

toJSON 方法：如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果

举例：

var obj = {
  foo: 'foo',
  age: 18,
  friends: {
    name: "kobe",
  },
  toJSON: function () {
    return 'bar';
  }
};
const aa=JSON.stringify(obj);      // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

五. JSON.parse(text[, reviver])

1. [使用 reviver 函数] ：可选

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

举例：

const JSONString = '{"name":"hhh","age":19,"friends":{"name":"kobe"},"hobbies":["篮球","足球"]}'

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

六. 深拷贝

const obj = {
  name: "hhh",
  age: 18,
  friends: {
    name: "kobe"
  },
  hobbies: ["篮球", "足球"],
  foo: function() {
    console.log("foo function")
  }
}
const jsonString = JSON.stringify(obj);
console.log(jsonString);
const info = JSON.parse(jsonString);
obj.friends.name = "curry";
console.log(obj);
console.log(info);