Console.log 仅显示打印对象的更新版本 [英] Console.log showing only the updated version of the object printed

问题描述

String.prototype.width = function(font) {var f = 字体 ||'12px 宋体',o = $('
' + this + '
').css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}).appendTo($('body')),w = o.width();o.remove();返回 w;}函数 sortCustomFunction(a, b) {if (a['text'].width() < b['text'].width())返回-1；if (a['text'].width() > b['text'].width())返回 1；//a 必须等于 b返回0；}var annoObj = {'安诺' : [//an paikseis me auta (px to teleutaio na mpei prwto kok) oi mikres metatwpiseis ofeilontai sto padding.{ "label" : "fifth" , "text" : "这是另一个示例文本", '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' }]};控制台日志(annoObj.anno)；//这应该打印未排序的数组(但它打印已排序的数组).annoObj.anno.sort(sortCustomFunction);//对数组进行排序控制台日志(annoObj.anno)；//这应该打印排序(确实如此)

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

JSFIDDLE

解决方案

排序没有问题，但这是大多数浏览器控制台众所周知的特性(优化):树仅在您打开对象时构建, 使用对象的新值.

如果你想在记录时查看对象的状态，假设它是一个足够小的并且没有自引用的对象，你可以像这样克隆它:

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

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)

I'm doing the above and everything works fine. The array inside the json object is sorted by the width value of the 'text' key in the json elements of the array. What I noticed is this odd behavior in console.log. I'm printing the array before sorting and after sorting and in both prints it's the same. It prints the sorted array. Why is this?

JSFIDDLE

解决方案

You have no problem with the sort but this is a well known peculiarity (an optimization) of most browser consoles : the tree is only built when you open the object, with the new values of the object.

If you want to see the state of the object at the time of logging, supposing it's a small enough and not self referencing object, you may clone it like this :

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

这篇关于Console.log 仅显示打印对象的更新版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！