在JS中有哪些常见的浅克隆实现方式

 大家好~ 我是前端uio，本文主要介绍JS中的几种常见的浅克隆实现方式。有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

---

一、克隆的基本定义

        1.克隆

            复制对象或实例，创建一个与原对象相同的新对象，但不复制其引用的对象。

        2.浅克隆

           浅克隆是指创建一个新对象，该对象包含原始对象的属性副本，但这些属性如果是对象或数组，则只是引用原始对象的地址，而不是真正的副本。也就是说，浅克隆不会复制嵌套对象的深层结构。

        3.深克隆

            不仅复制对象，还递归复制它引用的对象，形成独立的副本，改变副本不会影响原对象。

二、常见的浅克隆的实现方式

1.Object.assign()方法

        i）基本情况

  Object.assign()是ES6中的一个静态方法，可以将一个或多个对象的可枚举属性值复制到目标对象。如果源对象中有嵌套对象，Object.assign()也只会复制顶层对象的引用。

       ii） 代码实现

let obj = { a: 1, b: { c: "小爱" } };
let copy = Object.assign({}, obj);
copy.b.c = "胡桃";
console.log(obj); // { a: 1, b: { c: 胡桃 } }

2.展开运算符（...）

      i)  基本情况

        ES6引入的展开运算符...也可以用来进行浅克隆。当使用展开运算符时，如果遇到嵌套对象，同样只会复制顶层对象的引用。

       ii）代码实现

const original = { a: 1, b: { c: "小爱" } };
const clone = { ...original };
clone.b.c = "胡桃"; // 修改克隆的嵌套对象
console.log(original); // { a: 1, b: { c: "胡桃" } }

3.for...in循环

        i) 基本情况

         使用for...in循环可以手动复制对象的属性到一个新对象中，但这种方法只能复制到第一层，对于嵌套对象不会进行深层复制。

       ii）代码实现

function shallowCopy(initalObj) {
    var result = {};
    for (var prop in initalObj) {
        if (initalObj.hasOwnProperty(prop)) {
            result[prop] = initalObj[prop];
        }
    }
    return result;
}

三、总结与思考

1.在使用浅克隆时，需要注意如果源对象中含有引用类型的属性，那么克隆得到的对象与原始对象在这些属性上是共享同一内存地址的。

2.浅克隆不适合用于需要完全独立副本的场景，例如在状态管理中，如果希望克隆的对象状态变化不影响原始对象，应使用深克隆。

3.在处理复杂数据结构时，浅克隆可能会导致意想不到的副作用，因此在设计系统时要谨慎选择合适的克隆策略，特别是处理敏感数据时，要小心使用浅克隆，因为它可能导致意外的数据共享 。