JavaScript：如何通过值传递对象？

在 JavaScript 中，我们可以通过引用传递对象，这意味着当我们将一个对象作为参数传递给一个函数时，实际上传递的是该对象的引用，而不是它的副本。这允许函数修改传递的对象并且对原始对象产生影响。但有时候我们希望能够通过值传递对象，即使这意味着传递的是对象的副本，也不会影响到原始对象。本文将介绍如何通过值传递对象，并提供一些示例代码以帮助您更好地理解。

利用对象的浅拷贝

对象的浅拷贝是一种创建对象副本的方式。在 JavaScript 中，我们可以使用 Object.assign() 方法或展开运算符（spread operator）来进行浅拷贝。如下所示：

const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign({}, originalObj);
// 或者使用展开运算符
// const copiedObj = { ...originalObj };

这里创建了一个原始对象 originalObj 和一个浅拷贝的副本 copiedObj。现在，我们可以将 copiedObj 传递给函数而不会影响 originalObj。例如：

function modifyObj(obj) {
  obj.a = 100;
}

modifyObj(copiedObj);
console.log(originalObj); // { a: 1, b: 2 }
console.log(copiedObj); // { a: 100, b: 2 }

这里，我们定义了一个 modifyObj 函数，它将传递对象的属性 a 修改为 100。当我们使用浅拷贝的副本 copiedObj 调用该函数时，它只会修改 copiedObj 的属性，而不会影响到原始对象 originalObj。

需要注意的是，这种方法只能解决一层对象的问题。如果对象包含了嵌套的对象或数组等数据结构，则需要更复杂的算法来创建深拷贝的副本。

利用 JSON 序列化与反序列化

另一种创建对象副本的方式是利用 JSON 序列化与反序列化。在 JavaScript 中，我们可以使用 JSON.stringify() 方法将对象序列化为字符串，并使用 JSON.parse() 方法将其反序列化为新的对象。如下所示：

const originalObj = { a: 1, b: [2, 3] };
const copiedObj = JSON.parse(JSON.stringify(originalObj));

这里创建了一个原始对象 originalObj 和一个通过 JSON 序列化和反序列化得到的副本 copiedObj。现在，我们可以将 copiedObj 传递给函数而不会影响 originalObj。例如：

function modifyObj(obj) {
  obj.a = 100;
}

modifyObj(copiedObj);
console.log(originalObj); // { a: 1, b: [2, 3] }
console.log(copiedObj); // { a: 100, b: [2, 3] }

这里，我们使用了与前面相同的 modifyObj 函数，并使用 JSON 序列化和反序列化创建了一个深拷贝的副本 copiedObj。通过传递 copiedObj 调用该函数时，它只会修改 copiedObj 的属性，而不会影响到原始对象 originalObj。

需要注意的是，利用 JSON 序列化和反序列化创建对象副本的性能可能不如浅拷贝，在处理大型对象或嵌套对象时可能会导致性能问题。

结论

在 JavaScript 中，可以通过值传递对象来避免函数对原始对象直接进行修改

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12733