关于 JSON.parse 和 JSON.stringify 你不知道的那些事

在所有的现代浏览器中都有 JSON 这个全局对象, 他有两个非常有用的方法 parse 和 stringify 用来解析和序列化 JSON 格式的文本。 JSON.parse() 方法给它一个 JSON string 它给你返回一个解析之后的 Javascript 对象。JSON.stringify() 方法给它一个 Javascript 对象他会返回序列化之后的 JSON 字符串。

const myInfo = {
  name: 'Jesse',
  age: 18,
  gender: 'Male'
};

const myInfoStr = JSON.stringify(myInfo);

console.log(myInfoStr);
// "{"name":"Jesse","age":18,"gender":"Male"}"

console.log(JSON.parse(myInfoStr));
// Object {name:"Jesse",age:18,gender:"Male"}

JSON 对象上的方法不仅仅可以用在 Javascript 对象上，它还能解析序列化数组。

const fruits = ['apple', 'peach', 'orange'];

const fruitsStr = JSON.stringify(fruits);

console.log(fruitsStr);
// "["apple","peach","orange"]"

console.log(JSON.parse(fruitsStr));
// ["apple","peach","orange"]

JSON.parse()

JSON.parse 方法第二个参数接受一个 reviver 函数, 用来修改解析生成的原始值。下面我们来写一个将字符串类型的值转换为大写的函数。

const user = {
  name: 'jesse',
  email: 'jesse@qq.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

// {name: "JESSE", email: "JESSE@QQ.COM", plan: "PRO"}

JSON.stringify()

JSON.stringify 也有两个附加的参数，第一个是 replacer 参数，如果该参数是函数，在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。第二个参数接受一个 String 或者 Number 类型的参数，如果参数是个数字，它代表有多少的空格，如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母）。

const user = {
  name: 'jesse',
  email: 'jesse@qq.com',
  plan: 'Pro'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'plan') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// {name: "jesse", email: "jesse@qq.com"}

下面是一个使用第二个附加参数的栗子

const user = {
  name: 'jesse',
  email: 'jesse@awesome.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "jesse",
// ..."email": "jesse@awesome.com",
// ..."plan": "jesse"
// }"