Как я могу отобразить объект JavaScript?
https://stackoverflow.com/questions/957537
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как мне отобразить содержимое объекта JavaScript в строковом формате, например, когда мы alert переменная?
Тот же форматированный способ, которым я хочу отобразить объект.
Решение
Если вы хотите распечатать объект для целей отладки, используйте следующий код:
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
будет отображаться:
Примечание: ты должен Только зарегистрируйте объект.Например, это не сработает:
console.log('My object : ' + obj)
Другие советы
Используйте родной язык JSON.stringify способ.Работает с вложенными объектами и всеми основными браузерами Поддержка этот метод.
str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()
Ссылка на Ссылка на Mozilla API и другие примеры.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Используйте пользовательский Заменитель JSON.stringify если вы столкнетесь с этой ошибкой Javascript
"Uncaught TypeError: Converting circular structure to JSON"
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.dir(object):
Отображает интерактивный список свойств указанного объекта JavaScript.Этот список позволяет использовать треугольники раскрытия для проверки содержимого дочерних объектов.
Обратите внимание , что console.dir() функция является нестандартной.Видишь MDN Веб-документы
попробуй это :
console.log(JSON.stringify(obj))
Это приведет к печати строковой версии object.Так что вместо [object] в качестве выходных данных вы получите содержимое объекта.
Что ж, Firefox (спасибо @Bojangles за подробную информацию) имеет Object.toSource() метод, который печатает объекты в виде JSON и function(){}.
Я думаю, этого достаточно для большинства целей отладки.
Если вы хотите использовать alert для печати вашего объекта, вы можете сделать это:
alert("myObject is " + myObject.toSource());
Он должен выводить каждое свойство и соответствующее ему значение в строковом формате.
В NodeJS вы можете распечатать объект, используя util.inspect(obj).Обязательно укажите глубину, иначе у вас получится только неглубокий отпечаток объекта.
Если вы хотите видеть данные в табличном формате, вы можете использовать
console.table(obj);
Таблицу можно отсортировать, если щелкнуть по столбцу таблицы.
Вы также можете выбрать, какие столбцы отображать:
console.table(obj, ['firstName', 'lastName']);
Вы можете найти более подробную информацию о console.table здесь
Функция:
var print = function(o){
var str='';
for(var p in o){
if(typeof o[p] == 'string'){
str+= p + ': ' + o[p]+'; </br>';
}else{
str+= p + ': { </br>' + print(o[p]) + '}';
}
}
return str;
}
Использование:
var myObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
$('body').append( print(myObject) );
Пример:
Как было сказано ранее, лучшим и наиболее простым способом, который я нашел, было
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
Используй это:
console.log('print object: ' + JSON.stringify(session));
Чтобы напечатать полный объект с помощью Node.js с цветами в качестве бонуса:
console.dir(object, {depth: null, colors: true})
Цвета, конечно, необязательны, "глубина:null' выведет полный объект.
Похоже, что эти параметры не поддерживаются в браузерах.
Ссылки:
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
Если вы хотите распечатать объект во всю его длину, можете использовать
console.log(требовать('util').inspect(obj, {showHidden:ложь, глубина:нуль})
Если вы хотите напечатать объект, преобразовав его в строку, то
консоль.log(JSON.stringify(obj));
(Это было добавлено в мою библиотеку по адресу ГитХаб)
Изобретаем велосипед заново!Ни одно из этих решений не сработало в моей ситуации.Итак, я быстро подправил ответ пейджвила.Этот файл не предназначен для печати на экране (через консоль, текстовое поле или что-то еще).Однако это необходимо для передачи данных.Эта версия, похоже, возвращает очень похожий результат, поскольку toSource().Я не пробовал JSON.stringify, но я предполагаю, что это примерно одно и то же.Результатом выполнения этой функции является допустимое объявление объекта Javascript.
Я бы не сомневался, что что-то подобное уже было где-то на SO, но сделать это было просто короче, чем тратить время на поиск прошлых ответов.И поскольку этот вопрос был моим самым популярным в Google, когда я начал поиск по этому поводу;Я подумал, что размещение этого здесь может помочь другим.
В любом случае, результатом этой функции будет строковое представление вашего объекта, даже если ваш объект имеет встроенные объекты и массивы, и даже если эти объекты или массивы имеют еще больше встроенных объектов и массивов.(Я слышал, ты любишь выпить?Итак, я снабдил твою машину кулером.А потом я заменил твой кулер другим кулером.Таким образом, ваш холодильник может пить, пока вы остываете.)
Массивы хранятся с помощью [] вместо того, чтобы {} и, таким образом, не имеют пар ключ / значение, только значения.Как обычные массивы.Следовательно, они создаются так же, как и массивы.
Кроме того, все строки (включая имена ключей) заключаются в кавычки, в этом нет необходимости, если только эти строки не содержат специальных символов (например, пробела или косой черты).Но мне не хотелось обнаруживать это только для того, чтобы удалить некоторые кавычки, которые в противном случае все равно работали бы нормально.
Эта результирующая строка затем может быть использована с eval или просто сбрасывать его в var с помощью манипуляций со строками.Таким образом, вы заново создаете свой объект из текста.
function ObjToSource(o){
if (!o) return 'null';
var k="",na=typeof(o.length)=="undefined"?1:0,str="";
for(var p in o){
if (na) k = "'"+p+ "':";
if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
else str += k + o[p] + ",";
}
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
Дайте мне знать, если я все испортил, в моем тестировании все работает нормально.Кроме того, единственный способ, который я мог придумать, чтобы определить тип array состоял в том, чтобы проверить наличие length.Поскольку Javascript действительно хранит массивы как объекты, я не могу на самом деле проверить тип array (такого типа не существует!).Если кто-то еще знает способ получше, я был бы рад его услышать.Потому что, если у вашего объекта также есть свойство с именем length тогда эта функция ошибочно обработает его как массив.
Редактировать:Добавлена проверка объектов с нулевым значением.Спасибо , Брок Адамс
Редактировать:Ниже приведена фиксированная функция, позволяющая печатать бесконечно рекурсивные объекты.При этом выводится не то же самое, что toSource из FF , потому что toSource выведет бесконечную рекурсию один раз, где as, эта функция немедленно уничтожит ее.Эта функция работает медленнее, чем приведенная выше, поэтому я добавляю ее здесь вместо редактирования вышеупомянутой функции, поскольку она необходима только в том случае, если вы планируете передавать куда-либо объекты, которые ссылаются сами на себя.
const ObjToSource=(o)=> {
if (!o) return null;
let str="",na=0,k,p;
if (typeof(o) == "object") {
if (!ObjToSource.check) ObjToSource.check = new Array();
for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
ObjToSource.check.push(o);
}
k="",na=typeof(o.length)=="undefined"?1:0;
for(p in o){
if (na) k = "'"+p+"':";
if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
else str += k+o[p]+",";
}
if (typeof(o) == "object") ObjToSource.check.pop();
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
Тест:
var test1 = new Object();
test1.foo = 1;
test1.bar = 2;
var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;
console.log(ObjToSource(testobject));
console.log(testobject.toSource());
Результат:
{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})
ПРИМЕЧАНИЕ:Пытаюсь напечатать document.body это ужасный пример.Во-первых, FF просто печатает пустую строку объекта при использовании toSource.И при использовании функции, описанной выше, FF выходит из строя при SecurityError: The operation is insecure..И Chrome выйдет из строя на Uncaught RangeError: Maximum call stack size exceeded.Ясно, document.body не предназначался для преобразования в строку.Потому что он либо слишком велик, либо противоречит политике безопасности для доступа к определенным свойствам.Если только я здесь что-то не напутал, обязательно скажите!
Мне нужен был способ рекурсивной печати объекта, который предоставил ответ pagewil (спасибо!).Я немного обновил его, чтобы включить способ печати до определенного уровня и добавить интервал, чтобы в нем был правильный отступ в зависимости от текущего уровня, на котором мы находимся, чтобы он был более читабельным.
// Recursive print of object
var print = function( o, maxLevel, level ) {
if ( typeof level == "undefined" ) {
level = 0;
}
if ( typeof level == "undefined" ) {
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 ) {
str = '<pre>';
}
var levelStr = '';
for ( var x = 0; x < level; x++ ) {
levelStr += ' ';
}
if ( maxLevel != 0 && level >= maxLevel ) {
str += levelStr + '...</br>';
return str;
}
for ( var p in o ) {
if ( typeof o[p] == 'string' ) {
str += levelStr +
p + ': ' + o[p] + ' </br>';
} else {
str += levelStr +
p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 ) {
str += '</pre>';
}
return str;
};
Использование:
var pagewilsObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
// Recursive of whole object
$('body').append( print(pagewilsObject) );
// Recursive of myObject up to 1 level, will only show name
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) );
Просто используйте
JSON.stringify(obj)
Пример
var args_string = JSON.stringify(obj);
console.log(args_string);
Или
alert(args_string);
Также обратите внимание, что в javascript функции рассматриваются как объекты.
На самом деле вы можете назначить новое свойство следующим образом
foo.moo = "stackoverflow";
console.log(foo.moo);
Примечание:В этих примерах yourObj определяет объект, который вы хотите изучить.
Во-первых, мой наименее любимый, но наиболее используемый способ отображения объекта:
Это дефактный способ отображения содержимого объекта
console.log(yourObj)
произведет что-то вроде :
Я думаю, что лучшее решение - просмотреть ключи объектов, а затем значения объектов, если вы действительно хотите увидеть, что содержит объект...
console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));
Это выведет что-то вроде :
(на фото выше:ключи / значения, хранящиеся в объекте)
Существует также эта новая опция, если вы используете ECMAScript 2016 или новее:
Object.keys(yourObj).forEach(e => console.log(`key=${e} value=${yourObj[e]}`));
Это приведет к аккуратному результату :
Решение, упомянутое в предыдущем ответе: console.log(yourObj) отображает слишком много параметров и это не самый удобный способ отображения нужных вам данных.Вот почему я рекомендую регистрировать ключи, а затем значения отдельно.
Следующий шаг :
console.table(yourObj)
Кто-то в более раннем комментарии предложил этот вариант, однако у меня он никогда не работал.Если это работает для кого-то другого в другом браузере или что-то в этом роде, тогда слава богу!Я все равно помещу код сюда для справки!Выведет что-то вроде этого на консоль :
Вот способ сделать это:
console.log("%o", obj);
Самый простой способ:
console.log(obj);
Или с сообщением:
console.log("object is: %O", obj);
Первый передаваемый вами объект может содержать один или несколько спецификаторов формата.Спецификатор формата состоит из знака процента (%), за которым следует буква, указывающая применяемое форматирование.
Я всегда использую console.log("object will be: ", obj, obj1).таким образом, мне не нужно выполнять обходной путь с помощью stringify с помощью JSON.Все свойства объекта будут приятно расширены.
Другим способом отображения объектов в консоли является использование JSON.stringify.Оформите заказ в приведенном ниже примере:
var gandalf = {
"real name": "Gandalf",
"age (est)": 11000,
"race": "Maia",
"haveRetirementPlan": true,
"aliases": [
"Greyhame",
"Stormcrow",
"Mithrandir",
"Gandalf the Grey",
"Gandalf the White"
]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
где object это ваш объект
или вы можете использовать это в Chrome dev tools, вкладка "консоль":
console.log(object);
Предполагаемый объект obj = {0:'John', 1:'Foo', 2:'Bar'}
Печать содержимого объекта
for (var i in obj){
console.log(obj[i], i);
}
Консольный вывод (Chrome DevTools) :
John 0
Foo 1
Bar 2
Надеюсь, это поможет!
Функция Javascript
<script type="text/javascript">
function print_r(theObj){
if(theObj.constructor == Array || theObj.constructor == Object){
document.write("<ul>")
for(var p in theObj){
if(theObj[p].constructor == Array || theObj[p].constructor == Object){
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
document.write("<ul>")
print_r(theObj[p]);
document.write("</ul>")
} else {
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
}
}
document.write("</ul>")
}
}
</script>
Печатающий объект
<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script>
через print_r в Javascript
Небольшая вспомогательная функция, которую я всегда использую в своих проектах для простой и быстрой отладки через консоль.Вдохновение взято из Laravel.
/**
* @param variable mixed The var to log to the console
* @param varName string Optional, will appear as a label before the var
*/
function dd(variable, varName) {
var varNameOutput;
varName = varName || '';
varNameOutput = varName ? varName + ':' : '';
console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}
Использование
dd(123.55); результаты:
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
Я предпочитаю использовать console.table чтобы получить четкий формат объекта, представьте, что у вас есть этот объект:
const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};
И вы увидите аккуратную и читабельную таблицу, подобную приведенной ниже:
я использовал метод печати pagewil, и он работал очень хорошо.
вот моя слегка расширенная версия с (неаккуратными) отступами и различными разделителями prop / ob:
var print = function(obj, delp, delo, ind){
delp = delp!=null ? delp : "\t"; // property delimeter
delo = delo!=null ? delo : "\n"; // object delimeter
ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
var str='';
for(var prop in obj){
if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
}else{
str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
}
}
return str;
};
Еще одна модификация кода pagewils...он не выводит ничего, кроме строк, и оставляет поля number и boolean пустыми, и я исправил опечатку во втором typeof только внутри функции, созданной megaboss.
var print = function( o, maxLevel, level )
{
if ( typeof level == "undefined" )
{
level = 0;
}
if ( typeof maxlevel == "undefined" )
{
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 )
{
str = '<pre>'; // can also be <pre>
}
var levelStr = '<br>';
for ( var x = 0; x < level; x++ )
{
levelStr += ' '; // all those spaces only work with <pre>
}
if ( maxLevel != 0 && level >= maxLevel )
{
str += levelStr + '...<br>';
return str;
}
for ( var p in o )
{
switch(typeof o[p])
{
case 'string':
case 'number': // .tostring() gets automatically applied
case 'boolean': // ditto
str += levelStr + p + ': ' + o[p] + ' <br>';
break;
case 'object': // this is where we become recursive
default:
str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
break;
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 )
{
str += '</pre>'; // also can be </pre>
}
return str;
};
Вот функция.
function printObj(obj) {
console.log((function traverse(tab, obj) {
let str = "";
if(typeof obj !== 'object') {
return obj + ',';
}
if(Array.isArray(obj)) {
return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
}
str = str + '{\n';
for(var p in obj) {
str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
}
str = str.slice(0,-2) + str.slice(-1);
str = str + tab + '},';
return str;
}('',obj).slice(0,-1)))};
Он может отображать объект с помощью отступа табуляции с удобочитаемостью.
