正文

JavaScript函数参数传递全解析：传值还是传址，看懂这5个案例轻松掌握

/0 浏览量
1012

JavaScript 函数参数的传递方式一直是开发者讨论的热点话题。很多人对于函数参数的传值和传址感到困惑。本文将通过5个具体的案例，深入浅出地解析 JavaScript 中函数参数的传递机制，帮助你轻松掌握这一知识点。

案例一：基本数据类型

首先，我们来了解一下基本数据类型（如数字、字符串、布尔值等）的参数传递方式。

function changeNum(num) {
    num = 10;
    console.log(num); // 输出：10
}

let num = 5;
changeNum(num);
console.log(num); // 输出：5

在这个案例中，num 是一个基本数据类型的变量。当我们调用 changeNum 函数时，实参 num 的值被复制给形参 num。因此，在函数内部修改形参 num 的值，不会影响实参 num 的值。

案例二：对象类型

接下来，我们来看一下对象类型的参数传递方式。

function changeObj(obj) {
    obj.value = 10;
    console.log(obj.value); // 输出：10
}

let obj = { value: 5 };
changeObj(obj);
console.log(obj.value); // 输出：10

在这个案例中，obj 是一个对象类型的变量。当我们调用 changeObj 函数时，实参 obj 的引用被复制给形参 obj。因此，在函数内部修改形参 obj 的属性值，会影响到实参 obj。

案例三：基本数据类型和对象类型的混合

现在，我们来看一个包含基本数据类型和对象类型的参数传递案例。

function changeMixed(num, obj) {
    num = 10;
    obj.value = 20;
    console.log(num, obj.value); // 输出：10 20
}

let num = 5;
let obj = { value: 5 };
changeMixed(num, obj);
console.log(num, obj.value); // 输出：5 20

在这个案例中，基本数据类型 num 和对象类型 obj 分别传递给函数 changeMixed。对于基本数据类型 num，其值被复制给形参 num；对于对象类型 obj，其引用被复制给形参 obj。因此，函数内部对基本数据类型和对象类型的修改分别影响实参和形参。

案例四：使用 ES6 中的解构赋值

ES6 中引入了解构赋值，使得函数参数的传递更加灵活。

function changeStruct({ value }) {
    value = 10;
    console.log(value); // 输出：10
}

let obj = { value: 5 };
changeStruct(obj);
console.log(obj.value); // 输出：5

在这个案例中，我们使用解构赋值将对象 obj 中的 value 属性赋给形参 value。由于这里传递的是基本数据类型，因此在函数内部修改形参 value 的值，不会影响实参 obj。

案例五：使用扩展运算符

扩展运算符也可以用于函数参数的传递。

function changeSpread(...args) {
    args[0] = 10;
    console.log(args[0]); // 输出：10
}

let num = 5;
changeSpread(num);
console.log(num); // 输出：5

在这个案例中，我们使用扩展运算符将实参 num 转换为数组 [num]，并传递给函数 changeSpread。由于这里传递的是基本数据类型，因此在函数内部修改数组第一个元素的值，不会影响实参 num。

总结

通过以上5个案例，我们可以总结出以下结论：

  1. 基本数据类型的参数传递是传值，即复制一份值给形参；
  2. 对象类型的参数传递是传址，即复制一份引用给形参；
  3. 在函数内部修改形参的值或属性，对于基本数据类型和对象类型有不同的影响；
  4. ES6 中引入了解构赋值和扩展运算符，使得函数参数的传递更加灵活。

希望这篇文章能帮助你更好地理解 JavaScript 中函数参数的传递机制。

-- 展开阅读全文 --