JS中的对象解构——嵌套对象

Question

如何处理可能具有未定义内部对象的嵌套对象的解构？

例如

我有一个 xhr 请求 returns {person: user: {}}

例如：const xhrResponse = {person: user: 'hi'}}

我只对用户部分感兴趣，所以我破坏了。

const {person: {user}} = xhrResponse

console.log(user) => 'hi'

但是如果 api returns {person: null}

我的解构失败 Cannot match against 'undefined' or 'null'.

我有一个解决方案，但我觉得可能有更优雅的解决方案。

解决方案

const handleResponse(res) => res.person ? res : {person: user: {}}

有没有更好的方法来处理这个问题？甚至另一种方式，更好这个词的使用有时是意见的同义词：D

更完整的用例：

$q.all([somePromise, someOtherPromise, getPersonPromise])
  .then(promises => [vm.promise1, vm.promise2, {person: {user: vm.user}] = promises);

Answer 1

您也可以为嵌套内容添加默认值：

const handleResponse = ({ person: { user = {}} = {}} = {}) => {
  console.log(user);
}

handleResponse({});

（我假设你根据你的箭头函数使用 es6）

编辑：抱歉，仅适用于未定义的值，但如果值为空则无效无论如何都会在这里留下答案，因为它可能对其他读者有用

Answer 2

就个人而言，我喜欢清楚地看到我的函数正在接收的参数。

我将采用此解决方案：

const handleResponse = (response) => {
  const { person: { user } = {} } = response || {};

  // since user is the value to be used you don't need to set a default unless you need it
  if (user) // do your stuff here
}

进行繁琐的解构可能会导致无法阅读的代码

所以进行渐进式解构，对我来说是一个更好的解决方案。

Answer 3

你能用这个吗？

const {user} = xhrResponse.person || {};

对于更新的用例，我想知道这是否可行？

$q.all([
  somePromise,
  someOtherPromise,
  getPersonPromise.then(res => (res.person || {}).user)
]).then(promises => [vm.promise1, vm.promise2, vm.user] = promises);

JS中的对象解构——嵌套对象

Destructuring Object in JS - Nested Object

javascript

destructuring

node.js