Làm cách nào để lấy thuộc tính của một đối tượng trong JavaScript / jQuery?

Trong JavaScript / jQuery, nếu tôi alertphản đối, tôi sẽ nhận được [object]hoặc [object Object]

Có cách nào để biết:

1. sự khác biệt giữa hai đối tượng này là gì

2. Đây là loại đối tượng nào

3. đối tượng này chứa tất cả thuộc tính gì và giá trị của từng thuộc tính

?

Bạn có thể tra cứu các khóa và giá trị của đối tượng bằng cách gọi for invòng lặp gốc của JavaScript :

var obj = {
    foo:    'bar',
    base:   'ball'
};

for(var key in obj) {
    alert('key: ' + key + '\n' + 'value: ' + obj[key]);
}

hoặc sử dụng .each()phương thức của jQuery :

$.each(obj, function(key, element) {
    alert('key: ' + key + '\n' + 'value: ' + element);
});

Ngoại trừ sáu kiểu nguyên thủy , mọi thứ trong ECMA- / JavaScript đều là một đối tượng. Mảng; chức năng; mọi thứ là một đối tượng. Ngay cả hầu hết các nguyên thủy đó cũng là các đối tượng với một số phương thức lựa chọn hạn chế. Chúng được đúc thành các vật thể dưới mui xe, khi được yêu cầu. Để biết tên lớp cơ sở, bạn có thể gọi Object.prototype.toStringphương thức trên một đối tượng, như sau:

alert(Object.prototype.toString.call([]));

Ở trên sẽ xuất ra [object Array].

Có một số tên lớp khác, như [object Object], [object Function], [object Date], [object String], [object Number], [object Array], và [object Regex].

Để có được danh sách các thuộc tính / giá trị của đối tượng:

1. Trong Firefox - Firebug:

   console.dir(<object>);

2. JS tiêu chuẩn để lấy các khóa đối tượng mượn từ Slashnick :

      var fGetKeys = function(obj){
         var keys = [];
         for(var key in obj){
            keys.push(key);
         }
         return keys;
      }
   
   // Example to call it:
   
      var arrKeys = fGetKeys(document);
   
      for (var i=0, n=arrKeys.length; i<n; i++){
         console.log(i+1 + " - " + arrKeys[i] + document[arrKeys[i]] + "\n");
      }

Chỉnh sửa:

1. <object> ở trên sẽ được thay thế bằng tham chiếu biến tới đối tượng.
2. console.log() sẽ được sử dụng trong bảng điều khiển, nếu bạn không chắc đó là gì, bạn có thể thay thế nó bằng alert()

i) sự khác biệt giữa hai đối tượng này là gì

Câu trả lời đơn giản là [object]chỉ ra một đối tượng máy chủ không có lớp bên trong. Đối tượng máy chủ lưu trữ là một đối tượng không phải là một phần của triển khai ECMAScript mà bạn đang làm việc, nhưng được máy chủ cung cấp dưới dạng một phần mở rộng. DOM là một ví dụ phổ biến của các đối tượng máy chủ, mặc dù trong hầu hết các triển khai mới hơn, các đối tượng DOM kế thừa từ Đối tượng gốc và có tên lớp bên trong (chẳng hạn như HTMLElement , Window , v.v.). ActiveXObject độc quyền của IE là một ví dụ khác về đối tượng máy chủ.

[object] thường thấy nhất khi cảnh báo các đối tượng DOM trong Internet Explorer 7 trở xuống, vì chúng là các đối tượng máy chủ lưu trữ không có tên lớp bên trong.

ii) loại Đối tượng này là gì

Bạn có thể lấy "loại" (lớp bên trong) của đối tượng bằng cách sử dụng Object.prototype.toString. Đặc tả yêu cầu nó luôn trả về một chuỗi theo định dạng [object [[Class]]], ở đó [[Class]]là tên lớp bên trong như Đối tượng , Mảng , Ngày , RegExp , v.v. Bạn có thể áp dụng phương thức này cho bất kỳ đối tượng nào (bao gồm cả các đối tượng máy chủ), bằng cách sử dụng

Object.prototype.toString.apply(obj);

Nhiều isArraytriển khai sử dụng kỹ thuật này để khám phá xem một đối tượng có thực sự là một mảng hay không (mặc dù nó không mạnh trong IE như trong các trình duyệt khác ).

iii) đối tượng này chứa tất cả các thuộc tính và giá trị của mỗi thuộc tính

Trong ECMAScript 3, bạn có thể lặp qua các thuộc tính có thể liệt kê bằng cách sử dụng một for...invòng lặp. Lưu ý rằng hầu hết các thuộc tính tích hợp đều không thể liệt kê được. Điều này cũng đúng với một số đối tượng chủ. Trong ECMAScript 5, bạn có thể lấy một mảng chứa tên của tất cả các thuộc tính không kế thừa bằng cách sử dụng Object.getOwnPropertyNames(obj). Mảng này sẽ chứa các tên thuộc tính không liệt kê và có thể liệt kê.

Tôi hy vọng điều này không bị coi là thư rác. Tôi đã kết thúc một cách khiêm tốn khi viết một hàm sau các phiên gỡ lỗi liên tục: http://github.com/halilim/Javascript-Simple-Object-Inspect

function simpleObjInspect(oObj, key, tabLvl)
{
    key = key || "";
    tabLvl = tabLvl || 1;
    var tabs = "";
    for(var i = 1; i < tabLvl; i++){
        tabs += "\t";
    }
    var keyTypeStr = " (" + typeof key + ")";
    if (tabLvl == 1) {
        keyTypeStr = "(self)";
    }
    var s = tabs + key + keyTypeStr + " : ";
    if (typeof oObj == "object" && oObj !== null) {
        s += typeof oObj + "\n";
        for (var k in oObj) {
            if (oObj.hasOwnProperty(k)) {
                s += simpleObjInspect(oObj[k], k, tabLvl + 1);
            }
        }
    } else {
        s += "" + oObj + " (" + typeof oObj + ") \n";
    }
    return s;
}

Sử dụng

alert(simpleObjInspect(anyObject));

hoặc là

console.log(simpleObjInspect(anyObject));

Tải xuống FireBug cho Mozilla Firefox.

sử dụng console.log(obj);

Spotlight.js là một thư viện tuyệt vời để lặp lại đối tượng window và các đối tượng máy chủ khác để tìm kiếm những thứ nhất định.

// find all "length" properties
spotlight.byName('length');

// or find all "map" properties on jQuery
spotlight.byName('map', { 'object': jQuery, 'path': '$' });

// or all properties with `RegExp` values
spotlight.byKind('RegExp');

// or all properties containing "oo" in their name
spotlight.custom(function(value, key) { return key.indexOf('oo') > -1; });

Bạn sẽ thích nó cho điều này.

Đang quét đối tượng để tìm ý định đầu tiên của một hỗ trợ đã xác định:

var obj = {a:'Saludos',
            b:{b_1:{b_1_1:'Como estas?',b_1_2:'Un gusto conocerte'}},
           d:'Hasta luego'
            }
function scan (element,list){
    var res;
    if (typeof(list) != 'undefined'){
        if (typeof(list) == 'object'){
            for(key in list){
               if (typeof(res) == 'undefined'){
                res = (key == element)?list[key]:scan(element,list[key]);
               }
            });
        }
    }
    return res;
}
console.log(scan('a',obj));