如何将 JavaScript 对象的属性值提取到数组中?
Posted
技术标签:
【中文标题】如何将 JavaScript 对象的属性值提取到数组中?【英文标题】:How might I extract the property values of a JavaScript object into an array? 【发布时间】:2010-12-15 16:22:51 【问题描述】:给定一个 javascript 对象:
var dataObject =
object1: id: 1, name: "Fred",
object2: id: 2, name: "Wilma",
object3: id: 3, name: "Pebbles"
;
如何有效地将内部对象提取到数组中?我不需要维护 object[n] ID 的句柄。
var dataArray = [
id: 1, name: "Fred",
id: 2, name: "Wilma",
id: 3, name: "Pebbles"]
【问题讨论】:
【参考方案1】:var dataArray = [];
for(var o in dataObject)
dataArray.push(dataObject[o]);
【讨论】:
您认为什么是“排序”? 如果你不想包含对象原型中的属性(如果它是一个普通对象,不应该有任何属性),你可以通过检查@987654322来过滤它们@. 附注:如果由于某种原因向Object.prototype
添加了额外的属性,这将在不使用hasOwnProperty()
的情况下中断。
有什么理由在这里使用new Array
而不是[]
?
@SLaks 因为对象被定义为an unordered collection of properties
,所以没有要保留的顺序。【参考方案2】:
假设您的 dataObject 是按照您指定的方式定义的,您可以这样做:
var dataArray = [];
for (var key in dataObject)
dataArray.push(dataObject[key]);
最终让 dataArray 填充了内部对象。
【讨论】:
这也不符合他的要求。 他想要的是物品本身,而不是它们的名字。 在这种情况下,只需省略第三行中的“.name”即可。【参考方案3】:使用 jQuery,你可以这样做 -
var dataArray = $.map(dataObject,function(v)
return v;
);
Demo
【讨论】:
【参考方案4】:var dataArray = Object.keys(dataObject).map(function(k)return dataObject[k]);
【讨论】:
@Qix:你的意思是更快? @julien 不,一点也不。差远了。在任何情况下,接受的答案总是更快。 @Qix:而且for (var o = 0, l = dataObject.length; o < l; o++)
会比for ... in
更快。虽然,当地图内的功能非常复杂并且使用多个线程和网络工作者进行处理时,地图可能会更快......但是是的,在几乎所有情况下循环要快得多。
这非常更安全和惯用。 Object.keys 在内部执行hasOwnProperty
。
在接受的答案中添加对hasOwnProperty
的检查比首先构建数组并遍历 O(N) 空间 + O(N) 时间的这种方法有效。【参考方案5】:
使用underscore:
var dataArray = _.values(dataObject);
【讨论】:
@Veverke Underscore 是一个使用非常广泛的公共库。【参考方案6】:可能有点冗长,但健壮且快速
var result = [];
var keys = Object.keys(myObject);
for (var i = 0, len = keys.length; i < len; i++)
result.push(myObject[keys[i]]);
【讨论】:
【参考方案7】:ES6 版本:
var dataArray = Object.keys(dataObject).map(val => dataObject[val]);
【讨论】:
感谢@ChristianNilsson 的提醒。我编辑了答案。【参考方案8】:如果您使用 d3.你可以做d3.values(dataObject)
这会给
【讨论】:
【参考方案9】:[编辑和更新我的答案。其他答案似乎与我的几乎重叠,但是,我想我以前有另一个答案并提供了一个替代方案]。
我针对这个问题提出了 3 个解决方案,基于:
Object.keys Object.values Object.entriesObjects.keys() 解决方案:
let keys = Object.keys(dataObject); // ["object1", "object2", "object3" ];
let keysToResult = keys.map( e => dataObject[e] ); // ["id":1,"name":"Fred","id":2,"name":"Wilma","id":3,"name":"Pebbles"]
Object.values 解决方案:
let values = Object.values(dataObject); // ["id":1,"name":"Fred","id":2,"name":"Wilma","id":3,"name":"Pebbles"]
Object.entries 解决方案:
let entries = Object.entries(dataObject); // [["object1","id":1,"name":"Fred"],["object2","id":2,"name":Wilma"],["object3","id":3,"name":"Pebbles"]]
let entriesToResult = entries.map( ([k,v]) => v ); ["id":1,"name":"Fred","id":2,"name":"Wilma","id":3,"name":"Pebbles"]
这三种解决方案各有特色。
Object.keys() 返回一个结果不足的数组。因此,我们使用 Array.prototype.map 来填充数组中的每个值,以接近我们想要的。一般来说,我们可以将 Object.keys() 与 map 相结合,作为一种机制来自定义我们想要的结果列表。
Object.values() 很有趣,因为它丢弃了键,只返回结果。事实上,对于这个问题,这是完美的,因为答案不需要进一步处理。
Object.entries() 返回比我们想要的更多,因为它返回键和值。我们需要使用地图来定制我们的结果。事实上,我们需要把多余的信息删掉。
Object.keys()、Object.values() 和 Object.entries() 都是非常有用的函数,这就是为什么我想展示所有 3 个函数来解决这个问题。根据您的具体用例,您可能会找到一种更适合解决您的问题。
【讨论】:
【参考方案10】:使用the accepted answer 并知道Object.values() 在ECMAScript 2017 Draft 中提出,您可以使用方法扩展Object:
if(Object.values == null)
Object.values = function(obj)
var arr, o;
arr = new Array();
for(o in obj) arr.push(obj[o]);
return arr;
【讨论】:
【参考方案11】:ES2017 使用Object.values
:
const dataObject =
object1:
id: 1,
name: "Fred"
,
object2:
id: 2,
name: "Wilma"
,
object3:
id: 3,
name: "Pebbles"
;
const valuesOnly = Object.values(dataObject);
console.log(valuesOnly)
【讨论】:
【参考方案12】:现在支持 Object.values() 方法。这将为您提供一个对象的值数组。
Object.values(dataObject)
参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
【讨论】:
看起来像重复的答案。【参考方案13】:这个对我有用
var dataArray = Object.keys(dataObject).map(function(k)return dataObject[k]);
【讨论】:
【参考方案14】:我更喜欢将对象值销毁为数组:
[...Object.values(dataObject)]
var dataObject =
object1: id: 1, name: "Fred",
object2: id: 2, name: "Wilma",
object3: id: 3, name: "Pebbles"
;
var dataArray = [...Object.values(dataObject)];
【讨论】:
以上是关于如何将 JavaScript 对象的属性值提取到数组中?的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript 利用new Set()抽离数组中所有具备相同属性值的对象.
JavaScript 利用new Set()抽离数组中所有具备相同属性值的对象.
如何将一个对象数组的一个属性的值分配给另一个对象数组的同名属性? - Javascript