js indexOf 的使用方法

1. 概念

JavaScript indexOf() 方法用于查找数组中元素的索引位置。它接受一个参数，该参数是要查找的元素，然后返回该元素在数组中第一次出现的索引。如果元素不存在于数组中，则返回 -1。

语法

array.indexOf(searchElement, fromIndex)

• searchElement: 要查找的元素。
• fromIndex (可选): 开始查找的起始位置，默认为 0。如果指定了 fromIndex，则从该索引处开始向后查找。如果 fromIndex为负数，则它表示在数组末尾的偏移量，例如 -1 表示在最后一个元素之前开始查找。

返回值

indexOf() 方法返回搜索元素的索引，如果找到，则返回该元素的索引值；如果没有找到，则返回 -1。

2. indexOf() 查找简单数组

const array = [2, 9, 9, 4, 6, 7, 8];

console.log(array.indexOf(9)); // 输出: 1
console.log(array.indexOf(9, 2)); // 输出: 2
console.log(array.indexOf(5)); // 输出: -1

在上面的例子中，indexOf() 方法首先查找数字 9 在数组中的索引位置。然后，第二次使用 indexOf() 方法指定了起始搜索位置 2，并且找到了第二个数字 9 的索引。最后一个例子中，搜索的数字 5 不存在于数组中，因此返回 -1。

3.indexOf() 查找复杂数组

indexOf() 方法在 JavaScript 中也可用于查找复杂类型（比如对象或数组）在数组中的位置。但是，对于复杂类型的查找，有一些需要注意的情况：

3.1 对象数组的 indexOf() 用法

如果要在包含对象的数组中查找对象，indexOf() 方法会在查找时比较引用而不是值。这意味着它会检查对象是否完全相同，而不是检查对象的属性值是否相同。

const array = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
  
  const obj = { id: 2, name: 'Bob' };
  
  console.log(array.indexOf(obj)); // 输出: -1，因为这是一个新的对象，与数组中的对象不是同一个引用
  
  console.log(array.indexOf(array[1])) // 输出: 1

上述例子中，尽管 obj 具有相同的属性值，但它是一个新对象，因此 indexOf() 返回 -1。要在数组中找到具有相同属性值的对象，可以使用 findIndex() 方法：

const index = array.findIndex(element => element.id === obj.id && element.name === obj.name);
console.log(index); // 输出: 1，找到了具有相同属性值的对象在数组中的索引

3.2 数组中的数组的 indexOf() 用法

如果数组中包含其他数组，indexOf() 仍然会比较引用而不是值。如果你想要检查数组中是否包含一个具有相同值的子数组，可以使用 findIndex() 方法。

const array = [
  [1, 2],
  [3, 4],
  [5, 6]
];

const subArray = [3, 4];

const index = array.findIndex(element => element.every((val, i) => val === subArray[i]));
console.log(index); // 输出: 1，找到了具有相同值的子数组在数组中的索引

上面的例子中，findIndex() 和 every() 方法被用于比较数组中的子数组是否具有相同的值。

4. 总结

总之，对于复杂类型的数组，indexOf() 方法会检查引用而不是值。因此，在这样的情况下，可能需要使用 findIndex() 或自定义条件的方法来查找所需的元素。