如何通过 JavaScript 中的属性获取对象的索引?

IT技术 javascript arrays object
2021-02-04 04:22:59

例如,我有:

var Data = [
  { id_list: 1, name: 'Nick', token: '312312' },
  { id_list: 2, name: 'John', token: '123123' },
]

然后,例如,我想通过这个对象进行排序/反转name然后我想得到这样的东西:

var Data = [
  { id_list: 2, name: 'John', token: '123123' },
  { id_list: 1, name: 'Nick', token: '312312' },
]

现在我想知props有属性的对象的索引name='John'以获取属性令牌的值。

我该如何解决问题?

6个回答

由于排序部分已经回答。我只是要提出另一种优雅的方法来获取数组中属性的 indexOf

你的例子是:

var Data = [
    {id_list:1, name:'Nick', token:'312312'},
    {id_list:2, name:'John', token:'123123'}
]

你可以做:

var index = Data.map(function(e) { return e.name; }).indexOf('Nick');

Array.prototype.mapInternet Explorer 7或 Internet Explorer 8上不可用ES5 兼容性

这里是 ES6 和箭头语法,更简单:

const index = Data.map(e => e.name).indexOf('Nick');
简单,但要考虑使用大型数据集时的性能
2021-03-25 04:22:59
在 ES6 版本中先做一个 map 然后 indexOf 意味着他们将在数组上循环两次。相反,您应该使用我的答案中显示的 findIndex 方法
2021-04-02 04:22:59
无论如何,我必须迭代整个数组。第一种方法不需要。
2021-04-04 04:22:59
完美的!与上面解释的方法相比,该方法的效率如何?
2021-04-08 04:22:59
ES2015 是否给了我们一种通过字段名称动态搜索的方法,例如
2021-04-08 04:22:59

如果您对使用 ES6 没问题,那么数组现在具有findIndex函数。这意味着您可以执行以下操作:

const index = Data.findIndex(item => item.name === 'John');
抱歉@Jos,但我认为您不太了解贪婪搜索算法的作用贪心算法只考虑它手头的信息,这在计算上是高效的,例如,当您只需要一个结果时搜索列表中的项目。findIndex 方法非常贪婪,因为它只返回第一个匹配项。如果它不贪婪,它会继续搜索。您正在考虑日常英语中使用的“贪婪”一词,但在编程的上下文中(即 SO),它与您的想法相反;)
2021-03-14 04:22:59
@GrayedFox 你不是说不贪心吗?贪婪意味着更多的结果,而 findIndex 只返回第一个匹配项。
2021-03-18 04:22:59
传递最直接和优雅的解决方案,我会做一个小而不是 findIndex 贪婪 - 在我的情况下这是完美的 - 但用户要知道,如果你有具有重复值的对象(即两个对象name: John),这将只返回第一场比赛
2021-03-28 04:22:59
完美的。正是我要找的。谢谢你。
2021-03-31 04:22:59
感谢您解释@GrayedFox。我对 greedy 的引用实际上也来自编程,但与正则表达式有关,其中 greedy 比 non-greedy 需要更多的字符!:-)
2021-04-05 04:22:59

正如其他答案所暗示的那样,遍历数组可能是最好的方法。但我会把它放在它自己的函数中,并使它更抽象一点:

function findWithAttr(array, attr, value) {
    for(var i = 0; i < array.length; i += 1) {
        if(array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}

var Data = [
    {id_list: 2, name: 'John', token: '123123'},
    {id_list: 1, name: 'Nick', token: '312312'}
];

这样,您不仅可以找到包含“John”的内容,还可以找到包含“312312”标记的内容:

findWithAttr(Data, 'name', 'John'); // returns 0
findWithAttr(Data, 'token', '312312'); // returns 1
findWithAttr(Data, 'id_list', '10'); // returns -1

该函数在未找到时返回 -1,因此它遵循与Array.prototype.indexOf()相同的构造

添加了扩展此答案以涵盖比一个属性级别更深的搜索。感谢这位克里斯 - 真的很有帮助:D
2021-03-21 04:22:59
对于那些对此解决方案有问题的人,请记住 === 等号不仅会检查值,还会检查数据类型。因此,如果实际值是字符串,则比较日期、数字和空值可能会返回 false。如果数据类型对您来说无关紧要,您可以使用 == 等号。
2021-04-01 04:22:59
不要这样做。学习如何使用高阶函数,这是旧的做事方式。
2021-04-04 04:22:59

如果您在使用 Internet Explorer 时遇到问题,您可以使用从9.0开始支持的 map() 函数

var index = Data.map(item => item.name).indexOf("Nick");
下面的答案提供了更多信息,并首先发布。
2021-04-07 04:22:59
var index = Data.findIndex(item => item.name == "John")

这是以下的简化版本:

var index = Data.findIndex(function(item){ return item.name == "John"})

来自mozilla.org:

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

@BrunoTavares,您认为在这种情况下哪种情况会有所不同?
2021-03-14 04:22:59
@edank如果OP要检查token字段而不是name字段,则可能会出现问题,因为Data[0].token == 312312评估为true,但Data[0].token === 321321评估为false
2021-03-15 04:22:59
使用“===”进行字符串比较,这是此答案中唯一缺少的内容。
2021-03-26 04:22:59
2021-03-30 04:22:59