相同对象调用indexOf返回-1问题求助（单词存储场景）

Hey there, I’ve run into this exact issue before! The problem boils down to how JavaScript handles object references, and why indexOf isn’t working even when the objects look identical.

Here’s what’s happening: When you pull data from localStorage, you’re using JSON.parse() to turn the stored string back into objects. Even though these new objects have the exact same key-value pairs as the original ones in your unsorted array, they’re completely separate object references.

The Array.indexOf() method uses strict equality (===) to match elements. For objects, === only returns true if both operands point to the same exact object in memory—not just objects with the same content. That’s why you’re getting -1 even though the data looks identical.

Fixes to Try #

1. Use findIndex() with a Unique Identifier (Recommended)

The simplest and most reliable way is to match objects using a unique property they all have—like the word itself (since words should be unique in your list). Here’s how:

// Assume originalWords is your unsorted array retrieved from localStorage
// sortedWords is your sorted array displayed to the user
const clickedWord = sortedWords[clickedIndex]; // The word the user clicked on

// Find the index in the original array by matching the unique "word" property
const originalIndex = originalWords.findIndex(wordObj => wordObj.word === clickedWord.word);

This works because we’re comparing primitive values (strings) instead of object references, which === handles correctly.

2. Add a Unique ID to Each Word Object

If your words might have duplicates (unlikely, but possible), you can assign a unique ID to each object when you first create it:

// When initializing your word array
const words = [
  { id: 1, word: "apple", pronunciation: "/ˈæpl/", type: "noun", definition: "a round fruit with red or green skin", favoriteCount: 5 },
  { id: 2, word: "banana", pronunciation: "/bəˈnɑːnə/", type: "noun", definition: "a long curved fruit with yellow skin", favoriteCount: 3 },
  // ...
];

// Later, when finding the original index after a user click
const clickedWord = sortedWords[clickedIndex];
const originalIndex = originalWords.findIndex(wordObj => wordObj.id === clickedWord.id);

The ID acts as a guaranteed unique marker, even if word content changes down the line.

3. Deep Compare Objects (Last Resort)

If you don’t have a unique property to rely on, you can write a helper function to compare all key-value pairs of the objects. Note that this is less efficient, especially for large arrays:

function areObjectsEqual(objA, objB) {
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  // If different number of keys, they can't be equal
  if (keysA.length !== keysB.length) return false;

  // Check each key's value for equality
  for (const key of keysA) {
    if (objA[key] !== objB[key]) return false;
  }

  return true;
}

// Use it with findIndex to locate the original index
const clickedWord = sortedWords[clickedIndex];
const originalIndex = originalWords.findIndex(wordObj => areObjectsEqual(wordObj, clickedWord));

Stick with option 1 or 2 for the best performance and reliability. Option 3 should only be used if you have no other choice—deep comparisons get slow with big datasets.

内容的提问来源于stack exchange，提问作者Lukozaver