在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

根据我的理解，这可能是通用的，根据您的要求，您希望“或”而不是“与”，因此答案可以是：

function category() {
  var args = Array.prototype.slice.call(arguments);
  return products.filter(function(product){
    args.forEach(function(arg){   
     if (product.tags.indexOf(arg)> -1) {// readability 
       finalHtml += '<li>' + product.name + '</li>';
       document.getElementById("related_prod").innerHTML = finalHtml;
     }
  })
  });
}

编辑 ：为更好的解决方案，具有良好的分离性和可读性（假设您使用的是ecmascript5垫片）

function findProducts(){
    var args = Array.prototype.slice.call(arguments);
    var foundProducts = [];
    products.forEach(function(product) {
         args.forEach(function(arg){  
            if(product.tags.indexOf(arg) > -1 && foundProdutcs.indexOf(product) == -1)
                foundProducts.push(product);
         }
    });
    return foundProducts;

}
function doSomethingWithTheProducts() {
   var products = findProducts.apply(this,arguments);
   var finalHtml = "";
   products.forEach(function(product){
       finalHtml += "<li>" + product.name + "</li">;
   });
   document.getElementById("related_prod").innerHTML = finalHtml;
}

doSomethingWithTheProducts('tag1','tag2');

Answer 2

这是使用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>