解构嵌套在数组中的对象

Question

I have the following object structure

session: {
  expires: String,
  sessionData: {
    user: Object,
    token: String
  }
}

I want to do the destruct in the same line of code that I define these constants that I get from a hook in react.

const [ session, loading ] = useSession();

I am currently doing it this way. Is there an alternative?

 const [ session, loading] = useSession();
 const { user } = session.sessionData;

I want to know if something like this can be done:

 const [ user: session: {sessionData: user}, loading] = useSession();

Answer 1

您可以像这样解构来设置user变量：

const [{sessionData: { user }}, loading] = useSession();

Answer 2

NOTES:

1. This code will error if sessionData is null or undefined :

const [{sessionData: { user }}, loading] = useSession();

 const useSession = () => [{ expires: new Date(Date.now() + (3600 * 1000 * 24)), sessionData: null }, false]; const [{ sessionData: {user}}, loading] = useSession(); console.log('user:', user, 'loading:', loading);

2. Using the same code, you can't assign an inline default value to fix the TypeError described above.

 const someData = { foo: 'foo', bar: 'bar' }; //assign `baz: 'default'` to avoid `TypeError` if `baz` property does not exist const {foo, bar, baz = 'default'} = someData; console.log(foo, bar, baz); //sadly, this doesnt work here. const useSession = () => [{ expires: new Date(Date.now() + (3600 * 1000 * 24)), sessionData: null }, false]; const [{ sessionData: {user} = {} }, loading] = useSession(); console.log('user:', user, 'loading:', loading);

Maybe I'm missing something but I just can't get it to work using default values. The only way I fixed this is getting sessionData first then work on that afterwards while using default values.

 const useSession = () => [{ expires: new Date(Date.now() + (3600 * 1000 * 24)), sessionData: null }, false]; //assign {} to `sessionData` if it is undefined const [{expires, sessionData = {} }, loading] = useSession(); console.log(sessionData); //null //above default value will still fail if sessionData is null. // to fix, coalesce to {} const {user, token} = sessionData || {}; console.log(user, token);

3. Be careful with "Gotcha's"

You may have noticed the || {} || {} code in the above code even though we added a default value to sessionData . This is because default values only apply to undefined , not null s.

On the same note, it is better to add a coalesce on useSession too since your code will break if useSession() returns a null or undefined .

 const useSession = () => { return null; }; //assign {} to `sessionData` if it is undefined console.log(useSession()); //null // useSession()[0], aka session is undefined // need to add default since we are destructuring `sessionData` from `session` const [{ sessionData } = {}, loading] = useSession() || []; //// this also works but it assigns `sessionData = {}` //const [{ sessionData = {} } = {}, loading] = useSession() || []; // wont be doing that since we are proving the next point: //above default value will still fail since `sessionData` will be undefined // to fix, coalesce to {} const {user, token} = sessionData || {}; console.log(user, token);

Finally

Getting sessionData and/or expires (aka session ) first actually isn't bad at all since you may also want to get the other properties, ie, session.expires , sessionData.token , etc. It also allows you to fix the Gotchas mentioned above.

This awesome article (Object destructuring best practice in Javascript) discusses the above notes in-depth. Take time to read.

Answer 3

The object structure you provided is not valid. I came to get user and token with following construct:

 var a = { session: { expires: '1d', sessionData: { user: 'myUser', token: 'token' } } } var {session: {sessionData: {user, token}, expires}} = a console.log(user, token, expires) // 'myUser token 1d'

For more info, see ES6 deep nested object destructuring