indexOf()和includes()方法的使用详解

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：JavaScript
🛸 支持段段：点赞👍、收藏⭐、留言💬

在写项目的时候，需要实现一个搜索功能，并且能够支持模糊查询，起初最先想到了indexOf()方法，后来觉得includes()方法更好一些，简单记录下

indexOf()

定义：indexOf()方法可返回某个制定的字符串值在字符串中首次出现的位置

语法：

该方法有两个参数：indexOf(val, idx)

val 表示需要查找的字符串值

idx 表示在字符串中开始查找的位置，合法值是 0 到 length - 1；默认值为 0

如果要查找的字符串值没有出现，则该方法返回 -1

首先需要引入log方法

const { log } = console

接下来看一些例子

let str = 'Hello JavaScript!'

log( str.indexOf('H') ) // 0
log( str.indexOf('v') ) // 8
log( str.indexOf('h') ) // -1 表示未找到
log( str.indexOf('v', 0) ) // 8
log( str.indexOf('v', 6) ) // 8
log( str.indexOf('v', 9) ) // -1 表示未找到

log( str.indexOf('a')) // 7 从0开始查找时，只返回首次出现的位置
log( str.indexOf('a', 8)) // 9

let arr = [1, 2, 3, -0]

log( arr.indexOf(1) ) // 0
log( arr.indexOf(4) ) // -1
log( arr.indexOf(1, 1) ) // -1
log( arr.indexOf(+0) ) // 3

• indexOf()是ES5的方法，也可对数组使用
• 不够语义化，它的含义是返回找到的字符串首次出现的位置，所以还需要和 -1 进行比较，表达起来不够直观
• 内部使用相等运算符（===）进行判断，这会导致对NaN的误判（无法判断是否有NaN [NaN].indexOf(NaN) // -1）
• 对大小写敏感

includes()

定义：includes()方法用来判断字符串是否包含指定的子字符串

语法：

该方法有两个参数: includes(val, idx)

val表示需要查找的子串

idx 表示从那个位置开始查找，默认为 0

如果找到则返回true，否则返回false

接下来看一些例子

let str = 'Hello JavaScript!'

log( str.includes('H') ) // true
log( str.includes('t') ) // true
log( str.includes('h') ) // false 表示未找到
log( str.includes('H', 0) ) // true
log( str.includes('H', 1) ) // false 表示未找到

let arr = [1, 2, 3, +0]

log( arr.includes(1) ) // true
log( arr.includes(4) ) // false
log( arr.includes(1, 1) ) // false

log( arr.includes(-0) ) // true 不区分 -0 和 +0

• includes()是ES6的方法，也可对数组使用
• 对大小写敏感
• 没有区分 -0 和 +0

indexOf()与includes()的区别

一、输入参数相同，且索引都可以为负值

二、返回值类型不同

indexOf()返回索引值，用于判断某一个元素在数组或字符串中首次出现的位置

includes()返回布尔值，用于判断数组或者字符串中是否包含某一元素

三、对 NaN 处理

indexOf()不能判断是否有NaN，而includes()可以判断

let arr = [NaN]

log( arr.indexOf(NaN) ) // -1
log( arr.includes(NaN) ) // true

四、对空值处理

includes()将空值判断为 undefined

let arr = [ , , ]

log( arr.indexOf(undefined) ) // -1
log( arr.includes(undefined) ) // true