假设我有一个物体:

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

出于trivia的目的,如果您想从原始数据中删除不需要的字段(我建议这样做,因为它涉及一些丑陋的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相关问答推荐

当Redux提供程序访问Reduxstore 时,可以安全地从Redux提供程序外部调用钩子?

禁用.js文件扩展名并从目录导入隐式根index.js时,找不到NodeJS导入模块

使用Nuxt Apollo在Piniastore 中获取产品细节

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

Reaction-SWR-无更新组件

每次重新呈现时调用useState initialValue函数

如果NetSuite中为空,则限制筛选

JAVASCRIPT SWITCH CASE语句:当表达式为';ALL';

如何在尚未创建的鼠标悬停事件上访问和着色div?

无法使用npm install安装react-dom、react和next

TypeORM QueryBuilder限制联接到一条记录

使用python,我如何判断一个html复选框是否被隐藏,以及它是否被S选中?

使用jQuery每隔几秒钟突出显示列表中的不同单词

JS/css:将数字输入的S函数和可调整大小的元素S函数绑定在一起

如何从嵌套的json中获取最大值

从客户端更新MongoDB数据库

我遇到了Phaser 3碰撞的问题

智能合同与Ether.js的集成

当你点击数组时,如何在相应的元素中输出?