根据各种属性类型和值过滤数组

Question

我正在尝试基于一个值过滤一个数组。 （下面是数组和值）

var value = "blue"; // could be red, blue, green, bold, italic

var array = [{
    color: "red",
    bold: false,
    italic: false
}, {
    color: "blue",
    bold: false,
    italic: false
}, {
    color: "green",
    bold: true,
    italic: false
}, {
    color: "green",
    bold: false,
    italic: true
}];

然后有一个新数组来存储过滤后的数组

var filtered = [];

然后，我试图找到一种解决方案来过滤数据。 我可以为颜色做它：

filtered = array.filter(function(obj) {
    if (obj.color == "green") {
        return obj;
    }
});

console.log(filtered);

但是，该值也可以为粗体或斜体。 那么，如何才能有效地比较这些不同的数据类型并有效地过滤数据？

Answer 1

var value = "green";

filtered = array.filter(function(obj) {
    if (obj.color == value && (obj.bold || obj.italic)) {
        return obj;
    }
});

Answer 2

如果要过滤的唯一标准是color ， bold和italic ，那么幼稚的方法可能就足够了：

 var value = "bold"; var array = [{color:"red",bold:false,italic:false},{color:"blue",bold:false,italic:false},{color:"green",bold:true,italic:false},{color:"green",bold:false,italic:true}]; var filtered = array.filter(function(item) { return item.color === value || (value === 'bold' && item.bold) || (value === 'italic' && item.italic); }) console.log(filtered); 

Answer 3

使用JQuery，这很简单

   filtered = $.grep(array,function(n,i){return n.color=='green' && n.bold==true})

您可以根据需要更改和添加参数（甚至嵌套语句）。 n是对象的当前迭代，而i是计数。 如果return为true，它将被添加到输出中。

有关更多信息，请参见http://api.jquery.com/jquery.grep/

Answer 4

似乎您将需要2个不同的功能来按颜色或样式进行过滤。 这样的事情应该起作用：

function filterByColor(color) {
  filtered = array.filter(function(obj) {
    if (obj.color == "green") {
      return obj;
    }
  });
  console.log(filtered);
}

function filterByStyle(style) {
  filtered = array.filter(function(obj) {
    if (obj[style] === true) {
      return obj;
    }
  });
  console.log(filtered);
}

Answer 5

我提出了一种通用方法，该方法根据对象的属性进行过滤：

 var objet = { bold: false, italic: false }; var array = [{ color: "red", bold: false, italic: false }, { color: "blue", bold: false, italic: false }, { color: "green", bold: true, italic: false }, { color: "green", bold: false, italic: true }]; var philter = (arr, obj) => arr.filter(x => { var bool = true; for (var prop in obj) if (obj[prop] !== x[prop]) bool = false; return bool; }) console.log(philter(array, objet)); 

Answer 6

检查颜色是否等于值，并使用方括号表示法返回属性的值。 只要对象不具有带有颜色名称的属性，这将起作用。

 var array = [{"color":"red","bold":false,"italic":false},{"color":"blue","bold":false,"italic":false},{"color":"green","bold":true,"italic":false},{"color":"green","bold":false,"italic":true}]; var value = "italic"; // could be red, blue, green, bold, italic var result = array.filter(function(obj) { return obj.color === value || obj[value]; }); console.log(result);