JavaScript解构并赋值到新对象

Question

在JavaScript/Typescript中，如何使用简短的方式解构并分配到一个新对象中呢？

const payload: MyPayload = { a: 1, b: 2, c: 3, d: 4, e: 5 }

// Destruct
const { a, c, e } = payload;

// New Obj
const newPayload = {
  a, c, e
};

- Scaraux

Answer 1

您可以使用对象解构赋值和简写属性来创建一个新对象。具体请参考destructuring assignment和short hand properties的相关文档。

const
    getParts = ({ a, c, e }) => ({ a, c, e }),
    payload = { a: 1, b: 2, c: 3, d: 4, e: 5 },
    parts = getParts(payload);

console.log(parts);

- Nina Scholz

---

如果 MyPayload 中的任何一个属性是可选的，我猜这段代码将无法编译。 - georg

Answer 2

您可以使用IIFE。

const payload = { a: 1, b: 2, c: 3, d: 4, e: 5 }

const obj = (({a,c,e}) => ({a,c,e}))(payload)

console.log(obj)

- Code Maniac

Answer 3

你可以在解构期间使用对象剩余创建对象：

const payload = { a: 1, b: 2, c: 3, d: 4, e: 5 }

const { b, d, ...newPayload } = payload

console.log(newPayload)

- Ori Drori

---

这仅在您了解所有其他参数的情况下才有效。不是非常典型的用例。 - Martin Rauscher

这实际上是一个标准用例。您可以省略属性来创建新对象，并且有时会使用省略的属性。例如，在使用React进行开发时，我们经常使用它来为子组件准备props。 - Ori Drori

这在很多情况下都是危险的。您没有保护措施来防止添加任何其他值。例如，如果您在将数据库查询结果过滤为 HTTP 响应返回之前从中过滤敏感字段，则添加的任何新敏感字段都将保留。 - Eric Haynes