Chúng ta cần xem các phương thức / trường mà một đối tượng có trong Javascript.
Chúng ta cần xem các phương thức / trường mà một đối tượng có trong Javascript.
Câu trả lời:
Như những người khác đã nói, bạn có thể sử dụng Fireorms và điều đó sẽ giúp bạn không phải lo lắng về Firefox. Cả Chrome & Safari đều có bảng điều khiển dành cho nhà phát triển tích hợp có giao diện gần như giống hệt với bảng điều khiển của Fireorms, vì vậy mã của bạn phải được di chuyển trên các trình duyệt đó. Đối với các trình duyệt khác, có Fireorms Lite .
Nếu Fireorms không phải là một lựa chọn cho bạn, thì hãy thử tập lệnh đơn giản này:
function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
alert(out);
// or, if you wanted to avoid alerts...
var pre = document.createElement('pre');
pre.innerHTML = out;
document.body.appendChild(pre)
}
Tôi khuyên bạn không nên cảnh báo cho từng tài sản riêng lẻ: một số đối tượng có RẤT NHIỀU tài sản và bạn sẽ ở đó cả ngày nhấp vào "OK", "OK", "OK", "O ... chết tiệt đó là tài sản tôi đã tìm kiếm".
Nếu bạn đang sử dụng firefox thì bảng điều khiển trình cắm thêm fireorms là một cách tuyệt vời để kiểm tra các đối tượng
console.debug(myObject);
Ngoài ra, bạn có thể lặp qua các thuộc tính (bao gồm các phương thức) như thế này:
for (property in object) {
// do what you want with property, object[property].value
}
Rất nhiều trình duyệt hiện đại hỗ trợ cú pháp sau:
JSON.stringify(myVar);
console.
tùy chọn, điều này chỉ hiển thị nội dung của biến, nó không gắn nhãn cho biến, vì vậy nếu bạn kết xuất một loạt các biến, bạn phải gắn nhãn thủ công cho từng biến. :-(
Không thể nói đủ rằng bạn có thể sử dụng console.debug (object) cho việc này. Kỹ thuật này sẽ giúp bạn tiết kiệm hàng trăm giờ mỗi năm nếu bạn làm việc này để kiếm sống: p
console.debug({object})
. Nếu bạn cần nhiều : console.debug({object1, object2})
.
Để trả lời câu hỏi từ ngữ cảnh của tiêu đề của câu hỏi này, đây là một hàm thực hiện một cái gì đó tương tự như var_dump PHP. Nó chỉ loại bỏ một biến cho mỗi cuộc gọi, nhưng nó chỉ ra kiểu dữ liệu cũng như giá trị và nó lặp lại thông qua các mảng và đối tượng [ngay cả khi chúng là Mảng của các Đối tượng và ngược lại]. Tôi chắc chắn rằng điều này có thể được cải thiện. Tôi là một chàng trai PHP hơn.
/**
* Does a PHP var_dump'ish behavior. It only dumps one variable per call. The
* first parameter is the variable, and the second parameter is an optional
* name. This can be the variable name [makes it easier to distinguish between
* numerious calls to this function], but any string value can be passed.
*
* @param mixed var_value - the variable to be dumped
* @param string var_name - ideally the name of the variable, which will be used
* to label the dump. If this argumment is omitted, then the dump will
* display without a label.
* @param boolean - annonymous third parameter.
* On TRUE publishes the result to the DOM document body.
* On FALSE a string is returned.
* Default is TRUE.
* @returns string|inserts Dom Object in the BODY element.
*/
function my_dump (var_value, var_name)
{
// Check for a third argument and if one exists, capture it's value, else
// default to TRUE. When the third argument is true, this function
// publishes the result to the document body, else, it outputs a string.
// The third argument is intend for use by recursive calls within this
// function, but there is no reason why it couldn't be used in other ways.
var is_publish_to_body = typeof arguments[2] === 'undefined' ? true:arguments[2];
// Check for a fourth argument and if one exists, add three to it and
// use it to indent the out block by that many characters. This argument is
// not intended to be used by any other than the recursive call.
var indent_by = typeof arguments[3] === 'undefined' ? 0:arguments[3]+3;
var do_boolean = function (v)
{
return 'Boolean(1) '+(v?'TRUE':'FALSE');
};
var do_number = function(v)
{
var num_digits = (''+v).length;
return 'Number('+num_digits+') '+v;
};
var do_string = function(v)
{
var num_chars = v.length;
return 'String('+num_chars+') "'+v+'"';
};
var do_object = function(v)
{
if (v === null)
{
return "NULL(0)";
}
var out = '';
var num_elem = 0;
var indent = '';
if (v instanceof Array)
{
num_elem = v.length;
for (var d=0; d<indent_by; ++d)
{
indent += ' ';
}
out = "Array("+num_elem+") \n"+(indent.length === 0?'':'|'+indent+'')+"(";
for (var i=0; i<num_elem; ++i)
{
out += "\n"+(indent.length === 0?'':'|'+indent)+"| ["+i+"] = "+my_dump(v[i],'',false,indent_by);
}
out += "\n"+(indent.length === 0?'':'|'+indent+'')+")";
return out;
}
else if (v instanceof Object)
{
for (var d=0; d<indent_by; ++d)
{
indent += ' ';
}
out = "Object \n"+(indent.length === 0?'':'|'+indent+'')+"(";
for (var p in v)
{
out += "\n"+(indent.length === 0?'':'|'+indent)+"| ["+p+"] = "+my_dump(v[p],'',false,indent_by);
}
out += "\n"+(indent.length === 0?'':'|'+indent+'')+")";
return out;
}
else
{
return 'Unknown Object Type!';
}
};
// Makes it easier, later on, to switch behaviors based on existance or
// absence of a var_name parameter. By converting 'undefined' to 'empty
// string', the length greater than zero test can be applied in all cases.
var_name = typeof var_name === 'undefined' ? '':var_name;
var out = '';
var v_name = '';
switch (typeof var_value)
{
case "boolean":
v_name = var_name.length > 0 ? var_name + ' = ':''; // Turns labeling on if var_name present, else no label
out += v_name + do_boolean(var_value);
break;
case "number":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + do_number(var_value);
break;
case "string":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + do_string(var_value);
break;
case "object":
v_name = var_name.length > 0 ? var_name + ' => ':'';
out += v_name + do_object(var_value);
break;
case "function":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + "Function";
break;
case "undefined":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + "Undefined";
break;
default:
out += v_name + ' is unknown type!';
}
// Using indent_by to filter out recursive calls, so this only happens on the
// primary call [i.e. at the end of the algorithm]
if (is_publish_to_body && indent_by === 0)
{
var div_dump = document.getElementById('div_dump');
if (!div_dump)
{
div_dump = document.createElement('div');
div_dump.id = 'div_dump';
var style_dump = document.getElementsByTagName("style")[0];
if (!style_dump)
{
var head = document.getElementsByTagName("head")[0];
style_dump = document.createElement("style");
head.appendChild(style_dump);
}
// Thank you Tim Down [http://stackoverflow.com/users/96100/tim-down]
// for the following addRule function
var addRule;
if (typeof document.styleSheets != "undefined" && document.styleSheets) {
addRule = function(selector, rule) {
var styleSheets = document.styleSheets, styleSheet;
if (styleSheets && styleSheets.length) {
styleSheet = styleSheets[styleSheets.length - 1];
if (styleSheet.addRule) {
styleSheet.addRule(selector, rule)
} else if (typeof styleSheet.cssText == "string") {
styleSheet.cssText = selector + " {" + rule + "}";
} else if (styleSheet.insertRule && styleSheet.cssRules) {
styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
}
}
};
} else {
addRule = function(selector, rule, el, doc) {
el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
};
}
// Ensure the dump text will be visible under all conditions [i.e. always
// black text against a white background].
addRule('#div_dump', 'background-color:white', style_dump, document);
addRule('#div_dump', 'color:black', style_dump, document);
addRule('#div_dump', 'padding:15px', style_dump, document);
style_dump = null;
}
var pre_dump = document.getElementById('pre_dump');
if (!pre_dump)
{
pre_dump = document.createElement('pre');
pre_dump.id = 'pre_dump';
pre_dump.innerHTML = out+"\n";
div_dump.appendChild(pre_dump);
document.body.appendChild(div_dump);
}
else
{
pre_dump.innerHTML += out+"\n";
}
}
else
{
return out;
}
}
console.dir (về phía dưới cùng của trang được liên kết) trong trình duyệt lửa hoặc trình kiểm tra web google-chrome sẽ đưa ra một danh sách tương tác các thuộc tính của đối tượng.
Xem thêm câu trả lời Stack-O này
Bạn muốn xem toàn bộ đối tượng (tất cả các cấp độ của các đối tượng và các biến bên trong nó) ở dạng JSON. JSON là viết tắt của Ký hiệu đối tượng JavaScript và in ra một chuỗi JSON của đối tượng của bạn tương đương với var_dump
(để có được biểu diễn chuỗi của một đối tượng JavaScript). May mắn thay, JSON rất dễ sử dụng trong mã và định dạng dữ liệu JSON cũng khá dễ đọc với con người.
Thí dụ:
var objectInStringFormat = JSON.stringify(someObject);
alert(objectInStringFormat);
Nếu bạn sử dụng Fireorms, bạn có thể sử dụng console.log để xuất một đối tượng và nhận một mục siêu liên kết, có thể khám phá trong bảng điều khiển.
Một chút cải tiến về chức năng của nickf dành cho những người không biết loại biến đến:
function dump(v) {
switch (typeof v) {
case "object":
for (var i in v) {
console.log(i+":"+v[i]);
}
break;
default: //number, string, boolean, null, undefined
console.log(typeof v+":"+v);
break;
}
}
Tôi đã cải thiện câu trả lời của nickf, vì vậy nó lặp vòng lặp qua các đối tượng:
function var_dump(obj, element)
{
var logMsg = objToString(obj, 0);
if (element) // set innerHTML to logMsg
{
var pre = document.createElement('pre');
pre.innerHTML = logMsg;
element.innerHTML = '';
element.appendChild(pre);
}
else // write logMsg to the console
{
console.log(logMsg);
}
}
function objToString(obj, level)
{
var out = '';
for (var i in obj)
{
for (loop = level; loop > 0; loop--)
{
out += " ";
}
if (obj[i] instanceof Object)
{
out += i + " (Object):\n";
out += objToString(obj[i], level + 1);
}
else
{
out += i + ": " + obj[i] + "\n";
}
}
return out;
}
console.log(OBJECT|ARRAY|STRING|...);
console.info(OBJECT|ARRAY|STRING|...);
console.debug(OBJECT|ARRAY|STRING|...);
console.warn(OBJECT|ARRAY|STRING|...);
console.assert(Condition, 'Message if false');
Các tính năng này phải hoạt động chính xác Trên Google Chrome và Mozilla Firefox (nếu bạn đang chạy với phiên bản cũ của firefox, vì vậy bạn phải cài đặt plugin Fireorms)
Trên Internet Explorer 8 trở lên, bạn phải làm như sau:
Để biết thêm thông tin, bạn có thể truy cập URL này: https://developer.chrome.com/devtools/docs/console-api
Bạn chỉ có thể sử dụng gói var_dump NPM
npm install var_dump --save-dev
Sử dụng:
const var_dump = require('var_dump')
var variable = {
'data': {
'users': {
'id': 12,
'friends': [{
'id': 1,
'name': 'John Doe'
}]
}
}
}
// print the variable using var_dump
var_dump(variable)
Điều này sẽ in:
object(1) {
["data"] => object(1) {
["users"] => object(2) {
["id"] => number(12)
["friends"] => array(1) {
[0] => object(2) {
["id"] => number(1)
["name"] => string(8) "John Doe"
}
}
}
}
}
Liên kết: https://www.npmjs.com/package/@smartankur4u/vardump
Cảm ơn tôi sau!
Nếu bạn đang tìm kiếm hàm PHP được chuyển đổi trong JS, thì có trang web nhỏ này: http://phpjs.org . Ở đó bạn có thể nhận được hầu hết các hàm PHP được viết một cách đáng tin cậy trong JS. đối với var_dump, hãy thử: http://phpjs.org/fifts/var_dump/ (đảm bảo kiểm tra nhận xét hàng đầu, điều này phụ thuộc vào "echo", cũng có thể được tải xuống từ cùng một trang)
Tôi đã sử dụng câu trả lời đầu tiên, nhưng tôi cảm thấy thiếu một đệ quy trong đó.
Kết quả là thế này:
function dump(obj) {
var out = '';
for (var i in obj) {
if(typeof obj[i] === 'object'){
dump(obj[i]);
}else{
out += i + ": " + obj[i] + "\n";
}
}
var pre = document.createElement('pre');
pre.innerHTML = out;
document.body.appendChild(pre);
}
Dựa trên các chức năng trước đây được tìm thấy trong bài viết này. Thêm chế độ đệ quy và thụt đầu dòng.
function dump(v, s) {
s = s || 1;
var t = '';
switch (typeof v) {
case "object":
t += "\n";
for (var i in v) {
t += Array(s).join(" ")+i+": ";
t += dump(v[i], s+3);
}
break;
default: //number, string, boolean, null, undefined
t += v+" ("+typeof v+")\n";
break;
}
return t;
}
Thí dụ
var a = {
b: 1,
c: {
d:1,
e:2,
d:3,
c: {
d:1,
e:2,
d:3
}
}
};
var d = dump(a);
console.log(d);
document.getElementById("#dump").innerHTML = "<pre>" + d + "</pre>";
Kết quả
b: 1 (number)
c:
d: 3 (number)
e: 2 (number)
c:
d: 3 (number)
e: 2 (number)
Sau đây là var_dump / print_r yêu thích của tôi tương đương trong Javascript với PHPvar_dump
.
function dump(arr,level) {
var dumped_text = "";
if(!level) level = 0;
//The padding given at the beginning of the line.
var level_padding = "";
for(var j=0;j<level+1;j++) level_padding += " ";
if(typeof(arr) == 'object') { //Array/Hashes/Objects
for(var item in arr) {
var value = arr[item];
if(typeof(value) == 'object') { //If it is an array,
dumped_text += level_padding + "'" + item + "' ...\n";
dumped_text += dump(value,level+1);
} else {
dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
}
}
} else { //Stings/Chars/Numbers etc.
dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
}
return dumped_text;
}
Cuối trò chơi, nhưng đây là một chức năng thực sự tiện dụng, cực kỳ đơn giản để sử dụng, cho phép bạn truyền bao nhiêu đối số tùy thích, và sẽ hiển thị nội dung đối tượng trong cửa sổ bảng điều khiển trình duyệt như bạn gọi là bảng điều khiển. đăng nhập từ JavaScript - nhưng từ PHP
Lưu ý, bạn cũng có thể sử dụng các thẻ bằng cách chuyển 'TAG-YourTag' và nó sẽ được áp dụng cho đến khi một thẻ khác được đọc, ví dụ: 'TAG-YourNextTag'
/*
* Brief: Print to console.log() from PHP
* Description: Print as many strings,arrays, objects, and other data types to console.log from PHP.
* To use, just call consoleLog($data1, $data2, ... $dataN) and each dataI will be sent to console.log - note that
* you can pass as many data as you want an this will still work.
*
* This is very powerful as it shows the entire contents of objects and arrays that can be read inside of the browser console log.
*
* A tag can be set by passing a string that has the prefix TAG- as one of the arguments. Everytime a string with the TAG- prefix is
* detected, the tag is updated. This allows you to pass a tag that is applied to all data until it reaches another tag, which can then
* be applied to all data after it.
*
* Example:
* consoleLog('TAG-FirstTag',$data,$data2,'TAG-SecTag,$data3);
* Result:
* FirstTag '...data...'
* FirstTag '...data2...'
* SecTag '...data3...'
*/
function consoleLog(){
if(func_num_args() == 0){
return;
}
$tag = '';
for ($i = 0; $i < func_num_args(); $i++) {
$arg = func_get_arg($i);
if(!empty($arg)){
if(is_string($arg)&& strtolower(substr($arg,0,4)) === 'tag-'){
$tag = substr($arg,4);
}else{
$arg = json_encode($arg, JSON_HEX_TAG | JSON_HEX_AMP );
echo "<script>console.log('".$tag." ".$arg."');</script>";
}
}
}
}
LƯU Ý: func_num_args () và func_num_args () là các hàm php để đọc số lượng đối số đầu vào động và cho phép hàm này có vô số yêu cầu console.log từ một lệnh gọi hàm
debug
div): james.padolsey.com/javascript/prettyprint-for- javascript