Как я могу отобразить объект JavaScript?

Question

Как отобразить содержимое объекта JavaScript в строковом формате, например, когда мы alert переменная?

Тот же форматированный способ отображения объекта.

Answer 1

Если вы ищете что-то, что может вернуть предварительно подтвержденную строку любого объекта javascript, проверьте https://github.com/fresheneesz/beautinator. Пример:

var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}})
console.log(result)

Результат:

{ "font-size": "26px",
  "font-family": "'Open Sans', sans-serif",
  color: "white", overflow: "hidden",
  padding: "4px 4px 4px 8px",
  Text: { display: "block", width: "100%",
          "text-align": "center", "padding-left": "2px",
          "word-break": "break-word"
  }
}

Это даже работает, если в вашем объекте есть функции.

Answer 2

Это не будет работать в браузере, и вам может понадобиться это только в том случае, если вы хотите получить действительное представление JS для вашего объекта, а не JSON. Он просто запускает встроенную оценку узла

var execSync = require('child_process').execSync

const objectToSource = (obj) =>
  execSync('node -e \'console.log(JSON.parse(`' + JSON.stringify(obj) + '`))\'', { encoding: 'utf8' })

console.log(objectToSource({ a: 1 }))

Answer 3

Вы можете использовать мою функцию.
Вызовите эту функцию с массивом или строкой или объектом, который предупреждает содержимое.

Функция

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

Использование

var data = [1, 2, 3, 4];
print_r(data);

Answer 4

Попробуйте это:

var object = this.window;
console.log(object,'this is window object');

Выход:

Answer 5

Кажется, что простой for...in не может решить проблему, особенно когда мы хотим разобраться с объектами custom, host, native или CSSOM. Кроме того, здесь речь идет об отладке, и кто знает, когда и где она нам понадобится!

Моя маленькая библиотека может обрабатывать такие объекты, как этот:

    obj2
     |__ foo = 'bar'
     |__ loop2 = obj2
     |            :
     |__ another = obj1
                    |__ a1 = 1
                    |__ b1 = 'baz'
                    |__ loop1 = obj1
                    |            :
                    |__ c1 = true
                    |__ d1 = ''
                    |__ e1 = [1,2,3]

и представьте их красочно и с надписью как:

1. 0, foo, 'bar'
2. 0, loop2, 'содержит циклическую ссылку на объект с индексом 0'
3. 0, еще один, 'object'
4. 1, a1, 1
5. 1, b1, 'baz'
6. 1, loop1, 'содержит циклическую ссылку на объект с индексом 2'
7. 1, c1, 'true'
8. 1, d1, ''
9. 1, e1, [1,2,3]

но посмотрите там:

1. https://github.com/centurianii/jsdebug
2. http://jsfiddle.net/centurianii/92Cmk/36/

С некоторыми мерами предосторожности даже document.body анализируется!

Answer 6

Простой способ показать содержимое объекта - использовать console.log, как показано ниже

console.log("Object contents are ", obj);

Обратите внимание, что я не использую '+' для объединения объекта. Если я использую «+», я получу строковое представление только для объекта, что-то вроде [Object object].