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

Question

我正在创建一个Angular应用程序，其中包含带有复选框的项目。 当用户点击复选框时，我会将选中的项目记录到对象中。 该对象的格式如下：

{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]

我的代码有什么问题？

- user12138540

Answer 1

使用_.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>

- Shiv Kumar Baghel

Answer 2

迭代对象的键。

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

- Rishab

Answer 3

你可以使用 reduce 来实现你想要的功能：

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)

- Clarity

Answer 4

假设您仅在此目的中使用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);

- Constantin Groß

Answer 5

你可以使用原生的 filter 函数来实现这一点，而不需要使用 lodash。

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

- TommyBs

Answer 6

使用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 版本：

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>

- Ori Drori