在 javascript 中过滤一个对象对象（过滤或减少？）

Posted 2023-02-22

【中文标题】在 javascript 中过滤一个对象对象（过滤或减少？）

【英文标题】：Filter an object object in javascript (filter or reduce?)

【发布时间】：2017-06-06 18:56:24

【问题描述】：

过滤或减少对象的最佳做法是什么？我会通过 for-loop 完成此操作并创建一个新数组，但了解您可以通过 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] ];

【参考方案1】：

你可以使用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/

【讨论】：

Adrice，如果我更新维度数组和边距数组，您将如何将它们映射回 myObject。或者直接如何更新 myObject ？

【参考方案2】：

如果您只想要满足某些条件的数组子集（例如任意数字数组中大于 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);

【讨论】：

感谢您的反馈，但我也担心代码尽可能短，我可以看到人们如何通过过滤器完成它们并且非常短。

好的。好吧，在我看来，您主要关心的应该是保持代码最易于理解，而不仅仅是非常短。使用不常见的函数，例如 reduce 可能不会导致更易于理解的代码。