Console.log 仅显示打印对象的更新版本答案

【问题标题】：Console.log showing only the updated version of the object printedConsole.log 仅显示打印对象的更新版本
【发布时间】：2013-06-23 14:22:11
【问题描述】：

String.prototype.width = function(font) {

  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}


function sortCustomFunction(a, b) {
  if (a['text'].width() < b['text'].width())
     return -1;
  if (a['text'].width() > b['text'].width())
     return 1;
  // a must be equal to b
  return 0;
}

var annoObj = {
        'anno' : [
            //an paikseis me auta (px to teleutaio na mpei prwto kok) oi mikres metatwpiseis ofeilontai sto padding.
            { "label" : "fifth" , "text"  : "This is a sample text another one" , 'color' : 'red' },
            { "label" : "first" , "text"  : "This is a sample" , 'color' : 'grey' },
            { "label" : "second" , "text" : "sample" , 'color' : 'green' },
            { "label" : "sixth" , "text"  : "This is a sample text another one text one mooooorreee" , 'color' : 'lightgreen' },
            { "label" : "third" , "text"  : "another one" , 'color' : 'blue' },
            { "label" : "forth" , "text"  : "one mooooorreee" , 'color' : 'purple' }        
        ]
    };

    console.log(annoObj.anno);   //This should print the unsorted array (but it prints the sorted array).
    annoObj.anno.sort(sortCustomFunction); //Sort the array
    console.log(annoObj.anno);  //This should print the sorted (and it does)

我正在执行上述操作，一切正常。 json 对象内的数组按数组的 json 元素中的 'text' 键的宽度值排序。我注意到console.log 中的这种奇怪行为。我在排序之前和排序之后打印数组，并且在两个打印中它是相同的。它打印排序后的数组。这是为什么呢？

JSFIDDLE

【问题讨论】：

Is Chrome's JavaScript console lazy about evaluating arrays? 的完全相同的副本
我不知道这个命令（javascript 中的新手）。谢谢你。将其发布为我会投票的答案。
顺便说一句，你真的应该只得到每个字符串的 .width() 一次 - 这是一个相当繁重的计算。
@Bergi 感谢您的建议。这是一个更大程序的一部分，我现在正在构建一个演示。定制将在稍后推出。
@Bergi 你是对的，我搜索了但我没有使用我猜想的正确词，因为我迷失在建议中。

标签： javascript json google-chrome sorting console

【解决方案1】：

您对排序没有任何问题，但这是大多数浏览器控制台的一个众所周知的特性（一种优化）：仅当您打开对象时才会使用对象的新值构建树。

如果您想在记录时查看对象的状态，假设它足够小且不是自引用对象，您可以像这样克隆它：

console.log(JSON.parse(JSON.stringify(annoObj.anno)));

【讨论】：

请注意，如果您确实需要记录大而递归的对象，您也有一个解决方案：JSON.prune.log。但大多数情况下，您可以将日志限制在足够小的部分。

【解决方案2】：

当它被关闭时，我正在回答这个问题的重复问题。就像一个相关的注意事项一样，Stackoverflow 的代码 sn-ps 确实打印了对象的实际当前值，没有浏览器的错误。

let dummyArr = [
    {"name" : "a", "isChecked" : true},
    {"name" : "b", "isChecked" : false},
    {"name" : "c", "isChecked" : true}
];

console.log(dummyArr);
document.getElementById('a').innerHTML = JSON.stringify(dummyArr);

for(var i = 0; i < dummyArr.length ; i++){
    dummyArr[i].isChecked = false;
}

console.log(dummyArr);
document.getElementById('b').innerHTML = JSON.stringify(dummyArr);

<div id="a"></div>
<div id="b"></div>

【讨论】：

【解决方案3】：

使用console.table 进行表格布局。在 Firebug 和最新版本的 Google Chrome 中受支持。

https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#console-table

【讨论】：

就我而言，它没有按预期工作。仍然只获得更新后的值。