首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

.includes (或我应用的任何其他方法)不是一个函数

当你在使用 .includes() 方法时遇到错误提示“不是一个函数”,这通常意味着你尝试在一个不支持该方法的对象上调用了它。.includes() 是一个数组(Array)和字符串(String)类型的方法,用于检查数组中是否包含某个元素或字符串中是否包含某个子字符串。

基础概念

  • 数组(Array):一种数据结构,用于存储一系列的值。
  • 字符串(String):表示文本的数据类型。
  • .includes() 方法
    • 对于数组,返回一个布尔值,表示数组是否包含指定的元素。
    • 对于字符串,返回一个布尔值,表示字符串是否包含指定的子字符串。

可能的原因

  1. 对象类型错误:你可能尝试在一个非数组或非字符串的对象上调用 .includes()
  2. 变量未定义或为空:变量可能未被正确初始化或赋值。

解决方法

  1. 检查对象类型: 确保你调用的对象是一个数组或字符串。
  2. 检查对象类型: 确保你调用的对象是一个数组或字符串。
  3. 类型断言或转换: 如果你不确定对象的类型,可以使用 Array.isArray()typeof 进行检查,并进行必要的转换。
  4. 类型断言或转换: 如果你不确定对象的类型,可以使用 Array.isArray()typeof 进行检查,并进行必要的转换。
  5. 调试信息: 使用 console.log() 打印变量的类型和值,帮助你定位问题。
  6. 调试信息: 使用 console.log() 打印变量的类型和值,帮助你定位问题。

应用场景

  • 搜索功能:在用户输入中查找特定关键词。
  • 数据验证:检查数据集中是否存在特定项。
  • 内容过滤:在文本处理中查找和替换特定片段。

通过以上步骤,你应该能够诊断并解决 .includes() 方法报错的问题。如果问题依然存在,请提供更多的代码上下文以便进一步分析。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

10个自己遵循的 JavaScript 技巧和实践,赶紧收藏吧!

例如: let number = 98234567 可以这么写 let number = 98_234_567 而且它也适用于任何其他进制数。...例如,如果应用程序的两个独立部分定义了具有相同名称但用途不同的全局变量,那么可能会导致不可预测的错误,调试此类问题将是一个可怕的经历。...通常函数中的变量应该是局部的,这样当你执行完函数时它们就会释放。 4. Delete vs Splice 使用splice而不是使用delete从一个数组中删除一个项。...如果你的代码抛出的异常没有严重到足以停止整个程序,那么第一个适合。 9. 多个条件检查 对于多值匹配,我们可以把所有的值放在一个数组中,并使用indexOf()或includes()方法。...因此,对于任何比这更高的数字,建议使用Math.floor() 总结 最后的建议 - 不要使用随意的编码风格。要有一个执行标准。

32440

分享一些 JavaScript 代码简写技巧

另外推荐一个只用一行代码实现一个方法的实用网站1loc.dev If-Else 用 || 或 ??...这种方法非常实用,有时候仅仅只是想判断一个字段有没有值,而不是把空字符串或者0也当做false处理 function(obj){ var a = obj ??...== ''){} includes的正确使用姿势 在上面逻辑或操作符||代码段里有一个if判断比较长,这时候就可以用includes去简化代码 if( obj === 0 || obj ==...这里只说一下函数return的时候用逗号运算符简化代码的技巧,其他用法请直接点击查看官方文档。...比如想要拿到接口返回的特定字段的值,可以用解构赋值和对象的简写方法对map方法简写,详细解释请移步js map方法应用场景 处理对象数组。

31020
  • 11 个高级 Vue 编码技巧

    我已经测试了多种方法和包来访问fill属性,而不会炸毁我的模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中的一个或多个填充属性的最佳方法,实际上最有效的显而易见的方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序的任何其他组件或页面中:在上面的示例中,当我将鼠标悬停在 SVG 上时,我只是在要更改的部分上设置一个类(此处称为...除了动态图标样式和动画之外,还可以传递道具来更改 SVG 的大小和其他方面(就像任何其他组件一样)。如果你还不熟悉,Vue 文档有一个很好的例子说明如何使用图标来做到这一点。...我最近在一个基于区块链的项目中使用了它,在该项目中,了解用户的平台以触发正确的区块链钱包(浏览器扩展钱包或移动应用程序钱包)至关重要,并且它的作用非常吸引人。...你可以附加任何你想要创建自定义道具验证器的逻辑,但以下可能是你最常用的情况(验证字符串选项):在下面的示例中,我创建了一个在我的应用程序中使用的自定义 Button 组件。请注意,我有变体和类型道具。

    2.6K30

    11 个高级 Vue 编码技巧

    我已经测试了多种方法和包来访问fill属性,而不会炸毁我的模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中的一个或多个填充属性的最佳方法,实际上最有效的显而易见的方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序的任何其他组件或页面中:在上面的示例中,当我将鼠标悬停在 SVG 上时,我只是在要更改的部分上设置一个类(此处称为...除了动态图标样式和动画之外,还可以传递道具来更改 SVG 的大小和其他方面(就像任何其他组件一样)。如果你还不熟悉,Vue 文档有一个很好的例子说明如何使用图标来做到这一点。...我最近在一个基于区块链的项目中使用了它,在该项目中,了解用户的平台以触发正确的区块链钱包(浏览器扩展钱包或移动应用程序钱包)至关重要,并且它的作用非常吸引人。...你可以附加任何你想要创建自定义道具验证器的逻辑,但以下可能是你最常用的情况(验证字符串选项):在下面的示例中,我创建了一个在我的应用程序中使用的自定义 Button 组件。请注意,我有变体和类型道具。

    2.6K20

    【offer 收割计划】你知道为什么 reducer 最好是一个纯函数吗?

    ,slice 用来截取数组或字符串 splice 会改变原数组,slice 不会改变原数组 三、为什么有了 indexOf 方法,在 ES7 中还要新增 includes 方法呢?...此外伪类一般是单冒号,例如 :hover 伪元素:从字面上看,它是一个假的元素,我也是这么理解的,它类似添加一个新的 DOM 节点到 DOM 树上,而不是改变元素的状态。...首先如果 redux 中的 reducer 如果不是一个 纯函数的话会造成什么后果呢?...相反,它们必须通过复制现在的 state,并对复制的值进行更改来进行 state 更新 它们不能做任何异步逻辑以及其他”副作用“ 遵循这些规则的函数也被称为**“纯”函数**,因此 reducer 需要一个纯函数由此而来...总结以下 redux 底层采用了浅比较的方式来判断 state 改变,来优化性能 采用纯函数,保证新旧 state 不是同一个对象引用 为了保证返回新的 state 是确定的,不会因为副作用返回不确定的

    1K20

    每日前端夜话(No.0x01)——ECMAScript 2016,2017和2018中所有新功能的示例(上)

    Array.prototype.includes includes是Array上的一个简单实例方法,能帮助我们轻松查找某项是否存在于数组中(处理 NaN的方式与 indexOff不同)。 ?...Object.values() Object.values()是一个与Object.keys()类似的新函数,不过它返回的是Object自身属性的所有值,不包括原型链中的任何值。 ?...和String.prototype.padEnd,允许将空字符串或其他字符串附加/前置到原始字符串的开头或结尾。...添加它的主要目的是允许浅层拷贝/克隆对象到另一个对象,该对象也复制getter和setter函数而不是Object.assign。...只要到达该函数中的await关键字,编译器就会暂停。 它假定await之后的表达式返回一个promise并等待,直到promise被解决或被拒绝,然后才进一步移动。

    81740

    数组的扩展

    ,而不是克隆一个全新的数组 扩展运算符提供了数组合并的新写法。...任何 Iterator 接口的对象(参阅 Iterator 一章),都可以用扩展运算符转为真正的数组 Map 和 Set 结构,Generator 函数 Array.from() Array.from方法用于将两类对象转为真正的数组...数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组 数组实例的 find() 和 findIndex() 数组实例的find方法,用于找出第一个符合条件的数组成员...() Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似 Map 和 Set 数据结构有一个has方法,需要注意与includes...区分 数组的空位 数组的空位指,数组的某一个位置没有任何值 Array.from方法会将数组的空位,转为undefined,也就是说,这个方法不会忽略空位 扩展运算符(...)也会将空位转为undefined

    53920

    函数式思维(二)-- 为何你想不到用 reduce

    上次我写了一篇简单介绍函数式思维的文章,我们组的同学看了之后表示很感兴趣,希望我有空多写写这方面的内容,然后表示他能想到用数组的 map,但是想不到 reduce。...但其实呢,reduce 是个比 map、flatMap 啥的更通用的函数,你可以用 reduce 轻易地实现其他函数。...然后再解释下为啥我的 reduce 不是直接接收三个参数,而要用部分应用的形式,先接收两个,返回一个接收一个参数的函数呢?...而如果 reduce 是一个接收三个参数的函数,那 sum 就得是const sum = (arr) => reduce((acc, x) => acc + x, 0, arr),也不是不可以,但比较丑陋...接下来我们用 reduce 实现数组的其他方法:length、map、flatMap、includes、find // JS 的 Array.length 跟我这个实现不一样, // arr[100]

    36520

    在 TypeScript 中实现自定义“包含”实用程序类型

    介绍TypeScript提供了强大的类型系统,允许开发者创建复杂且类型安全的应用程序。TypeScript中的一个更高级技术是创建实用类型,它可以增强类型安全性并提升代码可读性。...Includes 实用类型用于检查给定类型是否包含在元组或数组类型中。它在概念上类似于 JavaScript 的数组 .includes() 方法,但适用于类型。...infer 关键字:在条件类型分支内部使用 infer 关键字,在其他类型中推断类型,经常用于元组和函数类型。...true : false;工作原理:函数类型比较:创建两个函数类型,根据条件类型检查返回 1 或 2。条件类型:检查一个假设类型 T 是否扩展类型 X 或 Y,相应返回 1 或 2。...我正在参与2023腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!

    17600

    「前端基建」探索不同项目场景下Babel最佳实践方案

    文章中的配置我会使用 rollup 来为大家演示,这是因为相对于其他打包工具 rollup 对于 js 文件打包的结果更加干净和直观。...关于 entry 其实了解 Babel 的大多数开发者可能会觉得这种方式没有什么作用,但是其实并不是这样的。 稍后我会为你对比它的 preset-env 的 usage 对比来讲它的应用场景。...同样从一个例子出发 针对于 useBuiltIns:entry 配置的方式,存在一个比较致命的问题: 使用 entry 的方式,假使我们代码中仅使用到了 Array.prototype.includes...支持一个 helper 参数默认为 true 它会提取 @babel/runtime 编译过程中一些重复的工具函数变成外部模块引入的方式。...探索最佳实践方案 首先,任何配置项目都有它自己存在的意义。笔者个人认为所谓最佳配置实践方案并不是指某一种固定配置,而是说结合不同的业务场景下寻找最适合的配置落地方案。

    73010

    ES6学习笔记(三)

    它与正常的函数参数可以结合使用,非常灵活,后面还可以放置表达式。如果扩展运算符后面是一个空数组,则不产生任何效果。由于它可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。...()方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象,实际应用中常见的类似数组的对象Dom操作的NodeList集合以及函数内部的arguments对象Array.from都可以将它们转为真正的数组...() keys() values()三个方法都是用于遍历数组, keys()用于对键名的遍历,values()是对键值得遍历,entries()是对键值对的遍历 数组实例的includes() 返回一个布尔值...,表示某数组是否包含给定的值,与字符串的include方法类似 该方法的第二个参数表示搜索的起始位置,默认为0 ,负数表示倒数,如果大于数组长度重置为0 数组的空位指数组的某一个位置没有任何值,...空位不是undefined,空位就是没有任何值

    18110

    JavaScript中的ES7ES8ES9ES10

    看一个函数,先看他们的返回值。indexOf的返回数是值型的,includes的返回值是布尔型,所以在if条件判断的时候includes要简单得多,而indexOf 需要多写一个条件进行判断。...vs. sequential 连续):在重叠的时间段内(而不是一个接一个)执行几个任务。...它必须包裹一个 SharedArrayBuffer 。 所有函数都以 atomically 方式进行操作。存储操作的顺序是固定的并且不能由编译器或 CPU 重新排序。...并且返回索引 index 原先(或者未改变)的值。 简单修改 TypeArray 元素 以下每个函数都会在给定索引处更改 TypeArray 元素:它将一个操作符应用于元素和参数,并将结果写回元素。...属性描述对象是直接在对象上定义的,而不是继承于对象的原型。ES2017加入这个函数的主要动机在于方便将一个对象深度拷贝给另一个对象,同时可以将getter/setter拷贝。

    4.2K40

    10个关于 Vue 的高级开发技巧

    我已经测试了多种方法和包来访问fill属性,而不会炸毁我的模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中的一个或多个填充属性的最佳方法,实际上最有效的显而易见的方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序的任何其他组件或页面中: 在上面的示例中,当我将鼠标悬停在 SVG 上时,我只是在要更改的部分上设置一个类(此处称为...除了动态图标样式和动画之外,还可以传递道具来更改 SVG 的大小和其他方面(就像任何其他组件一样)。如果你还不熟悉,Vue 文档有一个很好的例子说明如何使用图标来做到这一点。...我最近在一个基于区块链的项目中使用了它,在该项目中,了解用户的平台以触发正确的区块链钱包(浏览器扩展钱包或移动应用程序钱包)至关重要,并且它的作用非常吸引人。...你可以附加任何你想要创建自定义道具验证器的逻辑,但以下可能是你最常用的情况(验证字符串选项): 在下面的示例中,我创建了一个在我的应用程序中使用的自定义 Button 组件。

    6K20

    10个关于 Vue 的高级开发技巧

    我已经测试了多种方法和包来访问fill属性,而不会炸毁我的模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中的一个或多个填充属性的最佳方法,实际上最有效的显而易见的方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序的任何其他组件或页面中: 在上面的示例中,当我将鼠标悬停在 SVG 上时,我只是在要更改的部分上设置一个类(此处称为...除了动态图标样式和动画之外,还可以传递道具来更改 SVG 的大小和其他方面(就像任何其他组件一样)。如果你还不熟悉,Vue 文档有一个很好的例子说明如何使用图标来做到这一点。...我最近在一个基于区块链的项目中使用了它,在该项目中,了解用户的平台以触发正确的区块链钱包(浏览器扩展钱包或移动应用程序钱包)至关重要,并且它的作用非常吸引人。...你可以附加任何你想要创建自定义道具验证器的逻辑,但以下可能是你最常用的情况(验证字符串选项): 在下面的示例中,我创建了一个在我的应用程序中使用的自定义 Button 组件。

    6.1K10

    前端-5个小技巧让你写出更好的JS条件语句

    3 层 if 语句嵌套(条件 1,2 & 3) 就我个人而言,我遵循的一个总的规则是当发现无效条件时尽早返回。...是不是更加简单、直白了?请注意,所有的函数参数都可以有其默认值。...另外,如果你偏爱函数式编程(FP),你可以选择使用 Lodash fp——函数式版本的 Lodash(方法名变为 get 或 getOr)。...那是不是说我们应该禁止使用 switch 语句? 别把自己限制住。我自己会在任何可能的时候使用对象字面量,但是这并不是说我就不用 switch,这得视场景而定。...使用 Array.every 和 Array.some 来处理全部/部分满足条件 最后一个小技巧更多地是关于使用新的(也不是很新了)JavaScript 数组函数来减少代码行数。

    96830

    十问babel,用最简单的话说清楚babel

    其实也不是特别新,但是google 浏览器打开页面直接报错,搜索引擎告诉我需要在babel 中配置两个插件,专门进行解析 配置好,无任何异常报错。...全局静态函数:Array.from、Object.assign 等。 实例方法:比如 Array.prototype.includes 等。 那新的API如何处理呢?...但是如果其他文件也使用了类声明语句,也会在当前文件生成类似的6个辅助函数function 如果我们能把相同的方法抽离出来,改成运行时引入,这样可以大大缩小代码体积 所以@babel/runtime 就时来解决这个重复定义的问题...,会提前好在一个地方定义好这些通用方法,其他地方用大直接引用即可,这样可以缩小编译后的代码体积 babel/runtime 和 babel/plugin-transform-runtime 是什么关系?...我做了一些精简和理解,加上一些自己的理解和其他文章的积累,写成了此篇,希望对屏幕前的你有所帮助。

    1K20

    检查原生 JavaScript 函数是否被覆盖

    然而,你必须知道,欺骗它是很容易的,让它认为一个函数仍然是原生的,可惜并不是。无论是出于恶意(例如,在代码中下病毒),还是因为你想让你的覆盖不被发现,你有几种方法可以让函数看起来是"原生"的。...改变或使用DOM的原生函数(如document.createElement)将无法使用这种方法,因为它们的目标是iframe的DOM,而不是顶层的。...使用全等检查 如果安全是你首要考虑的因素,我认为你应该采用不同的方法:持有一个"干净"原生函数的引用,稍后用潜在的猴子补丁函数与它进行比较。... // 在任何其他脚本有机会修改原始的原生函数之前,存储一个引用。...这种方法的主要缺点是,它可能不切实际。它要求在运行应用程序中的任何其他代码之前存储原始函数引用(以确保它仍然未被触及),有时你将无法做到这一点(例如,你正在构建一个库)。

    60020

    使用 JavaScript 编写更好的条件语句

    例如,在一个游戏中,如果玩家生命点为0,游戏结束。在天气应用中,如果在早上被查看,显示一个日出图片,如果是晚上,则显示星星和月亮。...如果我们要检查任何其他动物呢?如果我们通过添加更多“或”语句来扩展,代码将变得难以维护和不清晰。...现在,如果我们想要检查任何其他动物,我们只需要添加一个新的数组项。 我们也能在这个函数作用域外部使用这个动物数组变量来在代码中的其他任意地方重用它。...这是一个编写更清晰、易理解和维护的代码的方法,不是吗? 2. 提前退出 / 提前返回 这是一个精简你的代码的非常酷的技巧。我记得当我开始专业工作时,我在第一天学习使用提前退出来编写条件。...有一些第三方的库有它们自己的函数,像 lodash 或 idx。例如 lodash 有 _.get 方法。然而,JavaScript 语言本身被引入这个特性是非常酷的。

    1.6K30
    领券