js中怎么clone

在JavaScript中，克隆对象的方法包括浅拷贝和深拷贝。浅拷贝、深拷贝、使用Object.assign()、使用扩展运算符（…）、使用JSON.parse()和JSON.stringify()。 这些方法各有优缺点，适用于不同的应用场景。这里我将详细介绍其中的浅拷贝和深拷贝。

浅拷贝是指只复制对象的第一层属性，如果对象的属性是一个引用类型（如对象或数组），那么拷贝的只是该引用的地址，而不是引用的对象本身。深拷贝则会递归地复制对象的每一层属性，确保拷贝后的对象与原对象完全独立。

一、浅拷贝

浅拷贝是克隆对象的基本方法之一，它仅复制对象的第一层属性，如果属性是引用类型，则拷贝的是引用地址。这种方法适用于对象结构较为简单且无需深层次复制的情况。

1. 使用Object.assign()

Object.assign()方法用于将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。这种方法可以方便地实现浅拷贝。

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

2. 使用扩展运算符（…）

扩展运算符（...）可以用于对象浅拷贝，语法简洁，易于理解。

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

二、深拷贝

深拷贝是指完全复制对象的每一层属性，确保新对象与原对象完全独立。这种方法适用于对象结构复杂且需要独立副本的情况。

1. 使用JSON.parse()和JSON.stringify()

这种方法通过将对象转换为JSON字符串，再解析为新对象，实现深拷贝。适用于不包含函数和特殊对象（如Date、RegExp等）的对象。

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

2. 手动递归拷贝

手动递归拷贝是一种更为通用的方法，可以处理包含特殊对象和函数的对象。这种方法需要编写递归函数来遍历对象的每一层属性。

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(deepClone);
  }
  const clonedObj = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  return clonedObj;
}
const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);
console.log(copy); // { a: 1, b: { c: 2 } }
copy.b.c = 3;
console.log(original.b.c); // 2

三、其他深拷贝方法

除了上述方法，还有一些第三方库提供了更为强大的深拷贝功能，如Lodash的_.cloneDeep()方法。这些库经过优化，性能和兼容性都较好，适合在复杂项目中使用。

1. 使用Lodash的_.cloneDeep()

Lodash是一个流行的JavaScript实用工具库，其中的_.cloneDeep()方法可以方便地实现深拷贝。

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

2. 使用第三方库

除了Lodash，还有其他一些库也提供了深拷贝功能，如deepmerge、rfdc等。这些库各有特色，可以根据项目需求选择合适的库。

const deepmerge = require('deepmerge');
const original = { a: 1, b: { c: 2 } };
const copy = deepmerge({}, original);
console.log(copy); // { a: 1, b: { c: 2 } }
copy.b.c = 3;
console.log(original.b.c); // 2

四、克隆数组

克隆数组的方法与克隆对象类似，也分为浅拷贝和深拷贝。浅拷贝可以使用slice()、concat()和扩展运算符，深拷贝可以使用递归方法或第三方库。

1. 浅拷贝数组

浅拷贝数组可以使用slice()、concat()和扩展运算符。

const original = [1, 2, [3, 4]];
// 使用slice()
const copy1 = original.slice();
console.log(copy1); // [1, 2, [3, 4]]
// 使用concat()
const copy2 = original.concat();
console.log(copy2); // [1, 2, [3, 4]]
// 使用扩展运算符
const copy3 = [...original];
console.log(copy3); // [1, 2, [3, 4]]

2. 深拷贝数组

深拷贝数组可以使用递归方法或第三方库。

function deepCloneArray(arr) {
  if (!Array.isArray(arr)) {
    return arr;
  }
  return arr.map(deepCloneArray);
}
const original = [1, 2, [3, 4]];
const copy = deepCloneArray(original);
console.log(copy); // [1, 2, [3, 4]]
copy[2][0] = 5;
console.log(original[2][0]); // 3

五、克隆复杂对象

克隆复杂对象需要考虑到对象中包含的各种数据类型，如函数、日期、正则表达式等。针对这些特殊数据类型，需要编写相应的处理逻辑。

1. 克隆函数

函数是引用类型，直接复制引用地址不会创建新函数。可以通过将函数转换为字符串，再解析为新函数来实现克隆。

function cloneFunction(func) {
  const funcString = func.toString();
  return new Function(`return (${funcString})`)();
}
const original = function() { console.log('Hello World'); };
const copy = cloneFunction(original);
copy(); // Hello World

2. 克隆日期和正则表达式

日期和正则表达式是特殊对象，需要分别处理。

function cloneDate(date) {
  return new Date(date.getTime());
}
function cloneRegExp(regExp) {
  return new RegExp(regExp.source, regExp.flags);
}
const originalDate = new Date();
const copyDate = cloneDate(originalDate);
console.log(copyDate); // 当前日期和时间
const originalRegExp = /hello/gi;
const copyRegExp = cloneRegExp(originalRegExp);
console.log(copyRegExp); // /hello/gi

六、克隆含有循环引用的对象

处理含有循环引用的对象时，普通的递归方法会导致无限循环。可以使用Map记录已访问的对象，避免重复访问。

function deepClone(obj, map = new Map()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (map.has(obj)) {
    return map.get(obj);
  }
  const clonedObj = Array.isArray(obj) ? [] : {};
  map.set(obj, clonedObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key], map);
    }
  }
  return clonedObj;
}
const original = { a: 1 };
original.self = original;
const copy = deepClone(original);
console.log(copy); // { a: 1, self: [Circular] }

总结：克隆对象在JavaScript中是一个常见的需求，根据不同的应用场景选择合适的方法尤为重要。浅拷贝适用于简单对象，深拷贝适用于复杂对象和数组，而处理特殊数据类型和循环引用则需要特定的处理逻辑。通过掌握这些方法，可以有效地满足项目中的各种克隆需求。