无法在 JS 中读取未定义的属性（读取“长度”）

作者

无法在 JS 中读取未定义的属性（读取 ‘length’）

TypeError: Cannot read property ‘length’ of Undefined in JS

length访问某个值的属性时，会发生“TypeError: 无法读取未定义的属性（读取‘长度’）”错误undefined。

要解决该错误，请确保仅访问length支持它的数据类型的属性 – 数组和字符串。

无法读取未定义的属性长度

下面是错误如何发生的示例。

索引.js
const arr = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'length')
arr.length;

使用if语句避免错误

避免错误的一种方法是使用简单的if语句。

索引.js
// ✅ with arrays
const arr = [];

if (arr) {
  console.log(arr.length); // 👉️ 0
}

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

// ✅ with strings
const str = 'abc';

if (str) {
  console.log(str.length); // 👉️ 3
}

在访问属性之前，我们检查变量是否存储真值length
。

undefined是一个假值，因此if如果变量存储 ，该块将不会运行
undefined。

如果值未定义则提供回退值

或者，在访问该属性之前为该值提供回退length
。

索引.js
const fromDb = undefined;

// ✅ with Arrays
const arr = fromDb || [];
console.log(arr.length); // 👉️ 0

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

// ✅ with Strings
const str = fromDb || '';
console.log(str.length); // 👉️ 0

如果右边的值是假的（例如 ），逻辑 OR (||) 运算符返回左边的值undefined。

我们使用了空数组或空字符串的回退。

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

如果值为 ，则使用可选的链接 (?.) 运算符进行短路
undefined。

索引.js
const arr = undefined;

const result = arr?.length || 0;
console.log(result); // 👉️ 0

console.log(arr?.length); // 👉️ undefined

如果左侧的值为空值（或），则可选链接(?.)运算符短路并返回。undefinednullundefined

0如果访问
length属性返回，我们还使用逻辑 OR (||) 运算符返回undefined，但这不是必需的。

访问前检查值的类型是否正确length

您还可以在访问属性之前检查值的类型是否正确
length。

索引.js
const value = undefined;

// ✅ Check if array before accessing length
if (Array.isArray(value)) {
  const result = value.length;
  console.log(result);
} else {
  console.log('The value is NOT an array');
}

// ✅ Check if string before accessing length
if (typeof value === 'string') {
  const result = value.length;
  console.log(result);
} else {
  console.log('The value is NOT a string');
}

如果值是数组，则Array.isArray
()
方法返回，否则返回。truefalse

我们还使用了typeof运算符来检查值是否为字符串。

提供回退值以避免错误

您还可以在访问属性之前就地提供备用值
length。

索引.js
const fromDb = undefined;

const result1 = (fromDb || []).length;
console.log(result1); // 👉️ 0

const result2 = (fromDb || '').length;
console.log(result2); // 👉️ 0

如果变量存储的是假值，则返回右边的值。

使用三元运算符避免错误

您还可以使用
三元运算符，这与语句非常相似if/else。

索引.js
const str = undefined;

const result = str ? str.length : 0;
console.log(result); // 👉️ 0

如果问号左边的值为 falsy，则运算符返回冒号左边的值，否则返回冒号右边的值。

追踪变量赋值的undefined位置

如果错误仍然存​​在，您必须追踪变量在何处被赋值
undefined。

该length属性仅存在于数组和字符串中，因此尝试在任何其他类型的值上访问它会导致错误。

一个常见的值来源undefined是将不返回任何内容的函数的输出分配给变量。

许多在适当位置改变对象的内置方法返回undefined。

所有不返回值的 JavaScript 函数都返回undefined。

访问索引不存在的数组

当您在不存在的索引处访问数组并取回值时，通常会发生该错误undefined。

索引.js
const arr = ['bobby', 'hadz', 'com'];

// ⛔️ TypeError: Cannot read properties of undefined (reading 'length')
const result = arr[3].length;
JavaScript 索引是从零开始的，因此数组中的第一个元素的索引为0，最后一个元素的索引为。 array.length - 1

示例中数组的最后一个索引是2.

索引.js
const arr = ['bobby', 'hadz', 'com'];

const result = arr[2].length;
console.log(result); // 👉️ 3

您可以使用可选的链接 (?.) 运算符来避免在访问可能不存在的数组元素时出现错误。

索引.js
const arr = ['bobby', 'hadz', 'com'];

const result = arr[100]?.length;
console.log(result); // 👉️ undefined

如果您宁愿将该值默认为0if it’s undefined，请使用逻辑 OR (||) 运算符。

索引.js
const arr = ['bobby', 'hadz', 'com'];

const result = arr[100]?.length || 0;
console.log(result); // 👉️ 0

如果您必须访问可能不存在的索引处的嵌套数组元素，请使用相同的方法。

索引.js
const nestedArr = [];

console.log(nestedArr?.[0]?.length); // 👉️ undefined
console.log(nestedArr?.[0]?.[0]?.length); // 👉️ undefined
console.log(nestedArr?.[0]?.[0]?.[1]?.length); // 👉️ undefined

解决使用类时的错误

如果在使用类时出现错误，则必须声明一个类属性并将其设置为空字符串或空数组，然后再访问它。

索引.js
class Person {
  first = '';

  getLength() {
    return this.first.length;
  }
}

const p1 = new Person();
console.log(p1.getLength()); // 👉️ 0

我们初始化了类属性的值first。如果我们不这样做，我们就会在尝试访问该属性时遇到错误length。