如何有条件地解构对象？

Question

我有以下解构：

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
        image: picture,
    } = {},
} = data

问题是gallery 有时是null（不是gallery 中的picture），即使我需要的是gallery 中的picture（如果它存在）。换句话说，gallery: null，而不是gallery.image: null。

因此，我得到：

null 不是对象

gallery.image 的错误消息。

如何有条件地解构以便gallery.image 在存在时使用，但gallery 在为空时不解构？

Answer 1

仅当值为 undefined 而不是 null 时，回退才有效

• 这将起作用：

const data = {
  user: {
    username: 'Alice',
    image: 'alice.png',
    uid: 1
  },
  gallery: undefined
};

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
        image: picture,
    } = {},
} = data;

console.log(username, image, uid, picture);

• 但这不会：

const data = {
  user: {
    username: 'Alice',
    image: 'alice.png',
    uid: 1
  },
  gallery: null
};

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
        image: picture,
    } = {},
} = data;

console.log(username, image, uid, picture);

---

因此，您可以手动创建从 null 到 {} 的后备，然后再像这样破坏它：

const data = {
  user: {
    username: 'Alice',
    image: 'alice.png',
    uid: 1
  },
  gallery: null
};

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
      image: picture,
    }
} = {...data, gallery: data.gallery || {}};

console.log(username, image, uid, picture);