文章目录
理解 JavaScript 中的引用与值传递问题重现示例代码为什么会这样？值传递 vs 引用传递内存模型解释
如何创建真正的副本？1. 使用展开运算符（浅拷贝）2. 使用 JSON 方法（深拷贝，但有限制）3. 使用 Lodash 的深拷贝方法
实际应用中的注意事项总结
理解 JavaScript 中的引用与值传递
作为前端工程师，我经常会遇到一些看似奇怪的行为，尤其是在处理对象和数组时。最近我在项目中遇到了一个有趣的现象，让我对 JavaScript 中的引用和值传递有了更深刻的理解。
问题重现
我发现自己定义了一个临时变量 currentData，并在其中添加了一些新属性。奇怪的是，当我修改这个临时变量时，另一个看似独立的变量 tableData.value.list 也会随之改变。这让我困惑不已，因为按照我的理解，这两个变量应该是相互独立的。
示例代码
// 假设这是我们的初始数据
const tableData = {
value: {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
};
// 创建一个临时变量
let currentData = tableData.value.list[0];
// 添加新属性
currentData.newProperty = 'This is new';
// 检查结果
console.log(tableData.value.list[0].newProperty); // 输出: 'This is new'
为什么会这样？
这是因为 JavaScript 中对象（包括数组和函数）是通过引用传递的，而不是通过值传递的。
值传递 vs 引用传递
值传递：基本类型（如数字、字符串、布尔值）是按值传递的。这意味着当你将一个基本类型的值赋给另一个变量时，会创建该值的一个新副本。引用传递：对象（包括数组、函数等）是按引用传递的。当你将一个对象赋给另一个变量时，实际上是在传递对该对象的引用（即内存地址），而不是创建该对象的一个新副本。
内存模型解释
tableData.value.list[0] → [内存地址 0x123] → { id: 1, name: 'Item 1' }
currentData → [同一个内存地址 0x123]
当你修改 currentData 时，实际上是在修改内存地址 0x123 处的对象，因此 tableData.value.list[0] 也会反映出这些变化，因为它们指向同一个对象。
如何创建真正的副本？
如果你确实需要一个独立的副本，可以使用以下方法：
1. 使用展开运算符（浅拷贝）
let currentData = { ...tableData.value.list[0] };
2. 使用 JSON 方法（深拷贝，但有限制）
let currentData = JSON.parse(JSON.stringify(tableData.value.list[0]));
3. 使用 Lodash 的深拷贝方法
import _ from 'lodash';
let currentData = _.cloneDeep(tableData.value.list[0]);
实际应用中的注意事项
Vue.js 中的响应性：在 Vue 中直接修改对象属性会触发响应式更新，这通常是期望的行为，但要小心意外的副作用。性能考虑：深拷贝操作可能代价高昂，特别是对于大型对象。在性能敏感的场景中要谨慎使用。不可变数据模式：考虑使用不可变数据模式，特别是在 Redux 或 Vuex 等状态管理库中。
总结
理解 JavaScript 中的引用和值传递是成为一名优秀前端开发者的关键。记住：
基本类型是按值传递的对象是按引用传递的需要独立副本时，使用适当的拷贝方法
下次当你遇到类似"为什么修改一个变量会影响另一个变量"的问题时，希望这篇文章能帮助你快速定位问题所在！