Console.log показывает только обновленную версию распечатанного объекта

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 сортируется по значению ширины ключа text в элементах json массива. Что я заметил, так это странное поведение в console.log. Я печатаю массив до сортировки и после сортировки, и в обоих случаях это одно и то же. Он печатает отсортированный массив. Почему это?

JSFIDDLE


person Alkis Kalogeris    schedule 26.06.2013    source источник
comment
точная копия Является ли консоль JavaScript Chrome ленивой при оценке массивов?   -  person Bergi    schedule 26.06.2013
comment
Я не знал эту команду (новичок в javascript). Спасибо. Опубликуйте это как ответ, я проголосую.   -  person Alkis Kalogeris    schedule 26.06.2013
comment
Кстати, вы действительно должны получить .width() каждой строки только один раз - это довольно сложное вычисление.   -  person Bergi    schedule 26.06.2013
comment
@Bergi спасибо за предложение. Это часть большой программы, и сейчас я создаю демоверсию. Настройка будет позже.   -  person Alkis Kalogeris    schedule 26.06.2013
comment
@Bergi Берги, ты прав, я искал, но я не использовал нужные слова, я думаю, потому что я потерялся в предложениях.   -  person Alkis Kalogeris    schedule 26.06.2013
comment
Я сохранил эту тему, потому что в другой нет предложения console.table. Я меняю название, чтобы было легче найти.   -  person Alkis Kalogeris    schedule 26.06.2013
comment
@alkis: вы, вероятно, предпочли бы найти некоторые из его повторяющихся вопросов - это конкретное название слишком сложное, чтобы найти, не зная этого :-)   -  person Bergi    schedule 26.06.2013
comment
Черт... Я действительно искал, может быть, не слишком усердно, я думаю. В любом случае в следующий раз буду осторожнее.   -  person Alkis Kalogeris    schedule 26.06.2013


Ответы (3)


У вас нет проблем с сортировкой, но это хорошо известная особенность (оптимизация) большинства консолей браузера: дерево строится только при открытии объекта с новыми значениями объекта.

Если вы хотите увидеть состояние объекта во время регистрации, предполагая, что это достаточно маленький и не ссылающийся на себя объект, вы можете клонировать его следующим образом:

console.log(JSON.parse(JSON.stringify(annoObj.anno)));
person Denys Séguret    schedule 26.06.2013
comment
Обратите внимание, что если вам действительно нужно регистрировать большие и рекурсивные объекты, у вас также есть решение: JSON.prune.log . Но чаще всего вы можете ограничить свои логи достаточно небольшой частью. - person Denys Séguret; 26.06.2013

Я отвечал на дублированный вопрос об этом, когда он был закрыт. Как интересное примечание, фрагменты кода Stackoverflow печатают фактическое текущее значение объекта без ошибки браузера.

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>

person alotropico    schedule 17.07.2020

Используйте console.table для табличного макета. Поддерживается в Firebug и последних версиях Google Chrome.

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

person claustrofob    schedule 26.06.2013
comment
В моем случае это не сработало, как ожидалось. По-прежнему получаю только обновленное значение. - person Daman Arora; 29.06.2021