解构嵌套在数组中的对象

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], a.k.a. 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）实际上一点也不差，因为您可能还想获得其他属性，即 {{1} }、session.expires 等。它还允许您修复上述问题。

此 awesome article (Object destructuring best practice in 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 deep nested object destructuring