首页 >web前端 >js教程 >如何正确克隆 JavaScript 对象?

如何正确克隆 JavaScript 对象?

Mary-Kate Olsen
Mary-Kate Olsen原创
2025-01-03 16:36:43126浏览

How to Properly Clone a JavaScript Object?

如何准确克隆 JavaScript 对象

在 JavaScript 中复制对象对于维护数据完整性和防止意外修改至关重要。但是,创建对象的简单副本可能会无意中引入意外的更改。这是确保在 JavaScript 中成功克隆对象的综合指南:

结构化克隆(现代解决方案):

对于最新的浏览器,结构化克隆(在 ES2020 中引入)提供了一个简单且可靠的解决方案:

const clone = structuredClone(object);

此方法生成准确的副本对象,包括其所有属性,没有任何不需要的额外内容。

传统方法:

对于早期浏览器版本,克隆对象需要更复杂的过程:

避免快捷方式:

复制从内置 JavaScript 对象派生的对象可能会导致引入其他属性。为了防止这种情况,请仅克隆文字构造的对象。

处理原型继承:

新对象通常从其原型继承属性。要模仿此行为,您必须手动将继承的属性转移到克隆对象。

过滤掉非本地属性:

默认情况下不继承不可枚举属性。使用 hasOwnProperty 方法从原型中过滤掉此类属性。

考虑隐藏属性:

某些对象具有隐藏属性,例如prototype和__proto__,但它们不是可以通过枚举来访问。这些属性必须单独处理。

处理日期对象:

日期对象有一个包含日期值的隐藏数据属性。要保留相同的日期,请对克隆的 Date 对象调用 setTime。请注意,此方法特定于 Date 对象。

复杂数据类型:

如果您的对象包含复杂数据类型,如数组或其他对象,则还必须克隆这些数据类型递归地确保完整的副本。

克隆函数:

这是一个遵循以下原则的综合克隆函数:

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

限制:

需要注意的是,这个函数假定一组有限的数据类型,并且不处理循环引用或具有超出这些属性的隐藏属性的对象提到过。

以上是如何正确克隆 JavaScript 对象?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn