如果我不知道名称,如何访问 javascript 对象的属性?
Posted
技术标签:
【中文标题】如果我不知道名称,如何访问 javascript 对象的属性?【英文标题】:How do I access properties of a javascript object if I don't know the names? 【发布时间】:2010-10-15 02:01:26 【问题描述】:假设你有一个这样的 javascript 对象:
var data = foo: 'bar', baz: 'quux' ;
您可以通过属性名称访问属性:
var foo = data.foo;
var baz = data["baz"];
但是,如果您不知道属性的名称,是否可以获得这些值?这些属性的无序性质是否无法区分它们?
在我的例子中,我特别考虑了一个函数需要接受一系列名称-值对,但属性的名称可能会改变的情况。
到目前为止,我对如何做到这一点的想法是将属性的名称与数据一起传递给函数,但这感觉就像一个 hack。如果可能的话,我更愿意通过内省来做到这一点。
【问题讨论】:
【参考方案1】:for(var property in data)
alert(property);
【讨论】:
【参考方案2】:您可以像这样遍历键:
for (var key in data)
console.log(key);
这会记录“名称”和“值”。
如果您有一个更复杂的对象类型(不仅仅是像原始问题中那样的普通哈希对象),您将只想循环访问属于对象本身的键,而不是对象的prototype:
for (var key in data)
if (data.hasOwnProperty(key))
console.log(key);
正如您所指出的,不保证密钥按任何特定顺序排列。请注意这与以下内容有何不同:
for each (var value in data)
console.log(value);
此示例循环遍历值,因此它会记录 Property Name
和 0
。 N.B.:for each
语法大多仅在 Firefox 中受支持,而在其他浏览器中不支持。
如果您的目标浏览器支持 ES5,或者您的网站包含es5-shim.js
(推荐),您也可以使用Object.keys
:
var data = Name: 'Property Name', Value: '0' ;
console.log(Object.keys(data)); // => ["Name", "Value"]
然后循环使用Array.prototype.forEach
:
Object.keys(data).forEach(function (key)
console.log(data[key]);
);
// => Logs "Property Name", 0
【讨论】:
你是不是刚做了最后一个然后真的侥幸成功了?干得好... =) 这存在于 Firefox (docs) 中,但公平的一点是它不是通用的。我会更新答案以提及这一点。 btw alert 是一种不好的调试方式,试试 console.log 这是问问题时的最佳答案,但我删除了复选标记,因为以后的 JS 版本提供了更好的工具。【参考方案3】:您经常需要检查对象实例的特定属性, 没有它所有的共享原型方法和属性:
Obj.prototype.toString= function()
var A= [];
for(var p in this)
if(this.hasOwnProperty(p))
A[A.length]= p+'='+this[p];
return A.join(', ');
【讨论】:
【参考方案4】:旧版本的 JavaScript (for..in 循环:
for (var key in data)
if (data.hasOwnProperty(key))
// do something with key
ES5 引入了Object.keys 和Array#forEach,这让这变得更容易了:
var data = foo: 'bar', baz: 'quux' ;
Object.keys(data); // ['foo', 'baz']
Object.keys(data).map(function(key) return data[key] ) // ['bar', 'quux']
Object.keys(data).forEach(function (key)
// do something with data[key]
);
ES2017 介绍了Object.values
和Object.entries
。
Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]
【讨论】:
现在这实际上回答了这个问题,干得好@Adam Lassek,做得很好。 同时使用“名称”和“值”作为对象键会产生误导。此函数仅返回列表中的键,而不返回值。 name1: 'value1', name2: 'value2' 将避免初学者混淆。对象.键(数据); // ['name1', 'name2'] @JamesNicholson 我同意,经过编辑以减少混乱。【参考方案5】:您可以使用Object.keys(),“它返回一个给定对象自己的可枚举属性名称的数组,其顺序与我们在正常循环中得到的顺序相同。”
您可以使用任何对象代替stats
:
var stats =
a: 3,
b: 6,
d: 7,
erijgolekngo: 35
/* this is the answer here */
for (var key in Object.keys(stats))
var t = Object.keys(stats)[key];
console.log(t + " value =: " + stats[t]);
【讨论】:
你能补充更多解释吗?Object.keys( stats )[key]
没有意义,永远是undefined
。【参考方案6】:
var attr, object_information='';
for(attr in object)
//Get names and values of propertys with style (name : value)
object_information += attr + ' : ' + object[attr] + '\n';
alert(object_information); //Show all Object
【讨论】:
这不会对已接受的答案增加任何内容,并以最不实用的方式呈现信息。而且它不考虑继承的属性。【参考方案7】:function getDetailedObject(inputObject)
var detailedObject = , properties;
do
properties = Object.getOwnPropertyNames( inputObject );
for (var o in properties)
detailedObject[properties[o]] = inputObject[properties[o]];
while ( inputObject = Object.getPrototypeOf( inputObject ) );
return detailedObject;
这将在一个新对象中获取所有属性及其值(继承或拥有,可枚举或不可枚举)。原始对象未受影响。现在可以使用遍历新对象
var obj = 'b': '4' ; //example object
var detailedObject = getDetailedObject(obj);
for(var o in detailedObject)
console.log('key: ' + o + ' value: ' + detailedObject[o]);
【讨论】:
【参考方案8】:var obj =
a: [1, 3, 4],
b: 2,
c: ['hi', 'there']
for(let r in obj) //for in loop iterates all properties in an object
console.log(r) ; //print all properties in sequence
console.log(obj[r]);//print all properties values
【讨论】:
这个答案提供了 OP 所需的内容,但对你在做什么以及为什么 OP 应该使用它进行一些描述会很好,也不要忘记.hasOwnProperty()
在使用 for in 时迭代一个对象。
谢谢,我同意 .hasOwnProperty() 迭代对象但它迭代检查条件但是使用它我们不能打印对象的所有属性。有错请指正。
hasOwnProperty()
方法返回一个boolean
,指示对象是否具有指定的属性作为它自己的属性(而不是继承它)。看到这个example以上是关于如果我不知道名称,如何访问 javascript 对象的属性?的主要内容,如果未能解决你的问题,请参考以下文章