Vue indexOf vs vanilla javascript用于从数组中选择对象

Posted 2023-02-23

【中文标题】Vue indexOf vs vanilla javascript用于从数组中选择对象

【英文标题】：Vue indexOf vs vanilla javascript for selecting an object from an array

【发布时间】：2018-07-15 12:28:06

【问题描述】：

我见过多个例子，在 Vue 中使用 indexOf 从对象数组中选择一个对象，如下所示：

脚本：

new Vue(
  el: '#app',
  data: 
    message: 'Hello Vue.js!',
    items: [
        
        id: 1,
        name: 'test'
      ,
      
        id: 2,
        name: 'hello'
      ,
      
        id: 3,
        name: 'world'
      
    ]
  ,
  methods: 
    deleteItem(item) 
      console.log(this.items.indexOf(item));
      // splice the item.
    
  
)

模板：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p> message </p>

  <ul>
    <li v-for="item in items" @click=deleteItem(item)>
       item.name 
    </li>
  </ul>
</div>

https://jsfiddle.net/5gwtyv3h/

现在我想知道这甚至是可能的。如果我进入我的控制台并简单地这样做：

const items = [
    
        id: 1,
        name: 'test'
    ,
    
        id: 2,
        name: 'hello'
    ,
    
        id: 3,
        name: 'world'
    
];

items.indexOf( id: 1, name: 'test');

我得到-1，因为找不到该项目。 Vue 是否正在做一些使这成为可能的事情，还是我在这里遗漏了其他东西？

【问题讨论】：

您的测试总是返回 -1，因为您传递的对象文字不在 items 数组中。对象比较不涉及对象contents；它们基于对象引用。

Difference Between indexOf and findIndex function of array的可能重复

所以它适用于对象引用？我发现在网上很难找到。甚至 Mozilla 页面似乎也没有提到任何关于它的内容：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

@str 您标记为重复的问题没有说明引用或查找对象。

@Stephan-v 答案提到了“原始类型”和“非原始类型（例如对象）”。

【参考方案1】：

您必须缓存添加到 Array 中的对象或进行 deep find() 或 findIndex() 比较。

对于与indexOf比较的Object，它们必须是完全相同的Object，这意味着它们必须引用完全相同的Object实例。

const a = 
    foo: "bar"
  ,
  b = 
    foo: "bar"
  ;

console.log(a === b); // false

考虑一下：

const a = 
    foo: "bar"
  ,
  b = 
    foo: "bar"
  ;

const c = [a, b];

console.log(c.indexOf(
  foo: "bar"
)); // -1 since the Object you **just** made won't be in the array

console.log(c.indexOf(a)); // 0 you're looking for the right object by reference

console.log(c.findIndex(i => i.foo === "bar")); // 0 again since it does a deep compare

// Succinct deep compare using lodash
console.log(_.findIndex(c, i => _.isEqual(i, 
  foo: "bar"
))); // 0 again but deep compare logic is encapsulated

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

【讨论】：

谢谢，我觉得这个解释不够。这部分似乎缺少关于 indexOf 的文档。