在 JavaScript 中克隆对象

Posted 2023-02-22

【中文标题】在 JavaScript 中克隆对象

【英文标题】：Cloning an object in JavaScript

【发布时间】：2011-07-18 21:22:03

【问题描述】：

下面先记录0，再记录1。如何存储对象的副本，而不是引用？

debug.log(vi.details.segment);
vi.nextSegment = vi.details;
vi.nextSegment.segment++;
debug.log(vi.details.segment);

【参考方案1】：

在 jQuery 中克隆一个对象：

var vi.nextSegment = jQuery.extend(, vi.details);

注意：以上是浅拷贝：任何嵌套对象或数组都将通过引用进行复制——这意味着您对vi.nextSegment.obj[prop] 所做的任何更改都将反映在vi.details.obj[prop] 中。如果您想要一个全新的对象，与原始对象完全分离，您需要进行深层复制（将true 作为第一个参数传递）：

var vi.nextSegment = jQuery.extend(true, , vi.details);

要了解更多关于扩展的信息，请参阅here.

【讨论】：

这不是深拷贝。 var a = b: [1, 2]; $.extend(, a).b[0] = 'test'; 和 a.b[0] 将更改为 'test'。要进行深层复制，请将true 作为第一个参数：$.extend(true, , a);

一个刚刚得到我的 gothcha：jQuery.extend(true, , obj); 将创建一个副本。 jQuery.extend(true, obj, ); 不会。

@worldsayshi ：我希望我能早点看到你的评论。几个星期以来一直为此头疼。非常感谢。

太棒了，伙计们！正是我需要的！

【参考方案2】：

看帖子：What is the most efficient way to clone a javascript object

根据John Resig's 回答：

// Shallow copy
var newObject = jQuery.extend(, oldObject);

// Deep copy
var newObject = jQuery.extend(true, , oldObject);

更多信息可以在jQuery documentation.找到

【参考方案3】：

这对我使用 jQuery "parseJSON()" 和 "JSON.stringify()" 克隆对象效果更好

$.ajax(
  url: 'ajax/test.html',
  dataType: 'json',
  success: function(data) 
    var objY = $.parseJSON(JSON.stringify(data));
    var objX = $.parseJSON(JSON.stringify(data));
  
);

在 objX 和 objY 中克隆数据对象是两个不同的对象，你不必搞砸“按引用”的问题

感谢！

【讨论】：

你可以在不使用 jquery 的情况下使用 JSON.parse 内置方法

【参考方案4】：

另一种克隆对象的方法是

newObj = JSON.parse(JSON.stringify(oldObj));

但如果它包含日期，请小心。在这种情况下，JSON.parse 将返回 date.toString() 而不是 date。

【参考方案5】：

这就是我多次复制元素的方式：

首先我有一个模板：

<div class="forms-container">
    <div class="form-template">
        First Name <input>
         .. a lot of other data ...
        Last Name <input>
     <div>
     <button onclick="add_another();">Add another!</button>
<div>

现在，javascript：

function add_another()
    jQuery(".form-template").clone().appendTo(".forms-container");

【参考方案6】：

试试Immutable.js：

由于jQuery 主要处理DOM Elements，它可能不是适合这项工作的工具。 Immutable.js 是由Facebook 创建的56 kb (minified) 库。

// roughly implementing
import Immutable from 'immutable'
//
const oldObj =  foo: 'bar', bar: 'baz' 
// create a map from the oldObj and then convert it to JS Object
const newObj = Immutable.Map(oldObj).toJS()

这样您就可以有效地从oldObj 克隆newObj。基本上，如果您还没有Map，那么我们需要先创建一个Map。地图就像一个blue-print，我们一起创建copies。

参考资料：

首页 - Immutable

文档 - Immutable Docs

GitHub - Immutable@GitHub

祝你好运。

【参考方案7】：

如果您需要保留初始对象但需要使用新选项覆盖数据，您可以将多个对象传递给 $.extend (jQuery)，第一个选项为 true：

var opts_default = opt1: true, opt2: false;
var opts_new = opt1: false;
var opts_final = $.extend(true, , opts_default, opts_new);