js 改变数组或者对象怎么不改变原始值

要在JavaScript中改变数组或者对象而不改变原始值，可以使用深拷贝、浅拷贝、不可变数据结构。深拷贝是最常用的方法。

深拷贝是一种创建原始数组或对象的完全独立副本的方式，可以确保对新副本的更改不会影响原始数据。在JavaScript中，可以通过多种方式实现深拷贝，其中包括使用JSON.parse(JSON.stringify(obj))、lodash库中的_.cloneDeep方法等。浅拷贝则只拷贝对象或数组的第一层属性，使用Object.assign或者...展开运算符，但浅拷贝并不能完全独立于原数据。不可变数据结构是通过库（如Immutable.js）提供的手段来确保数据结构的不可变性。

一、深拷贝

深拷贝是最常用的方法之一，特别是当你需要确保在更改新数据时不会影响原始数据。深拷贝可以通过多种方法实现，每种方法都有其优缺点。

1、使用 JSON 方法

这种方法最简单，也适用于大多数情况，但它有一些限制，例如它不能拷贝函数和undefined。

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

这种方法的优点是简洁直观，适用于大多数简单对象和数组。然而，它的缺点包括不能拷贝特殊对象（如Date对象）、undefined值和函数。

2、使用 Lodash 库

Lodash 提供了一个_.cloneDeep方法，可以实现深拷贝。Lodash 是一个功能强大的工具库，适合在大型项目中使用。

const _ = require('lodash');
let original = { a: 1, b: { c: 2 } };
let copy = _.cloneDeep(original);
copy.b.c = 3;
console.log(original.b.c); // 输出 2

Lodash 的优点在于它的功能全面，能够处理更多复杂的情况。缺点是需要引入第三方库，增加了项目的依赖性。

3、手动实现深拷贝

手动实现深拷贝可以更灵活地处理各种情况，但代码会相对复杂。

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    if (Array.isArray(obj)) {
        let arrCopy = [];
        for (let i = 0; i < obj.length; i++) {
            arrCopy[i] = deepClone(obj[i]);
        }
        return arrCopy;
    }
    let objCopy = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }
    return objCopy;
}
let original = { a: 1, b: { c: 2 } };
let copy = deepClone(original);
copy.b.c = 3;
console.log(original.b.c); // 输出 2

这种方法的优点是完全控制拷贝过程，可以处理特殊情况。缺点是代码复杂且容易出错。

二、浅拷贝

浅拷贝可以通过Object.assign或扩展运算符...实现，只适用于第一层属性不相互依赖的简单情况。

1、使用 Object.assign 方法

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

2、使用扩展运算符

let original = { a: 1, b: { c: 2 } };
let copy = { ...original };
copy.b.c = 3;
console.log(original.b.c); // 输出 3

浅拷贝的优点是简单直接，适用于第一层属性。缺点是对于嵌套对象，改变副本会影响原始对象。

三、不可变数据结构

不可变数据结构是一种确保数据不可变的方式，通常通过库实现，如Immutable.js。

1、使用 Immutable.js

Immutable.js 提供了一套不可变数据结构，包括Map、List等。使用这些数据结构，可以确保数据的不可变性。

const { Map } = require('immutable');
let original = Map({ a: 1, b: Map({ c: 2 }) });
let copy = original.setIn(['b', 'c'], 3);
console.log(original.getIn(['b', 'c'])); // 输出 2

Immutable.js 的优点是提供了强大的不可变数据结构，适用于大型项目。缺点是需要学习新的API和概念，增加了项目的复杂度。

四、总结

在JavaScript中，改变数组或对象而不改变原始值的方式有多种，包括深拷贝、浅拷贝和不可变数据结构。深拷贝是最常用的方法，适用于大多数情况，但需要注意其局限性。浅拷贝适用于简单情况，但无法处理嵌套对象。不可变数据结构提供了一种强大且可靠的方式，适用于大型项目。根据具体需求选择合适的方法，可以有效地避免原始值的改变，提高代码的可维护性和可靠性。