destructuring - Javascript object destructure with property name in variable - Stack Overflow

admin管理员组

文章数量:1339887

Is it possible to destructure an object in Javascript by using a property name stored in a variable?

This is how we destructure at the moment.

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

I would like to be able to store property names in variables:

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

For full disclosure, the reason I want to be able to do this is I want to remove the property "banana" from the object. So in my use case I want to be left with the theRest object which doesn't include the banana property, but there have been times I wanted to iterate through an array of values (e.g. days of the week) and programatically destructure objects quickly.

Is this possible? If so, how?

Thanks!

Is it possible to destructure an object in Javascript by using a property name stored in a variable?

This is how we destructure at the moment.

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

I would like to be able to store property names in variables:

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

For full disclosure, the reason I want to be able to do this is I want to remove the property "banana" from the object. So in my use case I want to be left with the theRest object which doesn't include the banana property, but there have been times I wanted to iterate through an array of values (e.g. days of the week) and programatically destructure objects quickly.

Is this possible? If so, how?

Thanks!

• javascript
• destructuring

Share Improve this question Follow edited Nov 18, 2020 at 15:04 Thomas Clayson asked Nov 18, 2020 at 14:51 Thomas ClaysonThomas Clayson 30k2626 gold badges152152 silver badges226226 bronze badges 8

• delete myObject.banana; <= done – Taplar Commented Nov 18, 2020 at 14:53
• @Taplar you mean delete myObject[choosenFruit] – Ilijanovic Commented Nov 18, 2020 at 14:55
• You did say your goal was to remove banana from the object. – Taplar Commented Nov 18, 2020 at 14:55
• 1 Are you after something like const { [chosenFruit]: banana, ...theRest } = myObject; ? you would have to explicitly type banana in the destructuring though – Nick Parsons Commented Nov 18, 2020 at 14:56
• 1 So you could clone it and then remove it – Taplar Commented Nov 18, 2020 at 14:57

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 13

You could take a puted 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);

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

delete newThing[chosenFruit];

console.log(myObject, newThing);

This version uses deconstruction to clone, and then removes the unwanted property.

A variation with destructuring parameters:

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>

This also works for non-dynamic choices and also if you want to have the variable name same as the fruit name

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

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

本文标签： destructuringJavascript object destructure with property name in variableStack Overflow