正文

掌握JS数值传递：深浅拷贝、默认参数与函数传值技巧

/0 浏览量
0923

在JavaScript中，数值传递是一个基础但重要的概念。无论是进行深浅拷贝，还是处理函数参数和默认值，都涉及到数值传递的细节。本文将深入探讨这些技巧，帮助你更好地理解和运用JavaScript。

深浅拷贝

在JavaScript中，当我们将一个变量赋值给另一个变量时，实际上只是创建了一个指向同一内存地址的引用。这意味着对原始变量或拷贝变量的修改都会影响另一个变量。这就是浅拷贝。

浅拷贝

浅拷贝只复制对象的第一层属性，如果对象内部嵌套了其他对象，那么这些嵌套对象在原始对象和拷贝对象中仍然是同一个对象。

let obj = { a: 1, b: { c: 2 } };
let copy = { ...obj }; // 使用展开运算符进行浅拷贝

copy.b.c = 3; // 修改拷贝对象中的嵌套对象，原始对象也会受到影响
console.log(obj.b.c); // 输出 3

深拷贝

深拷贝则是复制整个对象及其嵌套的对象，使得原始对象和拷贝对象之间没有关联。这可以通过JSON.parse(JSON.stringify())来实现。

let obj = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(obj)); // 使用JSON序列化和反序列化进行深拷贝

deepCopy.b.c = 3; // 修改拷贝对象中的嵌套对象，原始对象不会受到影响
console.log(obj.b.c); // 输出 2

需要注意的是，JSON.parse(JSON.stringify())无法复制函数、undefined、Symbol等特殊类型，且无法正确处理循环引用。

默认参数

在JavaScript中，你可以为函数参数设置默认值，这样即使调用函数时没有传入该参数，它也会有一个默认值。

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出: Hello, Guest!
greet('Alice'); // 输出: Hello, Alice!

函数传值技巧

在JavaScript中，函数参数是按值传递的。这意味着，如果你传递一个对象给函数，函数内部对该对象的修改不会影响原始对象。

传递原始值

对于原始值（如数字、字符串、布尔值），传递的是值的副本。

let a = 10;
function modify(a) {
  a = 20;
}
modify(a);
console.log(a); // 输出 10，原始值没有改变

传递对象

对于对象，传递的是对象的引用。

let obj = { a: 10 };
function modify(obj) {
  obj.a = 20;
}
modify(obj);
console.log(obj.a); // 输出 20，原始对象被修改

总结起来，掌握JavaScript中的数值传递技巧对于编写高效、可维护的代码至关重要。通过了解深浅拷贝、默认参数和函数传值，你可以更好地处理数据，避免不必要的错误。

-- 展开阅读全文 --