正文

孩子看图学JS：轻松掌握接收传值技巧，实例解析让你一学就会

/0 浏览量
0831

图解JavaScript传值基础

首先，让我们通过一幅简单的图来理解JavaScript中的传值概念。

JavaScript传值图解

在这个图中，我们可以看到：

  • 左边的变量代表原始值，例如数字、字符串或布尔值。
  • 右边的变量代表引用值，例如对象或数组。

在JavaScript中，基本数据类型（数字、字符串、布尔值）是按值传递的，而复杂数据类型（对象、数组）是按引用传递的。

按值传递（基本数据类型）

当我们尝试修改一个按值传递的基本数据类型变量时，原始值不会受到影响。

let num = 10;
let newNum = num;
newNum += 5;
console.log(num); // 输出：10
console.log(newNum); // 输出：15

在这个例子中，num 和 newNum 是两个独立的变量，它们存储了不同的值。

按引用传递（复杂数据类型）

当我们尝试修改一个按引用传递的复杂数据类型变量时，原始值会受到影响。

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

在这个例子中，obj 和 newObj 是两个引用同一个对象的变量。当我们修改 newObj 的 name 属性时，obj 的 name 属性也会相应地发生变化。

实例解析：函数中的传值

接下来，我们通过一个实例来理解函数中的传值。

function addFive(num) {
  return num + 5;
}

let originalNum = 10;
let result = addFive(originalNum);
console.log(originalNum); // 输出：10
console.log(result); // 输出：15

在这个例子中，addFive 函数接收一个参数 num，并返回 num + 5 的结果。当我们调用 addFive(originalNum) 时，originalNum 的值被传递给 num。由于基本数据类型是按值传递的，所以 originalNum 的值在函数调用后保持不变。

总结

通过本文的讲解，相信你已经对JavaScript中的传值有了更深入的了解。掌握传值技巧对于编写高效、可维护的JavaScript代码至关重要。希望本文能够帮助你轻松掌握接收传值的技巧，并在实际开发中运用自如。

-- 展开阅读全文 --