如何通过javascript数组中的键和值查找对象的索引

IT技术 javascript jquery
2021-03-09 01:35:04

鉴于:

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

通缉:

对象的索引,attr === value例如attr1 === "john"attr2 === "hummus"

更新: 请仔细阅读我的问题,我不想通过 $.inArray 找到对象,也不想获取特定对象属性的值。请考虑这一点作为您的答案。谢谢!

6个回答

功能方法

这些天所有的酷孩子都在做函数式编程(你好 React 用户),所以我想我会给出函数式解决方案。在我看来,它实际上比迄今为止提出的 imperativalforeach循环要好得多,并且使用 ES6 语法,它非常优雅。

更新

现在有一种很好的方法可以调用findIndex它,它接受一个函数,该函数根据数组元素是否匹配返回true/ false(一如既往,检查浏览器兼容性)。

var index = peoples.findIndex(function(person) {
  return person.attr1 == "john"
});

使用 ES6 语法,你可以这样写:

var index = peoples.findIndex(p => p.attr1 == "john");

(旧)功能方法

TL; 博士

如果您正在寻找index地方peoples[index].attr1 == "john"使用:

var index = peoples.map(function(o) { return o.attr1; }).indexOf("john");

解释

步骤1

使用.map()得到赋予了特定键值的数组:

var values = object_array.map(function(o) { return o.your_key; });

上面的行带您从这里开始:

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

到这里:

var values = [ "bob", "john", "larry" ];

第2步

现在我们只是.indexOf()用来查找我们想要的键的索引(当然,这也是我们正在寻找的对象的索引):

var index = values.indexOf(your_value);

解决方案

我们结合了以上所有内容:

var index = peoples.map(function(o) { return o.attr1; }).indexOf("john");

或者,如果您更喜欢 ES6 语法:

var index = peoples.map((o) => o.attr1).indexOf("john");

演示:

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

var index = peoples.map(function(o) { return o.attr1; }).indexOf("john");
console.log("index of 'john': " + index);

var index = peoples.map((o) => o.attr1).indexOf("larry");
console.log("index of 'larry': " + index);

var index = peoples.map(function(o) { return o.attr1; }).indexOf("fred");
console.log("index of 'fred': " + index);

var index = peoples.map((o) => o.attr2).indexOf("pizza");
console.log("index of 'pizza' in 'attr2': " + index);

现在让我们假设您想知道该行中披萨的索引{ "attr1": "bob", "attr2": "pizza" },即“1”,您会怎么做?或者,考虑到"pizza"您想知道哪个是对应的property name(即:attr2),假设我们在第 0 行,您会怎么做?
2021-04-23 01:35:04
也许它更新了。findIndex现在返回 -1 或找到的索引位置。
2021-05-08 01:35:04
我很遗憾 IE 不支持findIndex功能。
2021-05-15 01:35:04

如果您想在不干扰原型的情况下检查对象本身,请使用hasOwnProperty()

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

还包括原型属性,使用:

var getIndexIfObjWithAttr = function(array, attr, value) {
    for(var i = 0; i < array.length; i++) {
        if(array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}
为什么使用 'array[i].hasOwnProperty(attr)' 而不是 'array[i][attr]' ?
2021-04-22 01:35:04
2021-04-22 01:35:04
你为什么用i += 1而不是i++
2021-05-09 01:35:04
我建议在“for”循环后添加“return -1”,以防找不到元素(类似于javascript的“indexOf”或jquery的“$.inArray”)
2021-05-12 01:35:04
+1 ,但为什么不直接返回 i (而不是 $.inArray(array[i], array); )?
2021-05-14 01:35:04

使用 jQuery .each()

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

$.each(peoples, function(index, obj) {
   $.each(obj, function(attr, value) {
      console.log( attr + ' == ' + value );
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用for 循环

var peoples = [
  { "attr1": "bob", "attr2": "pizza" },
  { "attr1": "john", "attr2": "sushi" },
  { "attr1": "larry", "attr2": "hummus" }
];

for (var i = 0; i < peoples.length; i++) {
  for (var key in peoples[i]) {
    console.log(key + ' == ' + peoples[i][key]);
  }
}

链接失效了😉
2021-05-12 01:35:04

不是对您问题的直接回答,尽管我认为值得一提,因为您的问题似乎适合“在键值存储中按名称获取事物”的一般情况。

如果您对“peoples”的实现方式并不严格,那么一种更符合 JavaScript 风格的方式来找到合适的人可能是:

var peoples = {
  "bob":  { "dinner": "pizza" },
  "john": { "dinner": "sushi" },
  "larry" { "dinner": "hummus" }
};

// If people is implemented this way, then
// you can get values from their name, like :
var theGuy = peoples["john"];

// You can event get directly to the values
var thatGuysPrefferedDinner = peoples["john"].dinner;

希望如果这不是您想要的答案,它可能会帮助对“键/值”问题感兴趣的人。

这不会影响我的用例,但可能对其他人有帮助。我应该更新我的问题以获得更通用的属性名称以明确说明。
2021-05-12 01:35:04
function getIndexByAttribute(list, attr, val){
    var result = null;
    $.each(list, function(index, item){
        if(item[attr].toString() == val.toString()){
           result = index;
           return false;     // breaks the $.each() loop
        }
    });
    return result;
}
只是为了澄清一件事:“返回假”似乎没有必要。可以不用,但这是一个很好的优化,因为它打破了 '$.each()' 循环。做得好!另一方面,调用 '.toString()' 很奇怪(为什么不比较值?),如果 'item' 上的 'attr' 未定义,或者 val 为 'null' ,则可能会导致错误..还是我错过了在这里使用“toString()”的一个很好的理由?
2021-04-17 01:35:04
我不完全记得我为什么要那样做,但似乎记得这是因为当值是一个数字时发生了一些冲突
2021-04-19 01:35:04