Question

我见过多个例子，在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做了什么让这成为可能，或者我在这里错过了其他什么？

Answer 1

您必须缓存添加到数组中的对象，或进行深度 find()或findIndex()比较。

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

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>

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

1 个答案: