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

作者

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

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

slice()在值上调用该方法时，会发生“TypeError：无法读取未定义的属性（读取‘slice’）”错误undefined。

要解决该错误，请确保仅slice在实现它的数据类型（数组或字符串）上调用该方法。

无法读取未定义的属性切片

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

索引.js
const arr = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'slice')
arr.slice(0);
要解决该错误，请在变量存储虚假值时提供回退值，或者有条件地检查该值的类型是否正确。

如果变量存储则指定回退值undefined

slice()以下是如何解决使用数组和字符串的方法时的错误的示例。

索引.js
// 👇️ using slice() with ARRAYS
const fromDb = undefined;

// ✅ Provide empty array fallback value
const arr = fromDb || [];

// ✅ Using optional chaining
const r1 = arr?.slice(0);

// ✅ Using the ternary operator
const r2 = arr ? arr.slice(0) : [];

// ✅ Using Array.isArray
if (Array.isArray(arr)) {
  const r3 = arr.slice(0);
} else {
  console.log('arr is not an array');
}

// ✅ Provide fallback in place
const r4 = (arr || []).slice(0);

以下是相同的示例，适用于将slice方法与字符串一起使用。

索引.js
// 👇️️️ using slice() with STRINGS

const fromDb = undefined;
const str = fromDb || '';

// ✅ Using optional chaining
const r5 = str?.slice(0);

// ✅ Using the ternary operator
const r6 = str ? str.slice(0) : '';

// ✅ Using typeof operator
if (typeof str === 'string') {
  const r7 = str.slice(0);
} else {
  console.log('str is not a string');
}

// ✅ Provide fallback in place
const r8 = (str || '').slice(0);

如果运算符左侧的值是假的（例如
） ，我们使用逻辑 OR (||)运算符来提供回退值。undefined

索引.js
const fromDb = undefined;

// ✅ with Arrays

const arr = fromDb || [];
console.log(arr); // 👉️ []

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

// ✅ with Strings

const str = fromDb || '';
console.log(str); // 👉️ ""

如果左边的值为假，则逻辑 OR (||) 运算符返回右边的值。

下一个示例展示了如何使用
可选的链接 (?.)undefined运算符，它使我们能够在引用等于or时短路null。

索引.js
const fromDb = undefined;

// ✅ with Arrays

const arr = fromDb || [];
const r1 = arr?.slice(0);
console.log(r1); // 👉️ []
// --------------------------------

// ✅ with Strings

const str = fromDb || '';
const r5 = str?.slice(0);
console.log(r5); // 👉️ ""

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

索引.js
const fromDb = undefined;

// ✅ with Arrays

const arr = fromDb || [];
const r2 = arr ? arr.slice(0) : [];
console.log(r2); // 👉️ []

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

// ✅ with Strings

const str = fromDb || '';
const r6 = str ? str.slice(0) : '';
console.log(r6); // 👉️ ""
如果问号左边的值为真，则三元运算符返回冒号左边的值，否则返回冒号后面的值。

您还可以使用方法或运算符检查调用方法的值slice()的类型是否正确。Array.isArray()typeof

索引.js
const fromDb = undefined;

// ✅ with Arrays

const arr = fromDb || [];

if (Array.isArray(arr)) {
  const r3 = arr.slice(0);
} else {
  console.log('arr is not an array');
}

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

// ✅ with Strings

const str = fromDb || '';

if (typeof str === 'string') {
  const r7 = str.slice(0);
} else {
  console.log('str is not a string');
}

如果提供的值是数组，则该Array.isArray方法返回，否则返回。truefalse