Question

我正在创建一个角度应用程序，并且我的项目带有复选框。当用户单击复选框时，我会将选中的项目记录到对象中。该对象看起来像这样：

{1: false, 7: true, 8: true};

当用户单击删除按钮时，我只需要获取选定的项目ID。

因此，我需要按值过滤对象，结果得到一个整数数组。

我在lodash库中尝试了以下代码：

console.log(_.pick(this.selectedItems, _.identity));

return _.pick(this.selectedItems, function (value, key) {
        return value;
      });

但这将返回一个空数组。

我需要获取的是一个数组[7,8]

我的代码有什么问题？

Answer 1

您是如此接近解决方案。

如果您已经在使用lodash库，则可以使用以下代码段获得所需的结果：

return _.keys(_.pickBy(this.selectedItems, function (value, key) {
  return value;
}));

这将返回所选ID的数组。

或者您也可以像这样使用“香草” ES6：

const selectedItemsArray = [];
Object.keys(this.selectedItems).forEach((key, index) => {
  if (this.selectedItems[key] === true) {
    selectedItemsArray.push(key);
  }
});

selectedItemsArray数组将包含选定的ID。

Answer 2

使用_.pickBy并使用_.keys然后获取已过滤对象的键。

var obj = {
  1: false,
  7: true,
  8: true,
};


var res = _.keys(_.pickBy(obj, function(value, key) {return value;}))
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.js"></script>

Answer 3

您可以通过使用本机filter函数来实现而不用破折号

let vals = Object.keys(this.selectedItems).filter(k => this.selectedItems[k] == true)

Answer 4

迭代对象的键

var obj = {
  1: false,
  7: true,
  8: true,
};

var filteredObj = Object.keys(obj).reduce((p, c) => {    
  if (obj[c]) p[c] = obj[c];
  return p;
}, {});

console.log(Object.keys(filteredObj))

Answer 5

您可以使用const data = {1: false, 7: true, 8: true}; const filtered = Object.entries(data).reduce((acc, [key, value]) => { if (value) return [...acc, key]; return acc; }, []) console.log(filtered)来实现所需的目标：

.eyes {
  padding:20px;
  background: lightblue;
  display: inline-flex;
}

.eyes span{
  width: 80px;
  height: 80px;
  background:grey;
  border-radius:50%;
  margin:10px;
  position:relative;
}
.eyes span:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(black 7px, white 8px);
  animation:blink 0.8s linear infinite alternate;
}
@keyframes blink {
  from {
    clip-path: ellipse(50% 50% at 50% 50%);  
  }
  to {
    clip-path: ellipse(50%  0% at 50% 50%);
  }
}

Answer 6

仅在为此目的而仅使用lodash而不是在项目中其他任何地方的情况下，这是仅使用内置方法（Object.keys()与Array.prototype.filter()结合使用）的解决方案：

const selectedItems = {
  1: false,
  7: true,
  8: true
};

const deleteIds = Object.keys(selectedItems).filter((item) => {
  return selectedItems[item] === true
});
console.log(deleteIds);

Answer 7

使用lodash时，您需要使用_.pickBy()而不是_.pick()，因为_.pick()不接受回调。

这是由_.flow()生成的函数，该函数将获取具有true值的密钥，并将其转换为数字：

const { flow, partialRight: pr, pickBy, identity, keys, map } = _

const fn = flow(
  pickBy, // get the items by identity - this will remove keys with false values
  keys, // get the keys
  pr(map, Number) // map to numbers
);

const selectedItems = {1: false, 7: true, 8: true};

const result = fn(selectedItems);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

还有lodash / fp terser版本：

const { flow, pickBy, identity, keys, map } = _

const fn = flow(
  pickBy(identity), // get the items by identity - this will remove keys with false values
  keys, // get the keys
  map(Number) // map to numbers
);

const selectedItems = {1: false, 7: true, 8: true};

const result = fn(selectedItems);

console.log(result);

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

按值过滤对象键并映射到数组

7 个答案: