在javascript中过滤对象对象(过滤还是减少?)

时间:2017-01-22 01:39:34

标签: javascript object filter reduce

过滤或减少对象的最佳做法是什么?我会通过for循环完成这个并创建一个新数组,但是要知道你可以通过JavaScript中的filter属性以某种方式完成它吗?

var myObject = [
  {dimensions: [451, 255], margins: [0, 2, 0, 29]}, 
  {dimensions: [222, 390], margins: [0, 5, 0, 37]},
  {dimensions: [333, 390], margins: [0, 8, 0, 37]}
];

我想分别过滤掉尺寸,第一个属性和第二个和第四个边距,数组中的属性:

var dimension = [ 451, 222, 333 ];
var margins = [ 2, 29, 5, 37, 8, 37 ];

此外,如果我过滤一个对象并更新这些变量,有没有办法将它们映射回去?或者我应该如下所示进行映射:

var dimension = [ a: 451, b: 222, c: 333];
var margins = [ a: [2, 29], b : [5, 37], c: [8, 37] ];

2 个答案:

答案 0 :(得分:4)

您可以使用reduce

var myObject = [{
  dimensions: [451, 255],
  margins: [0, 2, 0, 29]
}, {
  dimensions: [222, 390],
  margins: [0, 5, 0, 37]
}, {
  dimensions: [333, 390],
  margins: [0, 8, 0, 37]
}];


var results = myObject.reduce(function(acc, item) {
  acc.dimensions.push(item.dimensions[0]);
  acc.margins.push(item.margins[1], item.margins[3]);
  return acc;
}, { dimensions: [], margins: [] });

console.log(results); // {dimensions: Array[3], margins: Array[6]}

工作小提琴:https://jsfiddle.net/9ynez03c/

要回映到myObject

var dimensions = results.dimensions;
var margins = results.margins;

var updateMyObject = function() {
  myObject.forEach(function(item, i) {
    item.dimensions[0] = dimensions[i];
    item.margins[1] = margins[i * 2];
    item.margins[3] = margins[i * 2 + 1];
  })
};
updateMyObject();

这非常笨重。我不确定你是如何使用这些数据的,但有些东西告诉我你应该首先使用一个对象,然后根据需要访问/更新属性,而不是创建其他数组。

更新的新小提琴:https://jsfiddle.net/adrice727/g01s80qf/

答案 1 :(得分:0)

如果您只想要满足某些条件的数组子集(如任意数字数组中大于5的所有数字),则过滤工作正常。在你的情况下,我肯定会去循环。

var myObject = [
  {dimensions: [451, 255], margins: [0, 2, 0, 29]}, 
  {dimensions: [222, 390], margins: [0, 5, 0, 37]},
  {dimensions: [333, 390], margins: [0, 8, 0, 37]}
]

var dimensions = [];
var margins = [];

myObject.forEach(function(item) {
  dimensions.push(item.dimensions[0]);
  margins.push(item.margins[1]);
  margins.push(item.margins[3]);

  // or by using concat():
  // dimensions = dimensions.push(item.dimensions[0]);
  // margins = margins.concat([item.margins[1], item.margins[3]]);
});

console.log("dimensions:", dimensions);
console.log("margins:", margins);