主页 / 问题 / 839051
Accepted
Вася Смит
Asked:2020-06-07 20:33:23 +0000 UTC2020-06-07 20:33:23 +0000 UTC

如何遍历一个对象的数组以匹配另一个数组的元素？

  • 772

有一个数组和 5 个对象：

var arr = ['яблоко','апельсин']

[
  {
    name: 'Вася',
    tags: ['яблоко','апельсин', 'малина', 'банан'],
    show: true
  },
  {
    name: 'Петя',
    tags: ['вишня','апельсин', 'розы', 'слива'],
    show: true
  },
  {
    name: 'Дима',
    tags: ['яблоко','слива', 'елка', 'банан'],
    show: true
  },
  {
    name: 'Валера',
    tags: ['персик','крыжовник', 'груша', 'черешня'],
    show: true
  },
  {
    name: 'Победаносный',
    tags: ['крыжовник','персик', 'малина', 'банан'],
    show: true
  }
]

如果数组的所有元素都在对象的数组中，如何迭代这 5 个对象以匹配另一个数组的元素并且不更改每个对象中的数组，将 show 键设置为 false 或 true？

javascript

1 个回答

  1. Best Answer

    let arr = ['яблоко', 'апельсин']
new Vue({
  el: '#root',
  data: {
    els: [{
        name: 'Вася',
        tags: ['яблоко', 'апельсин', 'малина', 'банан'],
        show: true
      },
      {
        name: 'Петя',
        tags: ['вишня', 'апельсин', 'розы', 'слива'],
        show: true
      },
      {
        name: 'Дима',
        tags: ['яблоко', 'слива', 'елка', 'банан'],
        show: true
      },
      {
        name: 'Валера',
        tags: ['персик', 'крыжовник', 'груша', 'черешня', 'яблоко', 'апельсин'],
        show: true
      },
      {
        name: 'Победаносный',
        tags: ['крыжовник', 'персик', 'малина', 'банан'],
        show: true
      }
    ]
  },
  methods: {
    filterIt: function () {
      // Получаем разницу элемента и эталона; если вычлись все эталонные элементы - изменяем статус
      this.els.forEach(el => el.tags.length - el.tags.filter(i => arr.indexOf(i) < 0).length === arr.length ? el.show = false : null);
    }
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id='root'>
  <ul>
    <li v-for="(el, i) in els" :key="i" :style="{color: !el.show ? '#000' : '#ccc' }">Name: <strong>{{ el.name }}</strong>, tags: <strong>{{ el.tags.join(', ') }}</strong></li>
  </ul>
  <input type='button' value='Filter it' @click="filterIt" />
</div>

    • 1

相关问题