JSON.stringify() 不渲染被事件改变的对象

Question

这是我的代码：

//column reorder event
dataTable.on('column-reorder', function (e, settings, details) {
    var userData = tableWidget.grid('userData');
    console.log(userData); //the object which is correct already
    console.log(JSON.stringify(userData)); //somehow it's different than without stringify
    $.ajax({
        url: "../../server/post.aspx?tableEvent=reordercolumns&table=SubContractor",
        data: { dataColumnOrder: userData },
        dataType: "json",
        type: "POST",
        success: function (response) {
            //write JS when ajax call success
            console.log('success');
        },
        error: function () {
            console.log("Something wrong with the columns' reorder saving process");
        }
    });
    console.log("Reordered");
});

此事件将更新userData 对象。更新部分工作正常。不幸的是，当我对它进行字符串化时，userData 对象恢复为默认值。特此附上它的截图：

没有Stringifyconsole.log(userData);，（正确的那个）：

使用 Stringify console.log(JSON.stringify(userData));:

{
    "view": "SubContractorGridView",
    "title": "SubContractor Grid View",
    "settings": {
        "colOrder": ["Id", "ExtKey", "InsertionDate", "DeletionDate", "Name", "Address", "ZipCode", "EmailAddress", "PhoneNumber", "UserName", "Password", "LastUpdate", "Price"],
        "orderBy": "Name",
        "orderDir": "asc"
    },
    "columns": [{
            "dbField": "Id",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 89,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "ExtKey",
            "show": false,
            "widthMobile": 90,
            "widthPhablet": 120,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 150,
            "widthDesktop": 90,
            "widthLargeDesktop": 100
        }, {
            "dbField": "InsertionDate",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 100,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 100,
            "widthDesktop": 90,
            "widthLargeDesktop": 110
        }, {
            "dbField": "DeletionDate",
            "show": false,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 100
        }, {
            "dbField": "Name",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 130,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "Address",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "ZipCode",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "EmailAddress",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "PhoneNumber",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "UserName",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "Password",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "LastUpdate",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }, {
            "dbField": "Price",
            "show": true,
            "widthMobile": 90,
            "widthPhablet": 90,
            "widthMiniTablet": 90,
            "widthTablet": 90,
            "widthSmallDesktop": 90,
            "widthDesktop": 90,
            "widthLargeDesktop": 90
        }
    ]
}

正如您所见，列的顺序不知何故会通过 stringify 恢复到默认顺序。

Answer 1

字符串不是动态的，一旦创建字符串并在控制台中打印它就不会改变。 但是对象是动态的，因此当对象属性发生更改时，您会在控制台上看到更新值，因为它连接了对象的评估。 如果要显示更新的值，则必须再次调用 JSON.stringify。 如果您对 console.clear() 的旧值不感兴趣，可以清理控制台 更多关于console on chrome