JavaScript 中，变量的值可以分为两种类型：原始值和引用值。这两种值在传递方式上存在显著差异，这直接影响了我们在编写代码时的预期结果。本文将深入探讨原始值和引用值的区别，并通过实际案例展示它们在编程中的应用。
原始值传递
原始值是指不可变的数据类型，如数字、字符串、布尔值等。当我们将原始值赋给一个变量时，该变量的值会存储在一个特定的内存地址上。如果我们将这个变量赋值给另一个变量，实际上是在创建一个新的变量，并复制原始值到这个新的变量中。
let a = 5;
let b = a;
a = 10;
console.log(a); // 输出：10
console.log(b); // 输出：5
在上面的例子中，变量 a 和 b 都存储了数字 5。当我们将 a 赋值给 b 后，变量 b 获得了 a 的原始值。之后修改 a 的值不会影响 b，因为它们存储在两个不同的内存地址上。
引用值传递
引用值是指对象、数组等可变数据类型。当我们将一个引用值赋给一个变量时，该变量实际上存储的是对象在内存中的引用地址。如果我们将这个变量赋值给另一个变量，实际上是在创建一个新的变量，并复制引用地址到这个新的变量中。
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr1[0] = 4;
console.log(arr1); // 输出：[4, 2, 3]
console.log(arr2); // 输出：[4, 2, 3]
在上面的例子中，变量 arr1 和 arr2 都指向了同一个数组对象。当我们修改 arr1 中的值时，由于它们共享同一个引用地址，arr2 中的值也会发生变化。
实际应用案例
案例一：数组排序
let arr = [3, 1, 2];
arr.sort();
console.log(arr); // 输出：[1, 2, 3]
在上述代码中，由于数组是引用值，使用 sort() 方法排序不会影响原数组。
案例二：对象复制
let obj1 = {a: 1, b: 2};
let obj2 = {...obj1};
obj1.a = 3;
console.log(obj1); // 输出：{a: 3, b: 2}
console.log(obj2); // 输出：{a: 1, b: 2}
使用扩展运算符 ... 可以复制一个对象的引用值。这样，当我们修改 obj1 时，obj2 不会受到影响。
案例三：深拷贝和浅拷贝
在处理复杂数据结构时，我们经常需要深拷贝和浅拷贝来避免修改原始数据。以下是一个示例：
let obj1 = {a: 1, b: [2, 3]};
let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝
obj1.b[0] = 4;
console.log(obj1); // 输出：{a: 1, b: [4, 3]}
console.log(obj2); // 输出：{a: 1, b: [2, 3]}
在这个例子中，我们使用 JSON.parse(JSON.stringify(obj1)) 来实现深拷贝，这样修改 obj1 的值不会影响 obj2。
总结
掌握原始值和引用值的传递方式对于编写高效、可靠的 JavaScript 代码至关重要。通过本文的讲解，相信你已经对这两种值的传递差异有了更深入的了解。在实际编程过程中，我们要根据具体情况选择合适的复制方式，以避免不必要的错误和问题。