代码之家 › 专栏 › 技术社区 › methuselah

从对象数组中删除空项

typescript javascript

methuselah · 技术社区 · 4 年前

下面有一组对象(组件),我想删除所有空条目。我该怎么做呢?我正在尝试以下操作:

  static deleteNullComponents(components) {
    return components.filter(function (el) {
      return el['components'] != null;
    });
  }

但我得到了错误: TypeError: components.filter is not a function

[
  {
    "components": [
      null,
      {
        "componentId": "navbar-zJNm0HaP",
        "componentIndex": 1,
        "componentName": "app-builder-navbar",
      },
      null,
      null,
      null,
      {
        "componentId": "features-MJU8gcYR",
        "componentIndex": 5,
        "componentName": "app-builder-features",
      },
      null,
      {
        "componentId": "features-2hsUdwaT",
        "componentIndex": 7,
        "componentName": "app-builder-features",
      },
      null,
      {
        "componentId": "footer-dLvoLZ16",
        "componentIndex": 9,
        "componentName": "app-builder-footer",
      },
      null
    ],
    "name": "Home"
  },
  {
    "components": [
      null,
      {
        "componentId": "navbar-UBdYplVp",
        "componentIndex": 1,
        "componentName": "app-builder-navbar",
      },
      null,
      {
        "componentId": "features-mmEzByeO",
        "componentIndex": 3,
        "componentName": "app-builder-features"
      },
      null,
      {
        "componentId": "features-GZKgh9lV",
        "componentIndex": 5,
        "componentName": "app-builder-features"
      },
      null,
      {
        "componentId": "footer-IyrNODRQ",
        "componentIndex": 9,
        "componentName": "app-builder-footer",
      },
      null
    ],
    "name": "About"
  }
]

2 回复 | 直到 4 年前

Asleepace 4 年前

看起来您在错误的对象上运行筛选器,请尝试以下操作:

:这还将修改传递到 deleteNullComponents ,因此不必在方法调用后重新分配组件。如果不希望出现这种行为,请查看以下线程:

How to deep clone an object in Javascript

class MyService {  
  static deleteNullComponents(components) {
    return components.map(obj =>
      obj["components"].filter(item => item !== null)
    )
  }
}

let pageComponents = [
  {
    "components": [
      null,
      {
        "componentId": "navbar-zJNm0HaP",
        "componentIndex": 1,
        "componentName": "app-builder-navbar",
      },
      null,
      null,
      null,
      {
        "componentId": "features-MJU8gcYR",
        "componentIndex": 5,
        "componentName": "app-builder-features",
      },
      null,
      {
        "componentId": "features-2hsUdwaT",
        "componentIndex": 7,
        "componentName": "app-builder-features",
      },
      null,
      {
        "componentId": "footer-dLvoLZ16",
        "componentIndex": 9,
        "componentName": "app-builder-footer",
      },
      null
    ],
    "name": "Home"
  },
  {
    "components": [
      null,
      {
        "componentId": "navbar-UBdYplVp",
        "componentIndex": 1,
        "componentName": "app-builder-navbar",
      },
      null,
      {
        "componentId": "features-mmEzByeO",
        "componentIndex": 3,
        "componentName": "app-builder-features"
      },
      null,
      {
        "componentId": "features-GZKgh9lV",
        "componentIndex": 5,
        "componentName": "app-builder-features"
      },
      null,
      {
        "componentId": "footer-IyrNODRQ",
        "componentIndex": 9,
        "componentName": "app-builder-footer",
      },
      null
    ],
    "name": "About"
  }
]

// no need to re-assign here, the original object is modified
pageComponents = MyService.deleteNullComponents(pageComponents)
console.log(pageComponents)

Jaromanda X 4 年前

components pageComponents

所以您需要两个循环(forEach/map/filter等实际上只是遍历一个数组)

所以,对于 页面组件 组件 该项的属性

class MyService {  
  static deleteNullComponents(components) {
    components.forEach(obj =>
      obj.components = obj.components.filter(item => item !== null)
    )
  }
}

let pageComponents = [
  {
    "components": [
      null,
      {
        "componentId": "navbar-zJNm0HaP",
        "componentIndex": 1,
        "componentName": "app-builder-navbar",
      },
      null,
      null,
      null,
      {
        "componentId": "features-MJU8gcYR",
        "componentIndex": 5,
        "componentName": "app-builder-features",
      },
      null,
      {
        "componentId": "features-2hsUdwaT",
        "componentIndex": 7,
        "componentName": "app-builder-features",
      },
      null,
      {
        "componentId": "footer-dLvoLZ16",
        "componentIndex": 9,
        "componentName": "app-builder-footer",
      },
      null
    ],
    "name": "Home"
  },
  {
    "components": [
      null,
      {
        "componentId": "navbar-UBdYplVp",
        "componentIndex": 1,
        "componentName": "app-builder-navbar",
      },
      null,
      {
        "componentId": "features-mmEzByeO",
        "componentIndex": 3,
        "componentName": "app-builder-features"
      },
      null,
      {
        "componentId": "features-GZKgh9lV",
        "componentIndex": 5,
        "componentName": "app-builder-features"
      },
      null,
      {
        "componentId": "footer-IyrNODRQ",
        "componentIndex": 9,
        "componentName": "app-builder-footer",
      },
      null
    ],
    "name": "About"
  }
]

MyService.deleteNullComponents(pageComponents)
console.log(pageComponents)

DanG 4 年前

你只需要进入那个物体一层。假设您不关心name属性,则需要以下内容:

// take the array of objects and iterate over them
firstLevelArray.map((secondLevelArray) => {
  // grab each components array in the array of objects, and filter it for null
  return secondLevelArray['components'].filter((possibleComponent) => {
    return possibleComponent != null;
  })
});

不过,您可能希望保留名称,而且在任何情况下,这都是一种非常僵硬的方法,因为您假定了当前的数据结构。这里有一个快速而肮脏的递归方法,它应该处理任意数量的嵌套。。。但是递归在javascript中没有完全正确地实现。您应该使用类似库的下划线进行深入比较。我写这篇文章是为了好玩,也是为了说明问题,因为如果你对javascript还不熟悉,阅读库代码可能会有点困难(甚至对我的小脑袋来说也是如此)。

let deepRemoveNull = function(x) { 
    if (x === null) {
        return;
    } 
    if (Array.isArray(x)) {
        let arr = [];
        for (const i of x) {
            if (x !== null) {
                let result = deepRemoveNull(i);
                // get rid of undefined
                if (result) {
                    arr.push(result);
                }
            }
        }
        return arr;
    } else if (typeof x === 'object') {
        let obj = {};
        for (const key in x) {
            if (x[key] !== null) {
                let result = deepRemoveNull(x[key]);
                // get rid of undefined
                if (result) {
                    obj[key] = result;
                }
            }
        }
        return obj;
    }
    return x;
}

如果你把你的对象传递给上面的函数,它应该对你有用。不要在生产代码中使用上述内容

-2

Joe 4 年前

components = components.filter(function(el) { return el !== null });