正文

揭秘JS数值传递的真相：为什么你传的值有时变了，有时没变？掌握这3招，轻松应对！

/0 浏览量
0925

在JavaScript中，数值传递是一个常见的现象，但有时我们会发现，当我们传递一个数值给一个函数时，这个数值有时会发生变化，有时却不会。这背后隐藏着JavaScript的深层次机制。本文将揭秘JS数值传递的真相，并教你三招轻松应对这种情况。

1. 值传递与引用传递

首先，我们需要了解JavaScript中的值传递和引用传递。

在JavaScript中，基本数据类型（如数字、字符串、布尔值等）是按值传递的。这意味着当你将一个基本数据类型的变量赋值给另一个变量时，实际上是将该变量的值复制一份给新变量。因此，修改新变量的值不会影响原变量。

let a = 10;
let b = a;
b = 20;
console.log(a); // 输出：10

而对象（包括数组和函数）是按引用传递的。这意味着当你将一个对象赋值给另一个变量时，实际上是将该对象的引用（即内存地址）复制一份给新变量。因此，修改新变量的值会影响到原对象。

let obj = { name: 'Alice' };
let newObj = obj;
newObj.name = 'Bob';
console.log(obj.name); // 输出：Bob

2. 数值传递的真相

了解了值传递和引用传递后，我们再来看数值传递的真相。

在JavaScript中，数值传递实际上是按值传递的。这意味着当你将一个数值传递给一个函数时，实际上是将该数值的值复制一份给函数内部的参数。

function addOne(num) {
  return num + 1;
}

let a = 10;
let b = addOne(a);
console.log(a); // 输出：10
console.log(b); // 输出：11

在这个例子中，虽然函数addOne修改了参数num的值，但原变量a的值并没有改变。这是因为num是a的一个副本，而不是a本身。

3. 三招轻松应对数值传递

了解了数值传递的真相后，我们可以采取以下三招来轻松应对这种情况：

  1. 使用解构赋值

当你需要修改一个对象或数组时，可以使用解构赋值来获取对象的副本，并对其进行修改。

   let obj = { name: 'Alice' };
   let { name } = obj;
   name = 'Bob';
   console.log(obj.name); // 输出：Alice
  1. 使用扩展运算符

当你需要将一个数组或对象传递给函数时，可以使用扩展运算符来获取其副本。

   let arr = [1, 2, 3];
   let newArr = [...arr];
   newArr.push(4);
   console.log(arr); // 输出：[1, 2, 3]
  1. 使用Object.assign或Spread操作符

当你需要合并两个对象时，可以使用Object.assign或Spread操作符来获取第一个对象的副本，并添加第二个对象的属性。

   let obj1 = { name: 'Alice' };
   let obj2 = { age: 25 };
   let newObj = { ...obj1, ...obj2 };
   console.log(newObj); // 输出：{ name: 'Alice', age: 25 }

通过以上三招，我们可以轻松应对JavaScript中的数值传递问题，避免不必要的困扰。希望本文能帮助你更好地理解JavaScript的数值传递机制。

-- 展开阅读全文 --