动态解构 props React

Question

Imaging we have a props , a really large object:

{
 "firstname": "John", 
 "lastname": "Doe",
 "age": 11,
 "mode: "expert",
 "website": "stackoverflow.com"
 "protocol": "https",
 "job": "dev",
 "env": "main",
 ..... and a lot of key-values pairs coming
} 

What usually we are calling to create "component variables":

let {firstname, 
     lastname, 
     age, 
     mode,
     website,
     protocol,
     job,
     env
     ...and a lot of "keys" as variable names} = props
// so we can call variable, {age} for example

I don't like to type all these variables in let {} , do we have something dynamic to declare "all keys" dynamically? I am not sure it's possible.

Of course I can use {props.firstname} in my code.

There is a way to create dynamically variables in let {} scope?

Any help is appreciated.

Answer 1

You can get all keys dynamically by Object.keys

 const obj = { "firstname": "John", "lastname": "Doe", "age": 11, "mode": "expert", } const keys = Object.keys(obj) console.log(keys) //from these keys, you can get values based on your needs //the first key value is `firstname` //the first value is `John` console.log(keys[0], obj[keys[0]])

Answer 2

Do you want to use (destructure) some props, and leave the rest in another object? You can do that with ie

let testobject = {
 "firstname": "John", 
 "lastname": "Doe",
 "age": 11,
 "mode": "expert"
}

const {firstname, lastname, ...verySmartFunc} = testobject ;

console.log(verySmartFunc);
//now your object is verySmartFunc, 
//created with those keys you haven't destructured, and has next properties
{
  age: 11,
  mode: "expert"
}

If that's not what you're looking for and I misunderstood your question, I'd say you're already having props as an object with all those keys.

EDIT: Maybe this is what you're looking for, based on Nick Vu's answer.

const obj = {
 "firstname": "John", 
 "lastname": "Doe",
 "age": 11,
 "mode": "expert",
} 

const keys = Object.keys(obj)
let i = 0;
for (var key in keys) {
    window[keys[i]] = obj[keys[i]];
  i++
}


console.log(firstname); //result is "John"