假设我有一个物体:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

我想通过过滤上面的对象来创建另一个对象,这样我就有了类似的东西.

 {
    item1: { key: 'sdfd', value:'sdfd' },
    item3: { key: 'sdfd', value:'sdfd' }
 }

我正在寻找一种干净的方法来使用Es6实现这一点,所以我可以使用spread操作符.

推荐答案

如果有一个允许值列表,可以使用以下方法轻松地将其保留在对象中:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    obj[key] = raw[key];
    return obj;
  }, {});

console.log(filtered);

它使用:

  1. Object.keys列出raw中的所有属性(原始数据),然后
  2. Array.prototype.filter to select keys that are present in the allowed list, using
    1. Array.prototype.includes以确保他们在场
  3. Array.prototype.reduce以仅使用允许的属性构建新对象.

这将使用允许的属性进行浅层复制(但不会复制属性本身).

您还可以使用the object spread operator创建一系列对象,而无需对其进行变异(感谢rjerue for mentioning this):

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    return {
      ...obj,
      [key]: raw[key]
    };
  }, {});

console.log(filtered);

出于琐事的目的,如果您想从原始数据中删除不需要的字段(我建议这样做,因为它涉及一些丑陋的Mutations ),您可以像这样反转includes判断:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

我加入这个例子是为了展示一个基于Mutations 的解决方案,但我不建议使用它.

Javascript相关问答推荐

React 什么时候调用组件构造函数,执行流程是怎样的?

按 ID 查找和更新嵌套数组元素

React Native FlatList 项目消失

如何将下拉菜单与按钮对齐

使用数组字符串查找性能可行性

如何解决这个错误“Uncaught TypeError: inputArgs[0].match is not a function”

当我在 rxjs 的管道中遇到错误时如何执行“取消订阅”?

javascript中的第n个子选择器

画布 putimagedata 有时不会像预期的那样绘制

从具有相同 id 的元素列表中动态获取特定元素的值

如何有条件地在 useEffect 中获取

Google Sheet App Script:将 1 个值从一张表匹配到另一张表,然后如果条件满足设置背景

使用 useState 挂钩更新对象数组

如何添加活动类以链接到当前页面和语言环境?

.push( ) 没有更新变量

findIndex 方法在值存在时不检索索引

为什么在循环外声明变量更快?

KnockoutJS - 如何使用可观察数组隐藏 foreach 中的某些元素?

在 map Typescript 中添加额外的属性类型

无法在 _app.js 中使用 getStaticProps