JSON.parse()与JSON.stringify()的区别

卡拉先生
发布于 2020年08月21日 | 上次编辑:2020年08月24日

卡拉搜索:一行代码即可快速部署「站内搜索」功能:点这里查看详情

JSON.parse()与JSON.stringify()的区别
JSON.parse()与JSON.stringify()的区别

JSON.parse() and JSON.stringify()

JSON 对象在所有的现代浏览器中可用,两种有用的方法用于处理 JSON 格式的内容:parsestringify

JSON.parse() 获取 JSON 字符串并将其转换为 JavaScript 对象。

JSON.stringify() 获取 JavaScript 对象并将其转换为 JSON 字符串。

看一看下面的例子:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Skip",age:2,favoriteFood:"Steak"}

虽然这些方法通常用于对象,但它们也可以用于数组:

const myArr = ['bacon', 'letuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["bacon","letuce","tomatoes"]"

console.log(JSON.parse(myArrStr));
// ["bacon","letuce","tomatoes"]

JSON.parse()

JSON.parse() 可以将一个函数作为第二个参数,在返回对象值之前对其进行转换。

此处对象的值在 parse 方法的返回中全部大写:

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

const userStr = JSON.stringify(user);

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

尾随逗号在 JSON 中无效,因此如果传递给它的字符串有尾随逗号,则 JSON.parse() 将触发错误。

JSON.stringify()

JSON.stringify() 可以接受两个附加参数,第一个是 replacer,第二个是 StringNumber,用作返回字符串中的 space

replacer函数用于筛选出值,因为返回为 undefined 的值在返回的字符串之外:

const user = {
  id: 229,
  name: 'John',
  email: 'john@awesome.com'
};

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

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"John"}"

一个带空格参数的示例:

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

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

如果想了解 JavaScript 的详细信息,欢迎访问卡拉搜索技术社区

扩展阅读:

JavaScript 系列教程

友情链接更新日志© 2020, 卡拉搜索, Built with ❤️ in San Francisco + Beijing

京ICP备15049164号-3