Question

我正在尝试寻找有关销毁的信息：

如果我这样做：

const { id, category: { categoryId } } = {};

它引发错误

VM136:1 Uncaught TypeError: Cannot destructure property "categoryId" of "undefined" or "null".

因为我们正在尝试访问类别的道具categoryId，但类别未定义。

是否有解决方案只能在一次销毁线路上做到这一点？我尝试过：

const { id, category: { categoryId = null } = {} } = {};

OR 

const { id, category: { categoryId } = { categoryId = null } = {};

但是它不起作用。我可以轻松做到：

const { id, category } = {};
let categoryId = null;
if (category) ({ categoryId } = category);

谢谢！

Answer 1

您必须在道具的右侧具有categoryId


const { id, category: { categoryId } } = {id: 0, category: {categoryId: 0}}

或

const props = {id: 0, category: {categoryId: 0}} // your props have to look like this

const { id, category: { categoryId } } = props;

Answer 2

您可以拥有一个返回被破坏属性的IIFE，并在其中添加对category的检查：

const obj = {
  id: 5,
  category: null
};

const {
  id,
  category: { categoryId }
} = (({ id, category }) => ({ id, category: category || {} }))(obj);

console.log(id, categoryId);

Answer 3

不幸的是，没有语法允许您在有东西存在的情况下有选择地进行销毁，您必须首先检查要销毁的事物是否存在。

有一个针对optional chaining和some discussion around how that might affect destructuring的建议，但这短期内对您没有帮助。

同时，您可以查看lodash get，它可以防止您看到抛出的错误，并且还可以为不存在的错误提供默认值。

Answer 4

是的，可以使用默认值

var { id, category: { categoryId } = {categoryId: 'some'}} = {}

console.log(categoryId)


// When you set a default value for categoryId to it will always get that default value 
// in case the destrucutured value is undefined

var { id, category: { categoryId = null } = {}} = {};

console.log(categoryId)

要了解这一点，您可以使用babel将其转换为ES5

"use strict";

var _ref = {},
  id = _ref.id,
  _ref$category = _ref.category;
  _ref$category = _ref$category === void 0 ? { categoryId: 'some' } : _ref$category;
var categoryId = _ref$category.categoryId;
console.log(categoryId);

您可以从此简化的代码中清楚地了解内部结构的分解工作方式

从右侧的对象中检查值，如果找到该值，则忽略默认值
如果找不到该值或未定义该值，请检查默认值是否还有其他保持原样的值，

在此示例的上下文中，如果您看到在对象上找不到id和category，则它们的值为undefined，但是这里我们为该类别设置了默认值，因此它使用value以获取类别的值，即{ categoryId : 'some' }。现在，当您进一步分解类别时，实际上是在分解{categoryId: 'some'}，因此categoryId的最终值为some

在此示例中

var { id, category: { categoryId = null } = {}} = {};

类别的值将是undefined，因此当您进一步获取categoryId的值时，它将检查类别的值，因为它是undefined，它将使用null作为默认值

Answer 5

如果未定义类别，则无法获取categoryId。

const { id, category: { categoryId } } = { category: { categoryId: 1 } };

console.log(categoryId)

没有“ Uncaught ReferenceError：未定义props”的销毁

5 个答案: