JSON中key动态设置及JSON.parse和JSON.stringify()的区别

JSON中key动态设置指的是在JavaScript中向JSON对象动态添加属性名（key），这样的JSON对象在另一个需要使用这些属性的函数或者方法中外部作用域仍然可以进行访问。但在正常情况下，我们无法使用字符串拼接的方式来动态设置JSON中的key，这时候就需要借助ES6中的计算属性名（Computed Property Names）来实现。

计算属性名的语法是在对象属性名的方括号中使用一个表达式来为对象动态添加属性名。例如：

let dynamicKey = 'key';
let obj = {
  [dynamicKey]: 'value'
};

console.log(obj); // { key: "value" }

以上代码中，dynamicKey变量是一个动态的属性名，使用方括号包裹起来，并且动态设置了键名为dynamicKey变量的值为字符串"value"的属性。执行console.log(obj)可以看到obj动态添加了一个属性，它的key是动态的，为dynamicKey的变量值，value是固定的字符串"value"。

JSON.parse和JSON.stringify()的作用是可以将JavaScript对象转化为JSON字符串字符串和将JSON字符串转化为JavaScript对象。JSON.parse方法将JSON字符串解析为JavaScript对象，而JSON.stringify方法则将JavaScript对象转换成JSON字符串。

在使用这两个方法时需要注意以下几点：

1. JSON.parse()方法会将JSON字符串转换成JavaScript对象，但是字符串必须是严格规范的JSON格式，否则会抛出错误。
2. JSON.stringify()方法将JavaScript对象转换成JSON格式的字符串。该方法可以接受一个可选参数replacer，用于转换特定的属性；还有一个可选参数space，用于设置输出格式的缩进大小。
3. JSON.parse()方法解析Json字符串得到的是JavaScript对象，而不是真正的JSON对象。
4. JSON.stringify()方法只会返回包含数据的JSON字符串，而不包含JavaScript中的行为函数。

以下是示例代码：

完成一个artList（艺术家列表）JSON对象，其结构如下：

{
   "data": {
      "artists": [
         {
            "id": "ar1",
            "name": "Vincent van Gogh",
            "date_of_birth": "1853-03-30"
         },
         {
            "id": "ar2",
            "name": "Pablo Picasso",
            "date_of_birth": "1881-10-25"
         },
         {
            "id": "ar3",
            "name": "Claude Monet",
            "date_of_birth": "1840-11-14"
         }
      ]
   }
}

使用计算属性名动态设置一个新的艺术家信息，然后将新添加的JSON对象转化为JSON字符串。

let artistName = 'Salvador Dali';
let dateOfBirth = '1904-05-11';

let artList = {
  "data": {
    "artists": [
      {
        "id": "ar1",
        "name": "Vincent van Gogh",
        "date_of_birth": "1853-03-30"
      },
      {
        "id": "ar2",
        "name": "Pablo Picasso",
        "date_of_birth": "1881-10-25"
      },
      {
        "id": "ar3",
        "name": "Claude Monet",
        "date_of_birth": "1840-11-14"
      },
      {[`ar4`]:{
            "id": "ar4",
            "name": artistName,
            "date_of_birth": dateOfBirth
      }}
    ]
  }
};

let artListString = JSON.stringify(artList);
console.log(artListString);

以上代码中，使用计算属性名方式动态添加了一个名为ar4的新艺术家，然后将artList对象转化为字符串输出，会得到以下输出结果：

{
  "data":{
    "artists":[
      {
        "id":"ar1",
        "name":"Vincent van Gogh",
        "date_of_birth":"1853-03-30"
      },
      {
        "id":"ar2",
        "name":"Pablo Picasso",
        "date_of_birth":"1881-10-25"
      },
      {
        "id":"ar3",
        "name":"Claude Monet",
        "date_of_birth":"1840-11-14"
      },
      {
        "ar4":{
          "id":"ar4",
          "name":"Salvador Dali",
          "date_of_birth":"1904-05-11"
        }
      }
    ]
  }
}

以下是第二个示例代码：

将一个JSON字符串使用JSON.parse方法转换为JavaScript对象，并使用计算属性名将一个数据重新添加进组成新的JSON对象。

let jsonString = `{
                    "name": "Jason Bourne",
                    "birth": "1970-07-21",
                    "nationality": "American",
                    "profession": "Spy",
                    "alias": "Delta One"
                  }`;

let agentInfo = JSON.parse(jsonString);

let moreInfo = {
  "location": "Hong Kong",
  "active": true
};

agentInfo = {
  ...agentInfo,
  [Object.keys(moreInfo)[0]]: moreInfo.location,
  [Object.keys(moreInfo)[1]]: moreInfo.active
};

let outputString = JSON.stringify(agentInfo);

console.log(outputString);

以上代码中，首先使用JSON.parse方法将jsonString解析为一个JavaScript对象（agentInfo），然后使用计算属性名动态添加了包含新信息的属性（location和active），并将其拼接到agentInfo对象中生成新的JSON对象。最后使用JSON.stringify方法将新的JSON对象转化为字符串输出，会得到以下输出结果：

{
  "name": "Jason Bourne",
  "birth": "1970-07-21",
  "nationality": "American",
  "profession": "Spy",
  "alias": "Delta One",
  "location": "Hong Kong",
  "active": true
}