缩进 JSON 和 JS - Javascript

JSON是用于数据交换的轻量级数据格式。在JS中处理JSON数据时，格式化和缩进是一件非常重要的事情。在本文中，我们将学习如何格式化和缩进JSON和JS，以及为什么格式化和缩进是很重要的。

为什么缩进很重要？

缩进在JSON中是可选的，但是建议格式化JSON数据以使其易于阅读。可以采用空格或制表符来缩进JSON数据。请看以下示例：

{
    "name": "John Smith",
    "email": "john@example.com",
    "phone": [
        {
            "type": "home",
            "number": "555-555-1234"
        },
        {
            "type": "work",
            "number": "555-555-5678"
        }
    ],
    "age": 35
}

注意该JSON数据中的缩进是怎样的，使得数据中的结构清晰。这使该数据在读取和编辑时更容易被人理解。

编写缩进的JS

在JS中，我们可以使用一些方法对JSON数据进行格式化和缩进。以下是必须的方法：

JSON.stringify()

JSON.stringify()方法将JSON对象转换为字符串的同时，还允许我们传递参数来格式化输出。

以下是一个标准的JSON字符串：

const data = {
    name: 'John Smith',
    email: 'john@example.com',
    phone: [
        { type: 'home', number: '555-555-1234' },
        { type: 'work', number: '555-555-5678' }
    ],
    age: 35
};

const jsonString = JSON.stringify(data);
console.log(jsonString);

您应该能够看到以下文本输出：

{"name":"John Smith","email":"john@example.com","phone":[{"type":"home","number":"555-555-1234"},{"type":"work","number":"555-555-5678"}],"age":35}

如果需要格式化JSON输出，您可以使用以下代码：

const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);

现在输出应该如下所示：

{
  "name": "John Smith",
  "email": "john@example.com",
  "phone": [
    {
      "type": "home",
      "number": "555-555-1234"
    },
    {
      "type": "work",
      "number": "555-555-5678"
    }
  ],
  "age": 35
}

JSON.stringify()方法的第二个参数是替换函数也是可选，它可以逐个替换对象的每个属性和值的各个部分。请注意，替换策略通常是使用map()函数来替换需要修改的属性的每个部分，但是我们也可以使用addField()或delete()方法来动态对属性或值进行修改或删除。

我们可以将其简化为以下代码：

const jsonString = JSON.stringify(data, (key, value) => {
    if (value === null) {
        return undefined; // 删除值
    } else if (typeof value === 'object' && value.name) {
        return { ...value, name: value.name.toUpperCase() }; // 修改对象的属性
    }
    return value; // 保留原有值
}, 2);
console.log(jsonString);

JSON.parse()

JSON.parse()方法将字符串转换为JSON对象。在读取该数据之后，可以使用JSON.parse()将字符串转换为JSON对象。

以下是读取JSON对象并缩进文本输出的示例：

const jsonString = '{"name":"John Smith","email":"john@example.com","phone":[{"type":"home","number":"555-555-1234"},{"type":"work","number":"555-555-5678"}],"age":35}';
const data = JSON.parse(jsonString);
console.log(JSON.stringify(data, null, 2));

现在输出应该如下所示：

{
  "name": "John Smith",
  "email": "john@example.com",
  "phone": [
    {
      "type": "home",
      "number": "555-555-1234"
    },
    {
      "type": "work",
      "number": "555-555-5678"
    }
  ],
  "age": 35
}

总结

在本文中，我们学习了如何格式化和缩进JSON数据和JS代码。我们了解了为什么要格式化数据，以及如何使用JSON.stringify()和JSON.parse()方法来实现。我们还了解了如何使用替换函数来动态地修改JSON数据属性和属性值。务必记住，通过格式化和缩进JSON和JS代码，您可以更清楚地了解您的数据和代码，这是非常重要的。