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

作者

目录

TypeError: Cannot read Property ‘split’ of Undefined in JS

  1. 无法在 JS 中读取未定义的属性（读取“拆分”）
  2. 无法在 JS 中读取 null 的属性（读取“split”）

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

split()尝试在存储值的变量上调用方法
时出现“无法读取 JS 中未定义的属性（读取‘split’）”错误undefined。

要解决该错误，请确保仅对split字符串调用该方法。

无法读取未定义的属性拆分

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

索引.js
const str = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'split')
str.split(',');

我们试图在导致错误的值String.split()上调用该方法。undefined

调用前检查变量是否为字符串split


在调用方法之前，您可以使用typeof运算符检查
变量是否存储字符串split()。

索引.js
const str = undefined;

if (typeof str === 'string') {
  const result = str.split(',');
  console.log(result);
} else {
  // 👇️ this runs
  console.log('The variable does NOT store a string');
}

该if块仅在变量存储字符串时运行，否则
else运行该块。

使用可选链 (?.) 解决错误

如果引用为空，您还可以使用可选的链接运算符进行短路。

索引.js
const str = undefined;

const result = str?.split(',') || [];

console.log(result); // 👉️ []

console.log(str?.split(',')); // 👉️ undefined

如果左侧的值为空值（或） ，则可选链接(?.)运算符会短路，而不是抛出错误。undefinednull

检查变量是否没有存储undefined

您还可以显式检查变量是否未undefined在if语句中存储值。

索引.js
const str = undefined;

if (str !== undefined) {
  const result = str.split(',')
  console.log(result)
} else {
  console.log('The variable has an undefined value')
}

我们明确地检查变量不存储undefined值。

如果变量不存储undefined值，if则块运行，否则，else块运行。

如果变量存储则提供回退值undefined

如果变量存储值，您可以使用逻辑 OR (||) 运算符提供空字符串的回退值undefined。

索引.js
const str = undefined;

const result = (str || '').split(',');

console.log(result); // 👉️ ['']

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

但是，请注意，split()在这种情况下，该方法将返回一个包含空字符串的数组。

如果分隔符不包含在字符串中，则该split方法返回包含整个字符串的单个元素数组。

索引.js
const str = undefined;

const result = (str || 'abc').split(',');

console.log(result); // 👉️ [ 'abc' ]

使用三元运算符解决错误

您也可以使用三元运算符来解决错误。

索引.js
const str = undefined;

const result = typeof str === 'string' ? str.split(',') : [];

console.log(result); // 👉️ []

三元运算符与语句非常相似if/else。

如果问号前的表达式的计算结果为真值，则返回冒号左侧的值，否则返回冒号右侧的值。

如果存储在变量中的值str是假的（例如undefined），我们返回一个空数组，否则，我们返回调用该方法的结果split()。

出现错误的其他常见原因

发生错误的常见原因是：

  1. 在未初始化为字符串的类属性上调用方法
  2. 在不存在的数组索引上调用方法

解决使用数组时的错误

下面是一个示例，显示使用数组时抛出的错误。

索引.js
const arr = [];

// ⛔️ Cannot read properties of undefined (reading 'split')
arr[0].split(',');

要解决这个问题，您必须确保索引处的元素可用且类型为字符串。

索引.js
const arr = [];

const result = typeof arr?.[0] === 'string' ? arr[0].split(',') : [];
console.log(result); // 👉️ []

在调用该split方法之前，我们检查指定索引处的数组元素是否为字符串。

解决使用类时的错误

如果使用类，则必须在访问它之前声明类属性并将其设置为空字符串。

索引.js
class Person {
  // ✅ Initialize from parameters
  constructor(name) {
    this.name = name;
  }

  splitName() {
    return this.name.split(' ');
  }
}

const p1 = new Person('James Doe');
console.log(p1.splitName()); // 👉️ [ 'James', 'Doe' ]

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

追踪变量赋值的undefined位置

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

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

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

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

您可能正在访问不存在的索引处的数组或对象中不存在的属性。

无法在 JS 中读取 null 的属性（读取 ‘split’）

split()当在存储值的变量上调用该方法时，会发生“无法读取 null 的属性（读取‘split’）”错误
null。

要解决该错误，请确保仅对split()字符串调用该方法。

无法读取 null 的属性拆分

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

索引.js
const str = null;

// ⛔️ TypeError: Cannot read properties of null (reading 'split')
console.log(str.split(','));

我们试图在导致错误的值split()上调用该方法。null

调用前检查变量是否为字符串split

在调用方法之前，您可以使用typeof运算符检查变量是否存储字符串split()。

索引.js
const str = null;

if (typeof str === 'string') {
  const result = str.split(',');
  console.log(result);
} else {
  // 👇️ this runs
  console.log('The variable does NOT store a string');
}

该if块仅在变量存储字符串时运行，否则
else运行该块。

使用可选链 (?.) 解决错误

如果引用为空，您还可以使用可选的链接运算符进行短路。

索引.js
const str = null;

const result = str?.split(',') || [];

console.log(result); // 👉️ []

console.log(str?.split(',')); // 👉️ undefined

如果左侧的值为空值（或） ，则可选链接(?.)运算符会短路，而不是抛出错误。nullundefined

检查变量是否没有存储null

您还可以显式
检查变量是否未null
在语句中存储值if。

索引.js
const str = null;

if (str !== null) {
  const result = str.split(',')
  console.log(result)
} else {
  console.log('The variable has a null value')
}

我们明确地检查变量不存储null值。

如果变量不存储null值，if则块运行，否则，else块运行。

如果变量存储则提供回退值null

如果变量存储值，您可以使用逻辑 OR (||) 运算符提供空字符串的回退值null。

索引.js
const str = null;

const result = (str || '').split(',');

console.log(result); // 👉️ ['']

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

但是，请注意，split()在这种情况下，该方法将返回一个包含空字符串的数组。

如果分隔符不包含在字符串中，则该split方法返回包含整个字符串的单个元素数组。

索引.js
const str = null;

const result = (str || 'abc').split(',');

console.log(result); // 👉️ [ 'abc' ]

使用三元运算符解决错误

您也可以使用三元运算符来解决错误。

索引.js
const str = null;

const result = typeof str === 'string' ? str.split(',') : [];

console.log(result); // 👉️ []

三元运算符与语句非常相似if/else。

如果问号前的表达式的计算结果为真值，则返回冒号左侧的值，否则返回冒号右侧的值。

如果存储在变量中的值str是假的（例如null），我们返回一个空数组，否则，我们返回调用该方法的结果split()。