无法在 JS 中解构未定义错误的属性

Cannot destructure Property of Undefined Error in JS

当我们尝试从等于的值中解构属性时，会发生“无法解构未定义的属性”错误undefined。

要解决错误，请在解构属性时提供回退，例如
const {name} = undefined || {};。

类型错误无法解构未定义的属性

以下是错误发生方式的 2 个示例。

索引.js


// ⛔️ Cannot destructure property 'name' of undefined as it is undefined
const {name} = undefined;

function test(obj) {
  // ⛔️ Cannot destructure property 'country' of undefined, as it is undefined
  const {country} = obj;
}

// 👇️ called function without providing object
test();

我们试图
从导致错误的值中解构
属性。undefined

如果值为`undefined` # ，则提供空对象的回退

要解决该错误，请在解构时提供空对象的回退，或者如果使用函数，则为参数设置默认值。

索引.js


// ✅ empty object fallback
const {name} = undefined || {};
console.log(name); // 👉️ undefined

// ------------------------------------

// ✅ default parameter set to empty object

function test(obj = {}) {
  const {country} = obj;
  console.log(country); // 👉️ undefined
}

test();
test(undefined);

我们使用了
逻辑或 (||)
运算符。undefined如果左边的值是假的（例如），运算符返回右边的值。

索引.js


const {name} = undefined || {};

console.log(name); // 👉️ undefined

JavaScript 中的假值是：null, undefined, 0, false, ""
（空字符串），NaN（不是数字）。

如果上述六个值中的任何一个位于逻辑或 (||) 运算符的左侧，我们将返回一个空对象。

索引.js


const {name} = undefined || {};
console.log(name); // 👉️ undefined

这有助于我们避免“无法解构未定义的属性”错误。

如果您在函数中遇到错误，请使用默认对象参数

我们在第二个例子中定义了一个带有
默认参数的函数。

索引.js


function test(obj = {}) {
  const {country} = obj;
  console.log(country); // 👉️ undefined
}

test();
test(undefined);

如果未提供参数，或者undefined在调用函数时提供了值，则函数将传递默认参数值。

如果您使用不等于的参数调用该函数，undefined则不会使用默认值。

索引.js


function getEmployee(emp = {}) {
  console.log(emp); // 👉️ null

  const {name, age} = emp;

  console.log(name);
  console.log(age);
}

// ⛔️ TypeError: Cannot destructure property 'name' of 'emp'
getEmployee(null);

您可以在解构时提供一个空对象的回退值来解决错误。

索引.js


function getEmployee(emp = {}) {
  const {name, age} = emp || {};

  console.log(name); // 👉️ undefined
  console.log(age); // 👉️ undefined
}

getEmployee(null);

如果逻辑或 (||) 运算符左侧的值为假，则使用空对象。

或者，使用可选的链接 (?.) 运算符

或者，您可以使用
可选的链接运算符 (?.)
来短路，而不是在引用为
undefinedor时抛出错误null。

索引.js


const fromDb = undefined;
const name = fromDb?.name;
console.log(name); // 👉️ undefined

const obj = {name: 'Tom'};
const n = obj?.name;
console.log(n); // 👉️ "Tom"

fromDb变量存储一个undefined值，所以我们短路返回
而undefined不是抛出错误。

如果引用不是空值（null或undefined），则运算符返回相应的值。

您可以使用可选的链接运算符来访问深度嵌套的对象属性。

索引.js


const fromDb = undefined;
const floor = fromDb?.country?.address?.floor;
console.log(floor); // 👉️ undefined

这种方法可以帮助我们避免在引用为空（null或undefined）时出现错误。

结论

当我们尝试从等于的值中解构属性时，会发生“无法解构未定义的属性”错误undefined。

要解决错误，请在解构属性时提供回退，例如
const {name} = undefined || {};。

–