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

时间:2016-12-12 18:49:44

标签: javascript arrays filter

我试图根据值过滤数组。 (下面是数组和值)

ABC
XYZ
PQR
MNO

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

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 = [];

但是,该值也可以是粗体或斜体。那么,我怎样才能有效地比较这些不同的数据类型并有效地过滤数据?

6 个答案:

答案 0 :(得分:1)

var value = "green";

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

答案 1 :(得分:1)

如果colorbolditalic是您想要过滤的唯一标准,则天真的方法可能就足够了:

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);

答案 2 :(得分:1)

使用JQuery这很简单

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

您可以根据需要更改和添加参数(甚至是nest语句)。 n将是对象的当前迭代,我是计数。 如果return为true,它将被添加到输出中。

请参阅http://api.jquery.com/jquery.grep/了解详情

答案 3 :(得分:0)

似乎您需要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);
}

答案 4 :(得分:0)

我提出了一种基于对象属性进行过滤的通用方法:

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));

答案 5 :(得分:0)

检查颜色是否等于值,并使用括号表示法返回属性的值。只要对象没有带颜色名称的属性,这将有效。

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);