在javascript中過濾對象對象（過濾還是減少？）

Question

過濾或減少對象的最佳做法是什么？ 我會通過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] ];

Answer 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/

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