如何使用 JSON.parse() 和 JSON.stringify()

介绍

JSON对象,在所有现代浏览器可用,有两个有用的方法来处理JSON格式的内容:parsestringifyJSON.parse()接受一个 JSON 字符串并将其转换为 JavaScript 对象。JSON.stringify()接受一个 JavaScript 对象并将其转换为 JSON 字符串。

下面是一个例子:

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

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

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

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

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["shark","fish","dolphin"]"

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

JSON.parse()

JSON.parse()可以将函数作为第二个参数,可以在返回对象值之前对其进行转换。这里对象的值在parse方法的返回对象中被转换为大写

const user = {
  name: 'Sammy',
  email: '[email protected]',
  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函数,第二个是 aStringNumber值,用作space返回字符串中的 a。

replacer 函数可用于过滤掉值,因为任何返回的值undefined都将从返回的字符串中删除:

const user = {
  id: 229,
  name: 'Sammy',
  email: '[email protected]'
};

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

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

以及一个space传入参数的示例

const user = {
  name: 'Sammy',
  email: '[email protected]',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "Sammy",
// ..."email": "[email protected]",
// ..."plan": "Pro"
// }"

结论

在本教程中,您使用了探索如何使用JSON.parse()JSON.stringify()方法。如果您想了解有关在 Javascript 中使用 JSON 的更多信息,请查看我们的如何在 JavaScript 中使用 JSON教程。

有关使用 JavaScript 编码的更多信息,请查看我们的How To Code in JavaScript系列,或查看我们的 JavaScript 主题页面以获取练习和编程项目。

觉得文章有用?

点个广告表达一下你的爱意吧 !😁