javascript - 通过 JSON 移动数据的目的

Question

JSON.stringify(value) 会将 JavaScript 值转换为 JSON 字符串。 JSON.parse(value) 会将有效的 JSON 字符串转换为 JavaScript 值(对象、数组或其他 JSON 可用的原语)。

为什么要获取 JavaScript 值并通过 JSON 移动它？意思是取一个值，然后将其字符串化，然后再将其解析回来。据我所知，它没有任何用处，只会浪费机器资源。

我问这是因为我遇到过这个函数:

function ser(value) {
    return value == null ? null : JSON.parse(JSON.stringify(value))
}

在 crow-tech.js 中找到在 sandbox Marijn Heverbeke 撰写的 Eloquent JavaScript 一书的第 11 章，我想知道他为什么要那样做!

Answer 1

这是一种廉价的方式to deep clone an object in JavaScript .请考虑以下事项:

function a() {
  const obj = {name: "fred"};
  
  b(obj);
  
  console.log(obj);
}


function b(obj) {
  obj.age = 42;
}

a();

函数 a 将一个对象传递给 b 以及它何时被修改。有时这就是您想要的，有时您希望保留原始对象不被修改，因此您必须克隆它。 JavaScript 没有任何工具可以做到这一点，但 JSON.stringify -> JSON.parse 将为您创建一个新对象，以便将其用于克隆:

function a() {
  const obj = {name: "fred"};
  
  b(JSON.parse(JSON.stringify(obj)));
  
  console.log(obj);
}

function b(obj) {
  obj.age = 42;
}

a();

这很好地说明了什么 可能出错，但在现实世界中，事情并不总是那么简单。上述操作也可以通过对象的浅克隆来完成

function a(){
  const obj = {name: "fred"};
  
  b(Object.assign({}, obj)); //shallow clone
  
  console.log(obj);
}

function b(obj) {
  obj.age = 42;
}

a();

但是，在以下情况下会失败:

const obj = {
  name: "fred",
  child: { name: "pebbles" }
};

const objClone = Object.assign({}, obj)

objClone.age = 42;
objClone.child.age = 2;

console.log('the "cloned" object was modified', objClone);

console.log("so was the original nested object", obj);

这是因为嵌套对象 child 未被克隆，所以我们修改了父级的顶级克隆，然后修改了原始 child 。这是深度克隆有用的时候:

const obj = {
  name: "fred",
  child: { name: "pebbles" }
};

const objClone = JSON.parse(JSON.stringify(obj));

objClone.age = 42;
objClone.child.age = 2;

console.log('the cloned object was modified', objClone);

console.log("none of the original was", obj);

这并不能解决所有问题。 JSON.stringify 和 JSON.parse 只适用于任何地方的非常简单的对象，它不会复制原型(prototype)或函数。一些例子:

const obj = { name: "Alice" };
const proto = { age: 42 };

Object.setPrototypeOf(obj, proto);

console.log("assembled object", obj);

const clone = JSON.parse(JSON.stringify(obj));

console.log("cloned object", clone);

const objWithFunction = { name: "Bob", getAge: function() { return 42; } };

console.log("object with function assigned to property", objWithFunction);
console.log("getAge from original", objWithFunction.getAge());

const cloneWithFunction = JSON.parse(JSON.stringify(objWithFunction));

console.log("cloned object with function assigned to property", cloneWithFunction);
console.log("getAge from clone", cloneWithFunction.getAge());

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p = new Person("Carol", 42);

console.log("what is p:", p);
console.log("is p a Person?", p instanceof Person);

const clone = JSON.parse(JSON.stringify(p));
console.log("what is clone:", clone);
console.log("is clone a Person?", clone instanceof Person);
console.log("the clone is actually a plain object:", Object.getPrototypeOf(clone) == Object.prototype);