如何获得一个JavaScript对象的所有属性值(不知道键)?

如果有JavaScript对象:

var objects={...};

假设，它有超过50个属性，不知道属性名称(即不知道“键”)如何在循环中获得每个属性值?

784699 次浏览
小开
最佳答案

通过使用简单的for..in循环:

for(var key in objects) {
var value = objects[key];
}
小开

你可以循环遍历键:

foo = {one:1, two:2, three:3};
for (key in foo){
console.log("foo["+ key +"]="+ foo[key]);
}

将输出:

foo[one]=1
foo[two]=2
foo[three]=3
小开

在ECMAScript5使用

 keys = Object.keys(object);

否则，如果您的浏览器不支持它，请使用众所周知的for..in loop

for (key in object) {
// your code here
}
小开

下面是一个可重用的函数，用于将值放入数组中。它还考虑了原型。

Object.values = function (obj) {
var vals = [];
for( var key in obj ) {
if ( obj.hasOwnProperty(key) ) {
vals.push(obj[key]);
}
}
return vals;
}
小开

这取决于您必须支持的浏览器，可以通过多种方式实现。绝大多数浏览器都支持ECMAScript 5 (ES5)，但请注意，下面的许多示例使用Object.keys，这在IE <中是不可用的;9. 请看兼容性表。

ECMAScript 3 +

如果你必须支持旧版本的IE，那么这是你的选择:

for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var val = obj[key];
// use val
}
}

嵌套的if确保您不会枚举对象原型链中的属性(这是您几乎肯定想要的行为)。你必须使用

Object.prototype.hasOwnProperty.call(obj, key) // ok

而不是

obj.hasOwnProperty(key) // bad

因为ECMAScript 5+允许您使用Object.create(null)创建无原型对象，而这些对象将没有hasOwnProperty方法。不规范的代码也可能产生覆盖hasOwnProperty方法的对象。

ECMAScript 5 +

您可以在任何支持ECMAScript 5及以上版本的浏览器中使用这些方法。这些从对象中获取值，避免在原型链上枚举。obj是你的对象:

var keys = Object.keys(obj);


for (var i = 0; i < keys.length; i++) {
var val = obj[keys[i]];
// use val
}

如果你想要一些更紧凑的东西，或者你想要小心循环中的函数，那么Array.prototype.forEach是你的朋友:

Object.keys(obj).forEach(function (key) {
var val = obj[key];
// use val
});

下一个方法构建一个包含对象值的数组。这对于循环来说很方便。

var vals = Object.keys(obj).map(function (key) {
return obj[key];
});


// use vals array

如果你想让那些使用Object.keys对null安全(因为for-in是)，那么你可以使用Object.keys(obj || {})...。

Object.keys返回可列举的属性。对于简单对象的迭代，这通常就足够了。如果您需要处理一些具有不可枚举属性的东西，则可以使用Object.getOwnPropertyNames代替Object.keys。

ECMAScript 2015+ (A.K.A. ES6)

使用ECMAScript 2015更容易迭代数组。当你在循环中逐一处理值时，你可以利用这一点:

for (const key of Object.keys(obj)) {
const val = obj[key];
// use val
}

使用ECMAScript 2015胖箭头函数，将对象映射到值数组变成一行代码:

const vals = Object.keys(obj).map(key => obj[key]);


// use vals array

ECMAScript 2015引入了Symbol，它的实例可以用作属性名。要获得要枚举的对象的符号，使用Object.getOwnPropertySymbols(这个函数就是为什么使用Symbol 不能来创建私有属性的原因)。来自ECMAScript 2015的新的Reflect API提供了Reflect.ownKeys，它返回属性名(包括不可枚举的)和符号的列表。

数组推导式(不要尝试使用)

数组推导式在ECMAScript 6发布之前是删除。在移除它们之前，解决方案应该是这样的:

const vals = [for (key of Object.keys(obj)) obj[key]];


// use vals array

ECMAScript 2017 +

ECMAScript 2016增加了不影响此主题的特性。ECMAScript 2017规范增加了Object.values和Object.entries。两者都返回数组(考虑到与Array.entries的类比，这可能会让一些人感到惊讶)。Object.values可以直接使用，也可以和for-of循环一起使用。

const values = Object.values(obj);


// use values array or:


for (const val of Object.values(obj)) {
// use val
}

如果您想同时使用键和值，那么Object.entries非常适合您。它生成一个充满[key, value]对的数组。你可以在for-of循环中使用它，或者(还要注意ECMAScript 2015解构赋值):

for (const [key, val] of Object.entries(obj)) {
// use key and val
}

# EYZ0垫片

最后，正如评论中提到的和teh_senaus在另一个回答中提到的，可能值得使用其中一个作为垫片。别担心，下面的代码不会改变原型，它只是给Object添加了一个方法(这要安全得多)。使用粗箭头函数，这也可以在一行中完成:

Object.values = obj => Object.keys(obj).map(key => obj[key]);

你现在可以用like

// ['one', 'two', 'three']
var values = Object.values({ a: 'one', b: 'two', c: 'three' });

如果你想在原生Object.values存在时避免shimming，那么你可以这样做:

Object.values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));

最后……

了解需要支持的浏览器/版本。以上所述在实现方法或语言特性的地方是正确的。例如，对ECMAScript 2015的支持在V8中默认关闭，直到最近才被关闭，而V8支持的是Chrome等浏览器。应该避免使用ECMAScript 2015中的特性，直到您打算支持的浏览器实现了所需的特性。如果您使用巴别塔将代码编译为ECMAScript 5，那么您就可以访问这个答案中的所有特性。

小开 
var objects={...}; this.getAllvalues = function () {
var vls = [];
for (var key in objects) {
vls.push(objects[key]);
}
return vls;
}
小开

如果你可以访问Underscore.js，你可以像这样使用_.values函数:

_.values({one : 1, two : 2, three : 3}); // return [1, 2, 3]
小开

现在我使用Dojo Toolkit，因为旧的浏览器不支持Object.values。

require(['dojox/lang/functional/object'], function(Object) {
var obj = { key1: '1', key2: '2', key3: '3' };
var values = Object.values(obj);
console.log(values);
});

输出:

['1', '2', '3']
小开

使用

console.log(variable)

如果你使用谷歌chrome打开控制台使用Ctrl+Shift+j

去>>控制台

小开

ES5 # EYZ1

var a = { a: 1, b: 2, c: 3 };
Object.keys(a).map(function(key){ return a[key] });
// result: [1,2,3]
小开

对于那些早期适应CofeeScript时代的人来说，这里有另一个等价的东西。

val for key,val of objects

这可能比这样更好，因为objects可以减少为再次输入，降低可读性。

objects[key] for key of objects
小开

如果你真的想要一个值数组，我发现这比用for…在循环。

ECMA 5.1 +

function values(o) { return Object.keys(o).map(function(k){return o[k]}) }

值得注意的是，在大多数情况下，你并不需要一个值数组，这样做会更快:

for(var k in o) something(o[k]);

这将遍历对象o的键值。在每次迭代中，k被设置为o的键值。

小开

下面是一个类似于PHP的array_values()函数

function array_values(input) {
var output = [], key = '';
for ( key in input ) { output[output.length] = input[key]; }
return output;
}

如果你使用ES6或更高版本，下面是如何获取对象的值:

Array.from(values(obj));
小开

显然，正如我最近了解到的，这是最快的方法:

var objs = {...};
var objKeys = Object.keys(obj);
for (var i = 0, objLen = objKeys.length; i < objLen; i++) {
// do whatever in here
var obj = objs[objKeys[i]];
}
小开

使用像这样的填充材料:

if(!Object.values){Object.values=obj=>Object.keys(obj).map(key=>obj[key])}

然后使用

Object.values(my_object)

3)利润!

小开

我意识到我有点晚了，但是这里有一个垫片用于新的firefox 47 Object.values方法

Object.prototype.values = Object.prototype.values || function(obj) {
return this.keys(obj).map(function(key){
return obj[key];
});
};
小开

兼容ES7，甚至一些浏览器还不支持它

因为，Object.values(<object>)将内置在ES7 &

在等待所有浏览器支持它之前，你可以将它包装在一个函数中:

Object.vals=(o)=>(Object.values)?Object.values(o):Object.keys(o).map((k)=>o[k])

然后:

Object.vals({lastname:'T',firstname:'A'})
// ['T','A']

一旦浏览器与ES7兼容，你就不需要更改代码中的任何内容。

小开

对象。条目可以更好地做到这一点。

  var dataObject = {"a":{"title":"shop"}, "b":{"title":"home"}}
 

Object.entries(dataObject).map(itemArray => {
console.log("key=", itemArray[0], "value=", itemArray[1])
})

小开

ECMA2017开始:

Object.values(obj)将以数组形式获取所有属性值。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

小开

使用:Object.values()，我们传入一个对象作为参数，并接收一个数组的值作为返回值。

这将返回给定对象的可枚举属性值的数组。你将得到与使用for in循环相同的值，但没有原型上的属性。下面这个例子可能会让事情更清楚:

function person (name) {
this.name = name;
}


person.prototype.age = 5;


let dude = new person('dude');


for(let prop in dude) {
console.log(dude[prop]);     // for in still shows age because this is on the prototype
}                              // we can use hasOwnProperty but this is not very elegant


// ES6 +
console.log(Object.values(dude));
// very concise and we don't show props on prototype

小开 
const object1 = {
a: 'somestring',
b: 42
};


for (let [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}


// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed
小开

# EYZ0

获取所有值:

  • 最短路径:

    • # EYZ0
      • 李< / ul > < / >

    • # EYZ0

小开

这个问题没有指定是否也需要继承的和不可枚举的属性。

有一个获取一切的问题，继承的属性和不可枚举的属性也，谷歌不容易找到。

如果我们要获得所有继承的和不可枚举的属性，我的解决方案是:

function getAllPropertyNames(obj) {
let result = new Set();
while (obj) {
Object.getOwnPropertyNames(obj).forEach(p => result.add(p));
obj = Object.getPrototypeOf(obj);
}
return [...result];
}

然后遍历它们，只需要使用for-of循环:

function getAllPropertyNames(obj) {
let result = new Set();
while (obj) {
Object.getOwnPropertyNames(obj).forEach(p => result.add(p));
obj = Object.getPrototypeOf(obj);
}
return [...result];
}


let obj = {
abc: 123,
xyz: 1.234,
foobar: "hello"
};


for (p of getAllPropertyNames(obj)) console.log(p);

小开

我认为最简单的选择是这样的

Object.keys(data).forEach(function (key, index) {
var value = data[key];
console.log(key,index, value);
});

例如，一个可运行的代码被添加在这里-

const user = {
name: 'Alex',
age: 30
};


Object.keys(user).forEach(function (key, index) {
var value = user[key];
console.log(key,index, value);
});

小开

我们可以使用以下三种方法获取数据

使用地图功能

data.map( item => { console.log(item) }

使用for循环

for( let i = 0; i < data.length; i++){
console.log(item);
}

使用for in循环

for(key in data) {
if(data.hasOwnProperty(key)) {
const value = data[key];
console.log(value);
}
}

提交答案