Javascript 变量中具有属性名称的对象解构

Question

是否可以通过使用存储在变量中的属性名称来解构 Javascript 中的对象？

这就是我们目前解构的方式。

const myObject = {a: 1, b: 2, c: 3};
let {a, b, c} = myObject;
console.log(a, b, c);

我希望能够在变量中存储属性个名字：

const myObject = {banana: 1, apple: 2, strawberry: 3};
const chosenFruit = "banana";
const { [[chosenFruit]], ...theRest } = myObject;
console.log(banana); // Should be 1

为了全面披露，我希望能够执行此操作的原因是我想从对象中删除属性“香蕉”。所以在我的用例中，我想留下不包含 banana 属性的 theRest 对象，但有时我想遍历一个值数组（例如一周中的几天）并以编程方式快速解构对象。

这可能吗？如果可以，怎么做？

谢谢！

Answer 1

你可以拿 computed property names and rename the property (assigning to new variable names).

const myObject = { banana: 1, apple: 2, strawberry: 3 };
const chosenFruit = "banana";
const { [chosenFruit]: fruit, ...theRest } = myObject;

console.log(fruit); // 1
console.log(theRest);

Answer 2

const myObject = {banana: 1, apple: 2, strawberry: 3};
const chosenFruit = "banana";
const newThing = { ...myObject };

delete newThing[chosenFruit];

console.log(myObject, newThing);

这个版本使用解构克隆，然后去掉不需要的属性。

Answer 3

具有解构参数的变体：

const pick = (fruit, {[fruit]: out, ...fruits}) => [out, fruits];

const [fruit, fruits] = pick('banana', basket);

console.log(fruit);
console.log(fruits);
console.log(basket);

<script>const basket = { banana: 1, apple: 2, strawberry: 3 };</script>

Answer 4

这也适用于非动态选择，如果您希望变量名称与水果名称相同

const myObject = { banana: 1, apple: 2, strawberry: 3 };
const { banana, ...theRest } = myObject;

console.log(banana); // 1
console.log(theRest);

Javascript 变量中具有属性名称的对象解构

Javascript object destructure with property name in variable

javascript

destructuring

Javascript 变量中具有 属性 名称的对象解构

Javascript object destructure with property name in variable

javascript

destructuring

Javascript 变量中具有属性名称的对象解构