JavaScript 深拷贝和浅拷贝的实现、使用场景和存在的问题

浅拷贝

实现

方式 1（ES 5 语法）：

const params = Object.assign({}, state.dataForm)

方式 2（ES 6 语法）：

const params = { ...state.dataForm }

使用场景

copy 入参和出参

深拷贝

方式 1（手动实现）：

/*** 深拷贝* @param obj*/
export const deepCopy = <T>(obj: T): T => {if (obj === null || typeof obj !== "object") {return obj;}if (Array.isArray(obj)) {const arrCopy = [] as any[];obj.forEach((item, index) => {arrCopy[index] = deepCopy(item);});return arrCopy as any;}const objCopy = {} as { [key: string]: any };Object.keys(obj).forEach((key) => {objCopy[key] = deepCopy((obj as { [key: string]: any })[key]);});return objCopy as T;
};

方式 2（第三方）：

yarn add lodashimport cloneDeep from 'lodash/cloneDeep';
const params = cloneDeep(state.dataForm);

使用场景

需要保留变量状态

存在的问题

浅拷贝只会复制对象的第一层属性，对于嵌套的对象或数组，拷贝的仍然是引用而不是值。这样会导致修改浅拷贝对象的嵌套属性时，原对象的相应属性也会被修改。