解构嵌套在数组中的对象

Question

我有以下对象结构

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

我想在定义这些常量的同一行代码中进行破坏，这些常量是我从 react 中的钩子获得的。

const [ session, loading ] = useSession();

我目前正在这样做。 有替代方案吗？

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

我想知道这样的事情是否可以做到：

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

Answer 1

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

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

Answer 2

笔记：

1. 如果sessionData为null或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，则不能分配一个内联默认值以固定TypeError如上所述。

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

也许我错过了一些东西，但我无法使用默认值让它工作。 我解决这个问题的唯一方法是先获取sessionData ，然后在使用默认值的同时处理它。

 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. 小心“陷阱”

您可能已经注意到|| {} || {}上面代码中的代码，即使我们向sessionData添加了默认值。 这是因为默认值仅适用于undefined ，而不适用于null 。

同样，最好在useSession上添加合并，因为如果useSession()返回null或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);

最后

首先获取sessionData和/或expires （又名session ）实际上一点也不差，因为您可能还想获取其他属性，即session.expires 、 sessionData.token等。它还允许您修复提到的问题多于。

这篇很棒的文章（Javascript 中的对象解构最佳实践）深入讨论了上述注释。 花时间阅读。

Answer 3

您提供的对象结构无效。 我使用以下构造来获取user和token ：

 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'

有关更多信息，请参阅ES6 深度嵌套对象解构