javascript - 对象解构 ({ x, y, ...rest }) 用于将对象的属性列入白名单

标签 javascript ecmascript-6 destructuring ecmascript-next

<分区>

使用 Object rest destructuring可以直接将对象的属性列入黑名单,如下例所示:

const original = {
  a: 1,
  b: 2,
  c: 3,
  evil: "evil",
  ugly: "ugly",
};

const { evil, ugly, ...sanitized } = original;

console.log(sanitized);   // prints { a: 1, b: 2, c: 3 }

我想知道是否存在类似的简洁方法来做同样的事情,但使用属性的白名单(在示例中:{ a, b, c })。很多时候,我必须将可用属性的子集转换为 JSON,这样的功能会使代码更具可读性和安全性。

我发现了一个类似的问题,但它不是完全相同的问题: Is there a more terse way to map properties of one object to another in ES6/ES2015?

编辑:很遗憾,下一个代码不起作用,因为它返回原始对象而不是过滤后的对象。

const sanitized = {a, b, c} = original;     
// sanitized === original

最佳答案

为此,我使用了 2 个辅助函数

export const pickProps = (object, ...props) => (
  props.reduce((a, x) => {
    if (object.hasOwnProperty(x)) a[x] = object[x];
    return a;
  }, {})
);

export const omitProps = (object, ...props) => {
  const no = {...object};
  props.forEach(p => delete no[p]);
  return no;
};

你也可以这样做

const original = {
  a: 1,
  b: 2,
  c: 3,
  evil: "evil",
  ugly: "ugly",
};

const { a, b, c } = original;
const filtered = { a, b, c };

关于javascript - 对象解构 ({ x, y, ...rest }) 用于将对象的属性列入白名单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39147759/

相关文章:

javascript - AngularJS : cannot connect factory to controller

javascript - 可以使用产生式定义词汇语法吗?

javascript - 了解 React Native 中 <FlatList/> 中 renderItem 属性的解构

javascript - 传递带参数的函数,但不传递其执行结果

javascript - 解构时如何将字符串解析为数字?

javascript - 对象解构 : how to use intermediate nested property

javascript - 如何在 React Router v6 中将默认路径 '/' 重定向到 '/home'。当前配置不起作用

javascript - 调试 Google Analytics 链接和下载跟踪

javascript - 为什么我的元素在动画完成后不再隐藏?

javascript - 结合 es6 函数 every 和 sum 并返回 bool 值