类型错误：包含不是 JavaScript 中的函数

作者

TypeError: contains 不是 JavaScript 中的函数

TypeError: contains is not a function in JavaScript

出现“contains is not a function”错误的原因有多种：

  • 尝试使用该contains()方法检查值是否包含在数组或字符串中。
  • contains()对不是有效 DOM 节点的值调用方法。

typeerror 包含不是函数

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

索引.js
const str = 'one two three';
// ⛔️ Uncaught TypeError: str.contains is not a function
const result1 = str.contains('two');

const arr = ['one', 'two', 'three'];
// ⛔️ Uncaught TypeError: arr.contains is not a function
const result2 = arr.contains('two');

我们调用该contains方法来查看字符串是否包含在数组中以及子字符串是否包含在字符串中。

要解决“TypeError: contains is not a function”错误：

  1. 使用该Array.includes()方法检查数组中是否包含一个值。
  2. 使用该String.includes()方法检查字符串中是否包含值。
索引.js
// ✅ Check if a string contains a substring
const str = 'bobby hadz com';

const result1 = str.includes('com');
console.log(result1); // 👉️ true

if (result1) {
  // 👇️ this runs
  console.log('The substring is contained in the string');
} else {
  console.log('The substring is NOT contained in the string');
}

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

// ✅ Check if an array contains a value

const arr = ['bobby', 'hadz', 'com'];

const result2 = arr.includes('com');
console.log(result2); // 👉️ true

if (result2) {
  // 👇️ this runs
  console.log('The value is contained in the array');
} else {
  console.log('The value is NOT contained in the array');
}

我们使用
String.includes()
方法检查字符串中是否包含子字符串，使用
Array.includes()
方法检查数组中是否包含值。

检查 DOM 节点是否包含在另一个节点中

如果您使用
节点。contains
方法检查一个 DOM 节点是否包含在另一个 DOM 节点中，如果您收到“Contains is not a function”错误，那么您没有在有效的 DOM 节点上调用该方法。

下面是如何Node.contains()使用该方法的示例。

索引.js
const box = document.getElementById('box');

console.log(document.contains(box)); // 👉️ true

您可以console.log使用调用该contains方法的值来确保它是一个有效的 DOM 节点。

如果您调用方法的节点有时不存在，您可以在调用方法之前有条件地检查节点是否存在。 contains

例如，一个基本的 DOM Node 有一个对象类型，所以我们可以contains在调用方法之前检查该值是否是一个对象并且是否具有该属性。

索引.js
const box = null;
const nested = document.getElementById('nested');

if (typeof box === 'object' && box !== null && 'contains' in box) {
  console.log(box.contains(nested));
}

我们的if语句使用逻辑与 (&&) 运算符，因此if要运行该块，必须满足所有条件。

我们首先检查box变量是否存储具有对象类型的值，因为 DOM 节点具有对象类型。

然后我们检查变量是否不等于null。不幸的是，如果你
console.log(typeof null)，你会得到一个"object"值回来，所以我们必须确保这个值不是null。

我们检查的最后一件事是该对象是否具有该contains 属性。

然后我们知道我们可以安全地调用contains对象上的方法。

这种方法称为鸭子打字。

使用 duck-typing 时，我们只需检查对象是否实现了特定的属性或方法，如果实现了，我们就假定它是正确类型的对象。

结论

要解决“TypeError: contains is not a function”错误：

  1. 使用该Array.includes()方法检查数组中是否包含一个值。
  2. 使用该String.includes()方法检查字符串中是否包含值。

–