我有一个基于所选城市长度不同的对象数组。如何选择包含具有特定属性的对象的元素?
Posted
技术标签:
【中文标题】我有一个基于所选城市长度不同的对象数组。如何选择包含具有特定属性的对象的元素?【英文标题】:I have an array of objects with varying length based on selected city. How to select the element which hold an object with certain property? 【发布时间】:2019-08-08 04:21:00 【问题描述】:长话短说,数组的长度取决于所选城市,因此我无法使用索引选择元素,因为我不知道该元素具有什么索引。因此,我不知何故需要根据其属性之一的值来选择它。
就我而言,我想选择包含具有types: ['locality', 'political']
属性的对象的元素。
示例结果。我没有包含前 7 个数组元素,因为它们无关紧要:
7:
address_components: (3) […, …, …]
types: Array(2)
0: "locality"
1: "political"
8:
address_components: (2) […, …]
types: Array(2)
0: "administrative_area_level_1"
1: "political"
如您所见,每个元素都有一个 types
属性,它是一个数组。我目前正在尝试使用 types: ['locality', 'political']
而不是索引来选择索引为 7 的元素。
遗憾的是,我不知道该怎么做,所以我没有补充任何代码。
[
"address_components": [
"long_name": "19",
"short_name": "19",
"types": [
"street_number"
]
,
"long_name": "Clanbrassil Street Lower",
"short_name": "Clanbrassil Street Lower",
"types": [
"route"
]
,
"long_name": "Wood Quay",
"short_name": "Wood Quay",
"types": [
"neighborhood",
"political"
]
,
"long_name": "Dublin 8",
"short_name": "Dublin 8",
"types": [
"postal_town"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
,
"long_name": "D08 X798",
"short_name": "D08 X798",
"types": [
"postal_code"
]
],
"formatted_address": "19 Clanbrassil Street Lower, Wood Quay, Dublin, D08 X798, Ireland",
"geometry":
"location":
"lat": 53.3349244,
"lng": -6.2740099
,
"location_type": "ROOFTOP",
"viewport":
"northeast":
"lat": 53.3362733802915,
"lng": -6.272660919708499
,
"southwest":
"lat": 53.3335754197085,
"lng": -6.275358880291503
,
"place_id": "ChIJZckoE7wNZ0gRgHdbQYYvYTk",
"plus_code":
"compound_code": "8PMG+X9 Dublin, County Dublin, Ireland",
"global_code": "9C5M8PMG+X9"
,
"types": [
"cafe",
"establishment",
"food",
"point_of_interest"
]
,
"address_components": [
"long_name": "21",
"short_name": "21",
"types": [
"street_number"
]
,
"long_name": "R137",
"short_name": "R137",
"types": [
"route"
]
,
"long_name": "Wood Quay",
"short_name": "Wood Quay",
"types": [
"neighborhood",
"political"
]
,
"long_name": "Dublin 8",
"short_name": "Dublin 8",
"types": [
"postal_town"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "21 R137, Wood Quay, Dublin, Ireland",
"geometry":
"location":
"lat": 53.3348735,
"lng": -6.273865
,
"location_type": "ROOFTOP",
"viewport":
"northeast":
"lat": 53.3362224802915,
"lng": -6.272516019708497
,
"southwest":
"lat": 53.3335245197085,
"lng": -6.275213980291502
,
"place_id": "ChIJYVO9ECIMZ0gR2bQrf0Ktmso",
"plus_code":
"compound_code": "8PMG+WF Dublin, County Dublin, Ireland",
"global_code": "9C5M8PMG+WF"
,
"types": [
"street_address"
]
,
"address_components": [
"long_name": "18",
"short_name": "18",
"types": [
"street_number"
]
,
"long_name": "Clanbrassil Street Lower",
"short_name": "Clanbrassil Street Lower",
"types": [
"route"
]
,
"long_name": "Wood Quay",
"short_name": "Wood Quay",
"types": [
"neighborhood",
"political"
]
,
"long_name": "Dublin 8",
"short_name": "Dublin 8",
"types": [
"postal_town"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "18 Clanbrassil Street Lower, Wood Quay, Dublin, Ireland",
"geometry":
"location":
"lat": 53.3349987,
"lng": -6.2739341
,
"location_type": "RANGE_INTERPOLATED",
"viewport":
"northeast":
"lat": 53.3363476802915,
"lng": -6.272585119708499
,
"southwest":
"lat": 53.3336497197085,
"lng": -6.275283080291502
,
"place_id": "EiwxOCBDbGFuYnJhc3NpbCBTdHJlZXQgTG93ZXIsIER1YmxpbiwgSXJlbGFuZCIaEhgKFAoSCQexJhIiDGdIEUlWW2rVpRfqEBI",
"types": [
"street_address"
]
,
"address_components": [
"long_name": "Clanbrassil Street Lower",
"short_name": "R137",
"types": [
"route"
]
,
"long_name": "Merchants Quay",
"short_name": "Merchants Quay",
"types": [
"neighborhood",
"political"
]
,
"long_name": "Dublin 8",
"short_name": "Dublin 8",
"types": [
"postal_town"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Clanbrassil Street Lower, Merchants Quay, Dublin, Ireland",
"geometry":
"bounds":
"northeast":
"lat": 53.33516729999999,
"lng": -6.273907599999999
,
"southwest":
"lat": 53.3345896,
"lng": -6.274462
,
"location":
"lat": 53.3348778,
"lng": -6.274183000000001
,
"location_type": "GEOMETRIC_CENTER",
"viewport":
"northeast":
"lat": 53.33622743029149,
"lng": -6.272835819708497
,
"southwest":
"lat": 53.33352946970849,
"lng": -6.275533780291502
,
"place_id": "ChIJzSxnESIMZ0gR8A77SK0ccBQ",
"types": [
"route"
]
,
"address_components": [
"long_name": "Wood Quay",
"short_name": "Wood Quay",
"types": [
"neighborhood",
"political"
]
,
"long_name": "Dublin 8",
"short_name": "Dublin 8",
"types": [
"postal_town"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Wood Quay, Dublin, Ireland",
"geometry":
"bounds":
"northeast":
"lat": 53.3454641,
"lng": -6.2680769
,
"southwest":
"lat": 53.329641,
"lng": -6.275519999999999
,
"location":
"lat": 53.33275459999999,
"lng": -6.2706881
,
"location_type": "APPROXIMATE",
"viewport":
"northeast":
"lat": 53.3454641,
"lng": -6.2680769
,
"southwest":
"lat": 53.329641,
"lng": -6.275519999999999
,
"place_id": "ChIJl78TlSEMZ0gRUHtT8SkTqVA",
"types": [
"neighborhood",
"political"
]
,
"address_components": [
"long_name": "Dublin 8",
"short_name": "Dublin 8",
"types": [
"postal_town"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Dublin 8, Ireland",
"geometry":
"bounds":
"northeast":
"lat": 53.37132399999999,
"lng": -6.2642699
,
"southwest":
"lat": 53.325953,
"lng": -6.3563488
,
"location":
"lat": 53.34785249999999,
"lng": -6.318115199999999
,
"location_type": "APPROXIMATE",
"viewport":
"northeast":
"lat": 53.37132399999999,
"lng": -6.2642699
,
"southwest":
"lat": 53.325953,
"lng": -6.3563488
,
"place_id": "ChIJLz14IT8MZ0gR2uKxYpAO0Bc",
"types": [
"postal_town"
]
,
"address_components": [
"long_name": "Dublin City",
"short_name": "Dublin City",
"types": [
"administrative_area_level_2",
"political"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Dublin City, Co. Dublin, Ireland",
"geometry":
"bounds":
"northeast":
"lat": 53.4111566,
"lng": -6.11309
,
"southwest":
"lat": 53.2988569,
"lng": -6.387080600000001
,
"location":
"lat": 53.3603142,
"lng": -6.315054200000001
,
"location_type": "APPROXIMATE",
"viewport":
"northeast":
"lat": 53.4111566,
"lng": -6.11309
,
"southwest":
"lat": 53.2988569,
"lng": -6.387080600000001
,
"place_id": "ChIJv2RI7foRZ0gRwAKA8azHAAM",
"types": [
"administrative_area_level_2",
"political"
]
,
"address_components": [
"long_name": "Dublin",
"short_name": "Dublin",
"types": [
"locality",
"political"
]
,
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Dublin, Ireland",
"geometry":
"bounds":
"northeast":
"lat": 53.42521010000001,
"lng": -6.0439235
,
"southwest":
"lat": 53.22343009999999,
"lng": -6.4474847
,
"location":
"lat": 53.3498053,
"lng": -6.2603097
,
"location_type": "APPROXIMATE",
"viewport":
"northeast":
"lat": 53.42521010000001,
"lng": -6.0439235
,
"southwest":
"lat": 53.22343009999999,
"lng": -6.4474847
,
"place_id": "ChIJL6wn6oAOZ0gRoHExl6nHAAo",
"types": [
"locality",
"political"
]
,
"address_components": [
"long_name": "County Dublin",
"short_name": "County Dublin",
"types": [
"administrative_area_level_1",
"political"
]
,
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Co. Dublin, Ireland",
"geometry":
"bounds":
"northeast":
"lat": 53.6347257,
"lng": -5.9962748
,
"southwest":
"lat": 53.1781971,
"lng": -6.5468798
,
"location":
"lat": 53.3302033,
"lng": -6.3105655
,
"location_type": "APPROXIMATE",
"viewport":
"northeast":
"lat": 53.6347257,
"lng": -5.9962748
,
"southwest":
"lat": 53.1781971,
"lng": -6.5468798
,
"place_id": "ChIJv2RI7foRZ0gRwAKA8azHABg",
"types": [
"administrative_area_level_1",
"political"
]
,
"address_components": [
"long_name": "Ireland",
"short_name": "IE",
"types": [
"country",
"political"
]
],
"formatted_address": "Ireland",
"geometry":
"bounds":
"northeast":
"lat": 55.4602,
"lng": -5.668900100000001
,
"southwest":
"lat": 51.3066,
"lng": -10.7666001
,
"location":
"lat": 53.41291,
"lng": -8.24389
,
"location_type": "APPROXIMATE",
"viewport":
"northeast":
"lat": 55.4602,
"lng": -5.668900100000001
,
"southwest":
"lat": 51.3066,
"lng": -10.7666001
,
"place_id": "ChIJ-ydAXOS6WUgRCPTbzjQSfM8",
"types": [
"country",
"political"
]
]
【问题讨论】:
发布正确的对象,而不是从 console.log 复制 这是什么意思,我还能从哪里复制它? 你可以这样做并发布一个有效的JS数据copy from console 所以 types 数组中的“locality”或“political”应该是匹配的吧? @godof23 如果两者都在类型数组中,我正在尝试匹配。虽然我不介意有一个匹配的代码,如果其中任何一个都在类型数组中,因为这可能会在以后派上用场。 【参考方案1】:您可以找到包含上述所有类型的元素:
array.find(it => ['locality', 'political'].every(type => it.types.includes(type)))
【讨论】:
出于好奇,是否可以更改此代码,以便强制执行地区性和政治性,同时可以选择向数组中添加第三个可选元素,例如“国家”? @bobimaru 是的 :) 变长了吗?我尝试将 every() 更改为 some(),但是,这样代码匹配具有 3 个值中的任何一个的第一个元素,但我需要匹配至少 2 个。 其他需要考虑的事情:当多个对象满足您的条件时会发生什么(或者它甚至重要吗?) @bobimaru 你的意思是三分之二?顺便说一句,这是另一个问题【参考方案2】:那么,让我们来看看这里发生了什么。
问题:您有一个对象数组,您需要找到并返回具有正确types
数组的对象。
嗯,首先,我们需要以某种方式检查数组中的每个对象——for 循环可以很好地解决这个问题。具体来说,我们可以使用for(... of ...)
模式:
for(let object of array)
/* do stuff */
接下来,我们需要根据设置的条件测试每个对象。我们知道我们需要检查每个对象的 types
属性,所以我们将从那里开始:
for(let object of array)
if(someKindOfTest(object.types))
return object;
那么我们如何实际执行这个测试呢?假设我们知道我们正在寻找什么类型......
let requiredTypes = ["locality"];
for(let object of array)
if(someKindOfTest(object.types))
return object;
...我们可以设计一个仅在对象具有所有必需类型时才通过的测试。听起来像是另一个循环的工作:
let requiredTypes = ["locality"];
for(let object of array)
let hasAllRequiredTypes = true;
// test for each of the required types
for(let requiredType of requiredTypes)
if(!object.types.includes(requiredType))
// this object doesn't match one of our required types, that disqualifies it
hasAllTypes = false; // flag this object as disqualified
break; // end this loop over the required types
if(hasAllRequiredTypes) return object;
所有这些都可以压缩成一个更短、更“实用”的版本(@jonas-wilms 的回答就是一个很好的例子),但我认为概述设计中的底层机制和解决问题很有用像这样的算法。
【讨论】:
以上是关于我有一个基于所选城市长度不同的对象数组。如何选择包含具有特定属性的对象的元素?的主要内容,如果未能解决你的问题,请参考以下文章
如何在我的 javascript AJAX 代码中显示所选国家/地区的城市名称和人口?