正文

掌握JavaScript：不改变对象和数组引用类型值的5种方法详解

/0 浏览量
0404

在JavaScript中，对象和数组都是引用类型，这意味着当我们将它们赋值给一个变量时，实际上是在传递这个对象的引用而不是它的副本。因此，任何对原始对象或数组的修改都会影响到所有引用这个对象或数组的变量。但有时候，我们可能想要避免这种情况。以下是不改变对象和数组引用类型值的5种方法：

1. 使用深拷贝

深拷贝是一种复制整个对象的方法，包括其嵌套的对象。这样，即使修改了复制后的对象，原始对象也不会受到影响。

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    let copy;
    if (obj instanceof Array) {
        copy = [];
        for (let i = 0, len = obj.length; i < len; i++) {
            copy[i] = deepCopy(obj[i]);
        }
    } else {
        copy = {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                copy[key] = deepCopy(obj[key]);
            }
        }
    }
    return copy;
}

// 使用示例
let originalObj = { a: 1, b: { c: 2 } };
let newObj = deepCopy(originalObj);
newObj.b.c = 3;
console.log(originalObj); // 输出: { a: 1, b: { c: 2 } }
console.log(newObj);      // 输出: { a: 1, b: { c: 3 } }

2. 使用扩展运算符复制数组

扩展运算符（…）可以用来创建一个数组的浅拷贝。

let originalArray = [1, 2, [3, 4]];
let newArray = [...originalArray];
newArray[2][1] = 5;
console.log(originalArray); // 输出: [1, 2, [3, 4]]
console.log(newArray);      // 输出: [1, 2, [3, 5]]

3. 使用slice方法复制数组

slice方法可以用来创建一个数组的浅拷贝。

let originalArray = [1, 2, [3, 4]];
let newArray = originalArray.slice();
newArray[2][1] = 5;
console.log(originalArray); // 输出: [1, 2, [3, 4]]
console.log(newArray);      // 输出: [1, 2, [3, 5]]

4. 使用Object.assign方法复制对象

Object.assign方法可以用来复制一个对象，返回一个新的对象。

let originalObj = { a: 1, b: { c: 2 } };
let newObj = Object.assign({}, originalObj);
newObj.b.c = 3;
console.log(originalObj); // 输出: { a: 1, b: { c: 2 } }
console.log(newObj);      // 输出: { a: 1, b: { c: 3 } }

5. 使用JSON.parse和JSON.stringify

这种方法适用于简单对象和数组，但需要注意的是，它不能处理函数、undefined、Symbol等特殊值。

let originalObj = { a: 1, b: { c: 2 } };
let newObj = JSON.parse(JSON.stringify(originalObj));
newObj.b.c = 3;
console.log(originalObj); // 输出: { a: 1, b: { c: 2 } }
console.log(newObj);      // 输出: { a: 1, b: { c: 3 } }

以上就是五种不改变对象和数组引用类型值的方法。希望这些方法能帮助你更好地理解JavaScript中的对象和数组操作。

-- 展开阅读全文 --