Question

在React上下文中，我试图用以下结构渲染一些对象：

const regions = [
  {
    displayName: 'NYC',
    locations: [
      {name: 'thing', isVisible: false},
      {name: 'thing1', isVisible: false},
      {name: 'thing3', isVisible: false},
    ],
  }, 
  {
    displayName: 'Seattle',
    locations: [
      {name: 'thing', isVisible: true},
      {name: 'thing1', isVisible: true},
      {name: 'thing3', isVisible: true},
    ],
    ....
  },
  ....
];

我的问题是关于具有所有isVisible: false的第一个对象的上下文，如果所有isVisible的值均为false，是否可以删除整个对象？基本上使用示例，该对象：

{
  displayName: 'NYC',
  locations: [
    {name: 'thing', isVisible: false},
    {name: 'thing1', isVisible: false},
    {name: 'thing3', isVisible: false},
  ],
},

将被删除。

如果是，怎么办？如果没有，这是可以实现的吗？有其他替代解决方案吗？

Answer 1

使用数组过滤很容易

// filter only returns regions where the internal function evaluates to true
regions.filter(function(region){
    // some returns true if at least one of the elements in the array causes the function below to return true
    return region.locations.some(function(location){
        return location.isVisible
    })
})

问题是您无法将它重新分配给regions，因为它是const

Answer 2

使用Array#filter和Array#some作为回调，并使用ES6's destructuring assignment简洁地获得isVisible属性以检查和过滤出条目，其中isVisible都不存在键为true：

const regions = [
  {
    displayName: 'NYC',
    locations: [
      {name: 'thing', isVisible: false},
      {name: 'thing1', isVisible: false},
      {name: 'thing3', isVisible: false},
    ],
  }, 
  {
    displayName: 'Seattle',
    locations: [
      {name: 'thing', isVisible: true},
      {name: 'thing1', isVisible: true},
      {name: 'thing3', isVisible: true},
    ],  
  },
  {
    displayName: 'Washington',
    locations: [
      {name: 'thing', isVisible: true},
      {name: 'thing1', isVisible: false},
      {name: 'thing3', isVisible: true},
    ],  
  },
];

const filteredRegions = regions
  .filter(region => region.locations
    .some(({isVisible}) => isVisible))

console.log(filteredRegions);

Answer 3

const regions = [{displayName: 'NYC', locations: [{name: 'thing', isVisible: false}, {name: 'thing1', isVisible: false}, {name: 'thing3', isVisible: false},],},]

console.log(regions);

regions.filter(region => {
    !region.locations.filter(location => {
        location.isVisible
      }).length != 0
  });

console.log(regions);

输出：

[
  {
    displayName: 'NYC',
    locations: [
      {name: 'thing', isVisible: false},
      {name: 'thing1', isVisible: false},
      {name: 'thing3', isVisible: false},
    ],
  },
]

[]

如果要像这样更改内容，则可能不应将区域定义为const。

Answer 4

regions = regions.filter((region) => {
    const locations= region.locations.map((location) => {
        if(location.isVisible) return location;
    });
    if(locations.length === 0) return region;
})

您可以尝试此方法

Answer 5

这是您要做的。

const regions = [
  {
    displayName: 'NYC',
    locations: [
      {name: 'thing', isVisible: false},
      {name: 'thing1', isVisible: false},
      {name: 'thing3', isVisible: false},
    ],
  }, 
  {
    displayName: 'Seattle',
    locations: [
      {name: 'thing', isVisible: true},
      {name: 'thing1', isVisible: true},
      {name: 'thing3', isVisible: true},
    ],
  },
];

function getVisible(someRegions) {
    var regionsWithVisibleLocations = someRegions.filter(function(region) {
        return region.locations.some(function(location) {
            return location.isVisible;  
        });    
    });
    
    return regionsWithVisibleLocations;
}

console.log("result: ", getVisible(regions));

如何基于多个对象属性有条件地删除数组中的对象？

5 个答案: