javascript - 在Javascript中按值从数组中获取元素

Question

我有简单的代码，可以让我根据标签显示相关产品，但我想扩展该代码，这样我可以输入多个标签。此时我只能运行:

<script type="text/javascript">category('tag1');</script>

我得到了所有标签中带有“tag1”的产品。在本例中 name1 和 name2。

var products = [
  {
    name: 'name1',
    tags: ['tag1', 'tag2', 'tag3'],
  },
  {
    name: 'name2',
    tags: ['tag1', 'tag3', 'tag4', 'tag5'],
  },
  {
    name: 'name3',
    tags: ['tag2', 'tag5', 'tag6'],
  }

];

var finalHtml = "";

function category(tag) {
  return products.filter(function(product){
    if (~product.tags.indexOf(tag)) {
      finalHtml += '<li>' + product.name + '</li>';
      document.getElementById("related_prod").innerHTML = finalHtml;
    }
  });
}

我期望什么？

当我运行该代码时:

<script type="text/javascript">category('tag1, tag6');</script>

我希望看到标签中包含 tag1 或 tag2 的每个产品。在本例中，它应该是 name1 和 name3。

Answer 1

这是使用 ECMAScript2015 的解决方案:

var products = [
  {
    name: 'name1',
    tags: ['tag1', 'tag2', 'tag3'],
  },
  {
    name: 'name2',
    tags: ['tag1', 'tag3', 'tag4', 'tag5'],
  },
  {
    name: 'name3',
    tags: ['tag2', 'tag5', 'tag6'],
  }
];

function category(...tags) {
    let related = document.getElementById("related_prod");
    // clear output
    related.innerHTML = '';
    // turn array values into object properties for faster lookup
    tags = tags.reduce((tags, tag) => (tags[tag] = 1, tags), {});
    // find products that have at least one of the tags 
    products.filter(product => product.tags.some(tag => tags[tag]))
            // display the names of the found products 
            .forEach(product => {
                let li = document.createElement('li');
                li.textContent = product.name;
                related.appendChild(li);
            });
}

category('tag4','tag5');

<ul id="related_prod"></ul>