首页 - web前端开发

JavaScript中函数内部如何创建新变量，使其作为全局变量的副本而非全局变量的引用？

在JavaScript中，如果你想在函数内部创建一个新的变量，这个变量是原始数据类型（如数字、字符串）的副本，而不是原始数据类型的引用，你可以直接赋值。对于对象或数组这样的复合数据类型，如果你想复制它们的值而不是引用，你需要使用不同的方法，因为直接赋值会使得新变量与原变量共享同一个引用。

对于原始数据类型（如数字、字符串）

对于原始数据类型，当你将一个值赋给一个新变量时，实际上是在创建这个值的副本。例如：

let originalNumber = 10;

function processNumber() {

let copiedNumber = originalNumber; // copiedNumber 是 originalNumber 的副本

copiedNumber += 5; // 修改 copiedNumber 不会影响 originalNumber

console.log(copiedNumber); // 输出 15

console.log(originalNumber); // 输出 10

}

processNumber();

对于对象或数组

对于对象或数组，如果你想复制它们的值（即创建一个新的对象或数组，其内容与原对象或数组相同，但不是同一个引用），你可以使用以下方法之一：

方法1：使用展开运算符（Spread Operator）

let originalArray = [1, 2, 3];

function processArray() {

let copiedArray = [...originalArray]; // 使用展开运算符复制数组

copiedArray.push(4); // 修改 copiedArray 不会影响 originalArray

console.log(copiedArray); // 输出 [1, 2, 3, 4]

console.log(originalArray); // 输出 [1, 2, 3]

}

processArray();

方法2：使用`Array.slice()`方法或`Object.assign()`方法（对于对象）

let originalArray = [1, 2, 3];

function processArray() {

let copiedArray = originalArray.slice(); // 使用 slice() 方法复制数组

copiedArray.push(4); // 修改 copiedArray 不会影响 originalArray

console.log(copiedArray); // 输出 [1, 2, 3, 4]

console.log(originalArray); // 输出 [1, 2, 3]

}

processArray();

对于对象：

let originalObject = {a: 1, b: 2};

function processObject() {

let copiedObject = {...originalObject}; // 使用展开运算符复制对象

copiedObject.a = 3; // 修改 copiedObject 不会影响 originalObject

console.log(copiedObject); // 输出 {a: 3, b: 2}

console.log(originalObject); // 输出 {a: 1, b: 2}

}

processObject();

或者使用Object.assign()：