在變量中使用屬性名稱的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”。 所以在我的用例中，我想留下不包含banana屬性的theRest對象，但有時我想遍歷一組值（例如一周中的幾天）並以編程方式快速解構對象。

這可能嗎？ 如果是這樣，如何？

謝謝！

Answer 1

您可以采用計算出的屬性名稱並重命名該屬性（ 分配給新的變量名稱）。

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