JS find() 找不到元素？原因及解决技巧

2025-01-01 12:58:15

find() 方法找不到预期项目：问题分析与解决

在使用 find() 和 findIndex() 等数组方法时，开发者可能会遇到找不到预期元素的情况。这会导致程序逻辑错误，数据更新失败，或是其他预料之外的错误。深入理解此类问题的原因并掌握解决技巧至关重要。本文将讨论常见的失效场景，并给出相应的解决方案。

常见问题：数据不匹配

find() 和 findIndex() 的核心是基于提供的回调函数进行查找。若回调函数中的条件无法准确匹配数组内的元素，方法自然会返回 undefined 或者 -1。这通常涉及两种情况：

数据类型不匹配： 严格的类型比较 (===) 是方法默认行为。即使数值看上去一致，但当其中一方是字符串时，也会导致比较失败。
对象属性值不一致： 若用于对比的属性值不完全相等（例如大小写、空格差异），查找过程仍旧无法得到正确结果。

代码示例（错误演示）

假设你有一个包含数字ID的数组，却使用了字符串来查找：

const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
const idToFind = "2"; 
const foundItem = items.find(item => item.id === idToFind);
console.log(foundItem); // 输出 undefined

解决方案:
确认所有参与比较的值均具有正确的数据类型。可以使用强制类型转换，将 idToFind 转换为数字：

const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
const idToFind = "2"; 
const foundItem = items.find(item => item.id === parseInt(idToFind, 10)); // 或者 Number(idToFind)
console.log(foundItem); // 输出 { id: 2 }

复杂对象比较：深拷贝问题

当数组中的元素是复杂对象时，尤其要注意，find() 方法使用的回调函数返回的是简单的 true/false，如果对比的对象内部属性，你需要考虑其修改是否同步。

在你的例子中，你使用findCourseId从 cart 数组中移除商品，并随后用 findCourse 方法尝试在 coursesCopy 数组中找回对应的原始课程。若你在修改 cart 数组时对 coursesCopy 也进行修改 ( 可能是浅拷贝操作)，就可能出现 find 无法找到预期项目。这是因为，此时，coursesCopy中的课程和原来已经不同了，它们不是同一份拷贝。

代码示例（浅拷贝导致的问题）

// 浅拷贝的例子, 在购物车移除商品
const originalCourse = { id: 1, name: "math", spaces: 5 };
let cart = [{ ...originalCourse ,quantity : 1}] ; 
let coursesCopy = [ {...originalCourse } ];
//移除商品并试图更新spaces
const index = cart.findIndex(item => item.id === 1);
const originalCourseCopy = coursesCopy.find(item => item.id === 1);
cart.splice(index, 1)

originalCourseCopy.spaces += 1 // 如果有修改行为，它就会同时修改原先的数据，find很可能会失败
//现在两个数组里的值都已经改变，原始的值找不到了
const test1 = cart.find(item => item.id ===1) // 返回 undefined
const test2 = coursesCopy.find(item=> item.id ===1) // 可以找到
console.log("find resule of cart ",test1);
console.log("find resule of coursesCopy ",test2);

解决方案
避免修改引用类型的变量。采用深度复制 coursesCopy ，使其成为 courses 数组的独立副本，不相互影响。确保修改cart时，只影响到这个购物车数据，而不触碰到 courses，反之亦然。
深拷贝实现方法：

    function deepCopy(obj){
        if(typeof obj !== 'object' || obj === null)
          return obj
         const newObj = Array.isArray(obj)? [] : {};
        for (const key in obj){
          if(Object.hasOwnProperty.call(obj, key)) {
            newObj[key] = deepCopy(obj[key]);
          }
        }
        return newObj;
      }

const originalCourse = { id: 1, name: "math", spaces: 5 };
let cart = [{ ...originalCourse ,quantity : 1}] ; 
let coursesCopy = [ deepCopy(originalCourse) ];

//移除商品并试图更新spaces
const index = cart.findIndex(item => item.id === 1);
const originalCourseCopy = coursesCopy.find(item => item.id === 1);
cart.splice(index, 1)
if (originalCourseCopy){
  originalCourseCopy.spaces += 1
}
//测试
const test1 = cart.find(item => item.id ===1)
const test2 = coursesCopy.find(item=> item.id ===1)
console.log("find resule of cart ",test1);
console.log("find resule of coursesCopy ",test2);
console.log(" original value from courseCopy:",coursesCopy);