通过 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))
}

它在 Marijn Heverbeke 的 Eloquent JavaScript 一书第 11 章的 crow-tech.js 中的 crow-tech.js 中找到，我想知道他为什么要这样做！

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没有被克隆，所以我们修改了父级的顶级克隆，然后修改了原始子级。这是深度克隆有用的时候：

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 只适用于任何地方的非常简单的对象，它不会复制原型或函数。一些例子：

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);

Answer 2

JSON.parse(JSON.stringify(value))

这主要用于克隆对象。您不能直接将对象复制到另一个变量，因为对象是通过引用复制的。

let user = {name : "John"}

let newUser = user; // newUser and user refer to same object (ie same memory location.) . 

如果您修改user，那么newUser 也会被修改。这是因为对象是通过引用而不是按值复制的。

所以要进行对象复制，我们使用您指定的方法。

示例

let value = {"name": "John"}; // this is a object.

JSON.stringify(value) // were are changing the type object to string

字符串可以按值复制。

现在我们需要再次将字符串转换为对象，为此我们使用

let newValue = JSON.parse(JSON.stringify(value)); 

这会返回一个对象 - value 的克隆

现在 value 和 newValue 是两个不同的对象。