使用数组映射以 if 条件过滤结果

Question

我正在尝试使用数组映射来进一步过滤对象，以准备将其发送到服务器以进行保存。我可以过滤到 1 个键值，这很棒，但我想更进一步，并根据内部的布尔值检查它们。

所以，现在这就是我所拥有的 -

$scope.appIds = $scope.applicationsHere.map( function(obj){
        if(obj.selected == true){
            return obj.id;
        }
    });

这对于提取 id 非常有用，但是如果他们选择的值 == false，我不想将它们推送到这个新数组中，所以我设置了一个条件来进一步过滤。这有点奏效，我得到了一个 id 数组，但是 .selected == false 的 id 仍然在数组中，只是值为 null。所以如果我在对象中有 4 个项目，其中 2 个是假的，它看起来像这样 -

 appIds = {id1, id2, null, null};

我的问题是 - 有没有办法在不放空值的情况下做到这一点。感谢阅读！

Answer 1

您可以使用flatMap。过滤和映射合二为一。

$scope.appIds = $scope.applicationsHere.flatMap(obj => obj.selected ? obj.id : [])

Answer 2

如果有人在 2019 年遇到这个问题，这里有一些信息。

我认为 reduce vs map + filter 可能在某种程度上取决于您需要循环的内容。对此不确定，但 reduce 似乎确实更慢。

有一点是肯定的 - 如果您正在寻找性能改进，那么编写代码的方式非常重要！

希望这对某人有所帮助

Answer 3

您应该使用Array.prototype.reduce 来执行此操作。我确实做了一个little JS perf test 来验证这比.filter + .map 更有效。

$scope.appIds = $scope.applicationsHere.reduce(function(ids, obj){
    if(obj.selected === true){
        ids.push(obj.id);
    }
    return ids;
}, []);

为了清楚起见，这里是我在 JSPerf 测试中使用的示例 .reduce：

  var things = [
    {id: 1, selected: true},
    {id: 2, selected: true},
    {id: 3, selected: true},
    {id: 4, selected: true},
    {id: 5, selected: false},
    {id: 6, selected: true},
    {id: 7, selected: false},
    {id: 8, selected: true},
    {id: 9, selected: false},
    {id: 10, selected: true},
  ];
  
  	
var ids = things.reduce((ids, thing) => {
  if (thing.selected) {
    ids.push(thing.id);
  }
  return ids;
}, []);

console.log(ids)

---

编辑 1

注意，截至 2/2018 Reduce + Push 在 Chrome 和 Edge 中最快，但在 Firefox 中比 Filter + Map 慢

Answer 4

您正在寻找.filter() 函数：

  $scope.appIds = $scope.applicationsHere.filter(function(obj) {
    return obj.selected;
  });

这将生成一个数组，其中仅包含“selected”属性为true（或truthy）的那些对象。

edit 抱歉，我正在喝咖啡，我错过了 cmets - 是的，正如 jAndy 在评论中指出的那样，过滤然后只提取“id”值，它会是：

  $scope.appIds = $scope.applicationsHere.filter(function(obj) {
    return obj.selected;
  }).map(function(obj) { return obj.id; });

一些函数库（比如Functional，在我看来并没有得到足够的喜爱）有一个.pluck() 函数来从对象列表中提取属性值，但是原生JavaScript 有一组非常精简的此类工具.