Js 通过属性值查找对象的索引并返回它的键 - Javascript

有时候我们需要在一个对象数组中通过特定属性查找对象的索引并返回它的键。这在编程中很常见，比如在Vue.js中根据组件的key值来查找它的索引，或者在React中根据组件的id来查找它的索引。本文将介绍几种实现这种功能的方法。

方法1: findIndex() 方法

ES6中的findIndex()方法可以用来查找数组中特定元素的索引。我们可以使用它来查找对象数组中特定属性的对象，并返回它的索引。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const findIndexByKey = (arr, key, value) => {
  return arr.findIndex(obj => obj[key] === value);
};

console.log(findIndexByKey(arr, 'name', 'Bob')); // 2

以上代码将会输出'2'，因为name为Bob的对象在数组中的索引为2。

方法2: for...of 循环

另一个方法是使用for...of循环来遍历对象数组，并使用Object.keys()方法来获取对象的键数组。我们可以使用这个键数组来访问每个对象的属性，并比较它们与特定值来查找对象的索引。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const findIndexByKey = (arr, key, value) => {
  for (let i in arr) {
    for (let k of Object.keys(arr[i])) {
      if (k === key && arr[i][k] === value) {
        return i;
      }
    }
  }
  return -1;
};

console.log(findIndexByKey(arr, 'name', 'Bob')); // 2

以上代码将会输出'2'，因为name为Bob的对象在数组中的索引为2。

方法3: Array.prototype.map() 方法

我们也可以使用Array.prototype.map()方法来访问每个对象的属性，并与特定值进行比较来查找对象的索引。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const findIndexByKey = (arr, key, value) => {
  return arr.map(obj => obj[key]).indexOf(value);
};

console.log(findIndexByKey(arr, 'name', 'Bob')); // 2

以上代码将会输出'2'，因为name为Bob的对象在数组中的索引为2。

方法4: Array.prototype.filter() 方法

我们也可以使用Array.prototype.filter()方法来过滤对象数组，以查找包含特定属性的对象，并返回它的索引。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const findIndexByKey = (arr, key, value) => {
  return arr.findIndex(obj => obj[key] === value);
};

console.log(findIndexByKey(arr, 'name', 'Bob')); // 2

以上代码将会输出'2'，因为name为Bob的对象在数组中的索引为2。

无论哪种方法，都可以通过特定属性在对象数组中查找对象的索引并返回它的键。