Vue中indexOf与原生JavaScript从数组选取对象的差异疑问

嘿，这个问题其实和Vue的特殊处理没啥关系，核心是JavaScript对象的引用类型特性在搞鬼～

先搞懂indexOf的匹配逻辑 #

indexOf在数组中查找元素时，用的是严格相等（===）来判断匹配。对于基本类型（比如字符串、数字），值相等就会匹配；但对于对象来说，只有当两个变量指向内存中同一个对象引用时，才会被判定为相等。

为什么Vue示例里能找到？ #

在你提到的Vue示例中，用来查找的对象大概率是直接从目标数组里获取的——比如通过v-for循环拿到的项，或者是组件data里存储的同一个对象引用。这种情况下，它和数组里的对象是同一个内存地址，indexOf自然能匹配到对应的索引。

为什么你在原生控制台里返回-1？ #

你在控制台手动创建的对象，哪怕内容和数组里的对象完全一样，它也是一个全新的对象引用，内存地址和数组里的对象不一样。严格相等比较时，内容相同但引用不同的对象会被判定为不相等，所以indexOf找不到，返回-1。举个直观的例子：

const userList = [{id: 2, name: 'Alice'}];

// 从数组里取出的对象，和数组内的是同一个引用
const existingUser = userList[0];
console.log(userList.indexOf(existingUser)); // 输出 0 - 能找到

// 手动创建的新对象，内容相同但引用不同
const newUser = {id: 2, name: 'Alice'};
console.log(userList.indexOf(newUser)); // 输出 -1 - 找不到

正确的解决方案：根据对象内容查找 #

如果你想根据对象的某个唯一属性（比如id）来查找索引，别用indexOf，改用findIndex更靠谱：

const targetId = 2;
const targetIndex = userList.findIndex(user => user.id === targetId);
console.log(targetIndex); // 输出 0 - 成功找到

内容的提问来源于stack exchange，提问作者Stephan-v