深入JavaScript Day29 - JSON.strong

2022-02-14 本文已影响0人望穿秋水小作坊

一、JSON.strongify()、JSON.parse()

1、JSON.strongify() 的基本使用

// 示例代码
const obj = {
  name: "why",
  age: 18,
  fridends: {
    name: "Kobe",
  },
  hobbies: ["篮球", "足球"],
};
// 将obj转成JSON格式的字符串
const objString = JSON.stringify(obj);
console.log(objString);
console.log(obj);

// 输出日志
{"name":"why","age":18,"fridends":{"name":"Kobe"},"hobbies":["篮球","足球"]}
{
  name: 'why',
  age: 18,
  fridends: { name: 'Kobe' },
  hobbies: [ '篮球', '足球' ]
}

2、JSON.strongify() 函数的第二个参数可以是什么（两种数据类型）？

【传入数组】表示哪些key需要序列化
【传入函数】可以对序列化过程进行拦截，拿到key、value进行自定义处理

const obj = {
  name: "why",
  age: 18,
  friends: {
    friendName: "Kobe",
  },
  hobbies: ["篮球", "足球"],
};

// 【第二个参数传递数组】仅序列化 name、friends
const objString1 = JSON.stringify(obj, ["name", "friends"]);
console.log(objString1); // {"name":"why","friends":{"name":"Kobe"}}

// 【第二个参数传递函数】对序列化过程进行拦截
const objString2 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    value = value + 1;
  }
  console.log(key);
  return value;
});
console.log(objString2); // {"name":"why","age":19,"friends":{"name":"Kobe"},"hobbies":["篮球","足球"]}

3、JSON.strongify() 函数的第三个参数有什么作用？

【作用】对数据的存储进行格式化

const obj = {
  name: "why",
  age: 18,
  friends: {
    friendName: "Kobe",
  },
  hobbies: ["篮球", "足球"],
};

// 【第三个参数的作用】添加空格前缀，友好的格式，便于观察数据
const objString1 = JSON.stringify(obj, null, 2);
console.log(objString1); 

// 输出结果
{
  "name": "why",
  "age": 18,
  "friends": {
    "friendName": "Kobe"
  },
  "hobbies": [
    "篮球",
    "足球"
  ]
}

4、借助 JSON.strongify() 进行序列化时，被序列化的对象有 toJSON 方法，会有什么效果？

const obj = {
  name: "why",
  age: 18,
  friends: {
    friendName: "Kobe",
  },
  hobbies: ["篮球", "足球"],
  toJSON: function () {
    // 有实现toJSON方法
    return "1234";
  },
};
const objString1 = JSON.stringify(obj);
console.log(objString1); // "1234"

5、如何对反序列化的数据进行拦截处理？

【借助 JSON.parse() 函数的回调】

const obj = {
  name: "why",
  age: 18,
  friends: {
    friendName: "Kobe",
  },
  hobbies: ["篮球", "足球"],
};
const objString = JSON.stringify(obj);
console.log(objString);

const obj2 = JSON.parse(objString, (key, value) => {
  if (key === "age") {
    value++;
  }
  return value;
});
console.log(obj2);

// 输出日志
{"name":"why","age":18,"friends":{"friendName":"Kobe"},"hobbies":["篮球","足球"]}
{
  name: 'why',
  age: 19,
  friends: { friendName: 'Kobe' },
  hobbies: [ '篮球', '足球' ]
}

6、JavaScript实现浅拷贝的两种方式？

const obj = {
  name: "why",
  age: 18,
  friends: {
    friendName: "Kobe",
  },
  hobbies: ["篮球", "足球"],
};

const info1 = obj; // 引用赋值
const info2 = { ...obj }; // 浅拷贝一
const info3 = {};
Object.assign(info3, obj);

info1.name = "why info1"; // 会同时影响obj的值
console.log(obj);

info2.name = "why info2"; // 浅拷贝第一层，不会受影响
info2.hobbies.push("保龄球 info2"); // 浅拷贝第二层，会受影响
console.log(obj);

info3.name = "why info3"; // 浅拷贝第一层，不会受影响
info3.hobbies.push("保龄球 info3"); // 浅拷贝第二层，会受影响
console.log(obj);
console.log(info3);

7、借助序列化，也能实现JavaScript对象的深拷贝，但是存在什么缺点？

【缺点】无法对函数进行拷贝操作，函数会被直接忽略。

const obj = {
  name: "why",
  age: 18,
  friends: {
    friendName: "Kobe",
  },
  hobbies: ["篮球", "足球"],
  run: function () {
    console.log("run");
  },
};

const objString = JSON.stringify(obj);
console.log(objString);
const info = JSON.parse(objString);
info.name = "why info";
info.hobbies.push("保龄球");
console.log(obj);
console.log(info);