如何访问JavaScript对象的属性？

while review a javascript coding, i saw that

在审查javascript编码时,我看到了

var detailInf = {
  "hTitle":"Results",
  "hMark":"98"
};

What's the concept behind this js coding. While give alert for the variable its shows as "[object Object]". So this is an object, then how can we access the variable and reveal the data from this object.

这个js编码背后的概念是什么?同时警告变量显示为“[object Object]”。所以这是一个对象,那么我们如何访问变量并显示该对象的数据。

4 个解决方案

#1

That's an object in JSON format . That's a javascript object literal. Basically, the bits to the left of the :'s are the property names, and the bits to the right are the property values. So, what you have there is a variable called detailInf, that has two properties, hTitle and hMark. hTitle's value is Results, hMark's value is 98.

这是JSON格式的对象。这是一个javascript对象文字。基本上,:'s左边的位是属性名称,右边的​​位是属性值。那么,你有一个名为detailInf的变量,它有两个属性,hTitle和hMark。 hTitle的值是结果,hMark的值是98。

var detailInf = { "hTitle":"Results", "hMark":"98"};
alert(detailInf.hTitle); //should alert "Results"
alert(detailInf.hMark); //should alert "98

Edit Paolo's answer is better :-)

编辑Paolo的答案更好:-)

#2

Try doing this:

试着这样做:

alert(detailInf['hTitle']);
alert(detailInf.hTitle);

Both will alert "Results" - this is a Javascript object that can be used as a dictionary of sorts.

两者都会提醒“结果” - 这是一个Javascript对象,可以用作各种字典。

Required reading: Objects as associative arrays

必读:对象作为关联数组

As a footnote, you should really get Firebug when messing around with Javascript. You could then just console.log(detailInf); and you would get a nicely mapped out display of the object in the console.

作为一个脚注,当你搞乱Javascript时,你应该真的得到Firebug。然后你可以只是console.log(detailInf);并且您将在控制台中获得对象的良好映射显示。

#3

That form of a JavaScript object is called an object literal, just like there are array literals. For example, the following two array declarations are identical:

这种形式的JavaScript对象称为对象文字,就像有数组文字一样。例如,以下两个数组声明是相同的:

var a = [1, 2, 3];          // array literal
var b = new Array(1, 2, 3); // using the Array constructor

Just as above, an object may be declared in multiple ways. One of them is object literal in which you declare the properties along with the object:

如上所述,可以以多种方式声明对象。其中一个是对象文字,您可以在其中声明属性以及对象:

var o = {property: "value"}; // object literal

Is equivalent to:

相当于:

var o = new Object; // using the Object constructor
o.property = "value";

Objects may also be created from constructor functions. Like so:

也可以从构造函数创建对象。像这样:

var Foo = function() {
    this.property = "value";
};

var o = new Foo;

Adding methods

As I said in a comment a few moments ago, this form of declaring a JavaScript object is not a JSON format. JSON is a data format and does not allow functions as values. That means the following is a valid JavaScript object literal, but not a valid JSON format:

正如我刚才在评论中所说,这种声明JavaScript对象的形式不是JSON格式。 JSON是一种数据格式,不允许函数作为值。这意味着以下是有效的JavaScript对象文字,但不是有效的JSON格式:

var user = {
    age : 16,

    // this is a method
    isAdult : function() {
        // the object is referenced by the special variable: this
        return this.age >= 18;
    }
};

Also, the name of the properties need not be enclosed inside quotes. This is however required in JSON. In JavaScript we enclose them in brackets where the property name is a reserved word, like class, while and others. So the following are also equivalent:

此外,属性的名称不必括在引号内。但是,这在JSON中是必需的。在JavaScript中,我们将它们括在括号中,其中属性名称是保留字,如class,while等。所以以下也是等价的:

var o = {
    property : "value",
};

var o = {
    "property" : "value",
};

Further more, the keys may also be numbers:

此外,键也可以是数字:

var a = {
    0 : "foo",
    1 : "bar",
    2 : "abz"
};

alert(a[1]); // bar

Array-like objects

Now, if the above object would have also a length property, it will be an array like object:

现在,如果上面的对象也有一个length属性,它将是一个像object这样的数组:

var arrayLike = {
    0 : "foo",
    1 : "bar",
    2 : "baz",

    length : 3
};

Array-like means it can be easily iterated with normal iteration constructs (for, while). However, you cannot apply array methods on it. Like array.slice(). But this is another topic.

类似数组意味着它可以使用正常的迭代结构(for,while)轻松迭代。但是,您无法在其上应用数组方法。像array.slice()。但这是另一个话题。

Square Bracket Notation

As Paolo Bergantino already said, you may access an object's properties using both the dot notation, as well as the square bracket notation. For example:

正如Paolo Bergantino所说,您可以使用点表示法以及方括号表示法访问对象的属性。例如:

var o = {
    property : "value"
};

o.property;
o["property"];

When would you want to use one over the other? People use square bracket notation when the property names is dynamically determined, like so:

你什么时候想要使用另一个?当动态确定属性名称时,人们使用方括号表示法,如下所示:

var getProperty = function(object, property) {
    return object[property];
};

Or when the property name is a JavaScript reserved word, for example while.

或者当属性名称是JavaScript保留字时,例如while。

object["while"];
object.while; // error

#4

As Dan F says, that is an object in JSON format. To loop through all the properties of an object you can do:

正如Dan F所说,这是一个JSON格式的对象。要遍历对象的所有属性,您可以执行以下操作:

for (var i in foo) {
    alert('foo[' + i + ']: ' + foo[i]);
}