如何在不引用原始对象的情况下复制 JavaScript 对象

Question

在这里，编辑后，行数据将更改为新行。我只需要创建此对象的副本。但它引用了原文。原始对象中发生的更改也反映在复制的对象中。

$(document).ready(function () {
    var nEditing = null;
    var rowdata = null;
    var tabIndex = null;
    var table = null;
    var row = null;
    $('table').on('click', 'a.edit', function (e) {
        e.preventDefault();
        /* Get the row as a parent of the link that was clicked on */
        var nRow = $(this).parents('tr')[0];
        var table = $(this).parents('table')[0];
         row = $(this).parents('tr').find('td');
        if (nEditing !== null && nEditing != nRow) {
            /* A different row is being edited - the edit should be cancelled and this row edited */
            restoreRow(table, rowdata, nEditing);
            editRow(row, nRow);
            nEditing = nRow;
            rowdata = row;
        }
        else 
         if (nEditing == nRow && this.innerHTML == '<i class="fa fa-save"></i>') {
            /* This row is being edited and should be saved */
            saveRow(row, nEditing);
            nEditing = null;
            rowdata = null;
        }
        else {
            /* No row currently being edited */
            nEditing = nRow;
            rowdata = row;
            editRow(row, nRow);
        }
    });

});
//Js edit row inline--------------------------------------------------------------------------------------------
function editRow(table, nRow) {
    //var rowData = table.row(nRow).data();

        // do something with productId, product, Quantity
    var td = $('>td', nRow);
    var Count = td.length-1;
    for (var i = 1; i < Count; i++)
    {
        td[i].innerHTML = '<input type="text" style="width:100%" value="' +table.eq(i).text() + '">';
    }

    td[Count].innerHTML = '<a class="edit" href="#"><i class="fa fa-save"></i></a>';
}


//save inline edit row----------------------------------------------------------------------------------------------
function saveRow(row, nRow) {
    var inputs = $('input', nRow);
    var rowData = row;
    var td = $('>td', nRow);
    var Count = td.length - 1;
    for (var i = 1; i < Count; i++) {
        rowData[i] = inputs[i-1].value;
        td[i].innerHTML = rowData[i];
    }

    td[Count].innerHTML = '<a class="edit" href="#"><i class="fa fa-edit"></i></a>';

}


//Restore the unsaved thing----------------------------------------------------------------------------------------
function restoreRow(table, rowdata, nEditing) {
    var td = $('>td', nEditing);
    var Count = td.length - 1;
    for (var i = 1; i < Count; i++) {
        td[i].innerHTML = '' + rowdata[i].innerHTML + '';
    }
    td[Count].innerHTML = '<a class="edit" href="#"><i class="fa fa-edit"></i></a>';

}

Answer 1

如果你想复制一个DOM元素，你需要cloneNode函数：https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode。

如果你想复制一个普通的javascript对象，那么根据这个问题，这可能是最快的：

JSON.parse(JSON.stringify(obj))

请仔细阅读链接的问题以获取更多信息。