Селектор CSS « General Sibling Combinator » может быть использован для того, что вы хотите:
E ~ F {
property: value;
}
Это соответствует любому элементу F
, которому предшествует E
].
С Firefox
Если вы хотите напечатать объект для целей отладки, я предлагаю вместо этого установить Firebug для Firefox и использовать код:
console.log(obj)
С Chrome
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
отобразится
console.log('My object : ' + obj)
Самый простой способ:
console.log(obj);
Или с сообщением:
console.log("object is: %O", obj);
Первый передаваемый вами объект может содержать один или несколько спецификаторов формата. Спецификатор формата состоит из знака процента (%), за которым следует буква, указывающая применяемое форматирование.
console.xxx()
! Спасибо.
– not2qubit
26 February 2018 в 11:30
console.log(JSON.stringify(obj))
Это приведет к печати строковой версии объекта. Поэтому вместо [object]
в качестве вывода вы получите содержимое объекта.
В NodeJS вы можете напечатать объект с помощью util.inspect(obj)
. Не забудьте указать глубину или у вас будет только мелкая печать объекта.
Если вы ищете что-то, что может вернуть префиксную строку любого объекта 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"
}
}
Он работает даже, если в вашем объекте есть функции.
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
Предположим, что объект 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
Надеюсь, что это поможет!
Я использовал метод печати pagewil, и он работал очень хорошо.
здесь моя небольшая расширенная версия с (sloppy) отступов и отдельными разделителями 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;
};
Если вы хотите использовать оповещение, чтобы напечатать свой объект, вы можете сделать это:
alert("myObject is " + myObject.toSource());
Он должен напечатать каждое свойство и соответствующее ему значение в строковом формате.
Небольшая вспомогательная функция, которую я всегда использую в своих проектах для простой и быстрой отладки через консоль. Вдохновение взято из 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) + ')');
}
Использование
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
Чтобы напечатать полный объект с помощью Node.js с цветами в качестве бонуса:
console.dir(object, {depth: null, colors: true})
Цвета, конечно, необязательны, «depth: null» будет печатать полный object.
Параметры не поддерживаются в браузерах.
Ссылки:
https://developer.mozilla.org/ ru / US / docs / Web / API / Console / dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
Вот функция.
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)))};
Он может отображать объект, используя вкладку tab с удобочитаемостью.
Мне нужен способ рекурсивной печати объекта, на который предоставлен ответ на страницу (спасибо!). Я немного обновил его, чтобы включить способ печати на определенный уровень, и добавить интервал так, чтобы он был правильно отступом на основе текущего уровня, в котором мы находимся, чтобы он был более читабельным.
// 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) );
Функция 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
Я всегда использую console.log("object will be: ", obj, obj1)
. таким образом, мне не нужно делать обходной путь с помощью строки с JSON. Все свойства объекта будут хорошо расширены.
(Это было добавлено в мою библиотеку в GitHub )
Переопределение колеса здесь! Ни одно из этих решений не работало для моей ситуации. Итак, я быстро усовершенствовал ответ страницы. Это не для печати на экран (через консоль, текстовое поле или что-то еще). Это, однако, для переноса данных. Эта версия, похоже, возвращает очень похожий результат, как toSource()
. Я не пробовал JSON.stringify
, но я предполагаю, что это примерно то же самое. Результатом этой функции является действительное объявление объекта Javascript.
Я бы не сомневался, что что-то подобное уже было на SO где-то, но было просто короче, чем потратить время на поиск прошлых ответов , И поскольку этот вопрос был моим лучшим хитом в google, когда я начал искать об этом; Я полагал, что это может помочь другим.
Во всяком случае результат этой функции будет представлять собой строковое представление вашего объекта, даже если ваш объект имеет встроенные объекты и массивы, и даже если эти объекты или массивы имеют еще больше внедренных объектов и массивов. (Я слышал, что вы любите пить? Итак, я кувал вашу машину с кулером, а потом, я кувал кулер кулером. Итак, ваш кулер может пить, а ваше прохладное.)
Массивы сохраняются с []
вместо {}
и, следовательно, не имеют пары ключ / значение, просто значения. Как обычные массивы. Поэтому они создаются как массивы.
Кроме того, вся строка (включая имена ключей) цитируется, это необязательно, если только эти строки не имеют специальных символов (например, пробела или косой черты). Но мне не хотелось обнаруживать это только для того, чтобы удалить некоторые кавычки, которые в противном случае все равно бы работали нормально.
Эта результирующая строка затем может быть использована с eval
или просто сбрасывать ее в переменную string , Таким образом, повторное создание объекта снова из текста.
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
, то эта функция будет ошибочно относиться к нему как к массиву.
EDIT: Добавлена проверка для объектов с нулевой оценкой. Спасибо Brock Adams
EDIT: Ниже фиксированная функция, позволяющая печатать бесконечно рекурсивные объекты. Это не печатает то же, что и 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
не предназначалось для преобразования в строку. Потому что он слишком большой или против политики безопасности для доступа к определенным свойствам. Если бы я не испортил что-то здесь, скажи!
ObjToSource(document.body)
.
– Brock Adams
29 December 2012 в 00:34
ObjToSource(document.body)
из-за бесконечной рекурсии. Даже document.body.toSource()
в FireFox возвращает пустой объект.
– Pimp Trizkit
29 December 2012 в 01:35
document.body
все еще не доступен для печати. Смотрите примечание.
– Pimp Trizkit
29 December 2012 в 03:57
document.body
был всего лишь ярлыком, чтобы указать на некоторые большие проблемы. Теперь вы исправили худшие из них, и я уже поддержал это. (Хотя, я полагаю, что другой подход может справиться с document.body
. Большинство ответов здесь также не преуспели бы в этом).
– Brock Adams
29 December 2012 в 04:17
Другая модификация кода pagewils ... его не печатает ничего, кроме строк, и оставляет число и логические поля пустыми, и я исправил опечатку на втором типе внутри функции, созданной 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 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);
Хорошо, Firefox (благодаря @Bojangles для получения подробной информации) имеет метод Object.toSource()
, который печатает объекты как JSON и function(){}
.
Этого достаточно для большинства целей отладки , Я думаю.
.toSource()
на самом деле только Firefox i>. Просто подумал, что дам тебе знать.
– Bojangles
26 August 2011 в 13:14
console.dir(object)
:
Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволяет использовать раскрывающиеся треугольники для изучения содержимого дочерних объектов.
Обратите внимание, что функция
console.dir()
является нестандартной. См. веб-документы MDN
Использовать собственный метод 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()
Ссылка на Справочник по API Mozilla и другие примеры.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Если вы столкнулись с этой ошибкой Javascript
"Uncaught TypeError: Converting circular structure to JSON"
, используйте пользовательский JSON.stringify replacer console.log
i.e. console.log(JSON.stringify(obj,null, 4));
– nilesh
30 December 2013 в 05:49
Другой способ отображения объектов в консоли - 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));
Если вы хотите напечатать объект своей полной длины, можете использовать
console.log (require ('util'). inspect (obj, {showHidden: false, depth: null})
blockquote>Если вы хотите напечатать объект, преобразовывая его в строку, тогда
console.log (JSON.stringify (obj));
blockquote>
JSON.stringify
при попытке конкатенации с помощью строкового объекта. Если вы используете console.log(object)
, он должен довольно распечатать содержимое объекта
– Satadru Biswas
1 August 2017 в 22:36
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
, где object
- ваш объект
, или вы можете использовать его в инструментах chrome dev, вкладке «console»:
console.log(object);
console.log(Object.keys(object));
, пока я знаю, что только печатает ключи свойств, для меня это достаточно для моих целей;)
– Wilson
5 August 2015 в 15:17
Если вы хотите видеть данные в табличном формате, вы можете использовать
console.table(obj);
Таблица может быть отсортирована, если вы щелкните по столбцу таблицы.
Вы также можете выбрать, что столбцы для отображения:
console.table(obj, ['firstName', 'lastName']);
Вы можете найти дополнительную информацию о console.table здесь
Используйте это:
console.log('print object: ' + JSON.stringify(session));
Функция:
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);
}
navigator
.
– someguy234
4 December 2014 в 01:30
console.log(obj1, obj2)
работает очень хорошо, поэтому вам не нужно вызыватьconsole.log()
для каждого объекта при регистрации нескольких переменных. Кроме того, всегда помните, чтобы удалить все такие вызовы в процессе производства, так как это приведет к поломке браузеров, которые его не реализуют (например, Internet Explorer). – Felix 22 April 2010 в 10:31console.log("id:"+obj);
не будет выводиться правильно, поскольку он выводит строку, как вы ее видите, вам нужно указать ее так:console.log("id:"); console.log(obj);
– Anriëtte Myburgh 5 March 2013 в 13:06