indexOf和includes的对比

85 阅读1分钟

方法描述

indexOf() 方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1。

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

数组中

返回值类型

    const arr = [1, 2, 3, 4, 5]
    arr.indexOf(2) //数字(Number)  1
    arr.includes(2) //布尔值(Boolean)  true

第二个参数

第一个参数是查找的内容 第二个参数是从第几个开始找(不写默认从第0位查找)

    const arr = [1, 2, 3, 4, 5]
/*****正数时*****/
    //从数组索引为1开始查找是否有1  
    arr.indexOf(1, 1) // -1
    arr.includes(1, 1) // false

    //从数组索引为1开始查找是否有2  
    arr.indexOf(3, 1) // 2
    arr.includes(2, 1) // true

/*****负数时*****/
    //负几表示从倒数几位开始查找

    //从倒数第二位开始查找是否有4
    arr.indexOf(4, -2) // 3
    arr.includes(4, -2) // true

    //从倒数第二位开始查找是否有4
    arr.indexOf(2, -3) // -1
    arr.includes(2, -3) // false

区别

我们这里用void 0表示undefined

undefined不是保留字,可能被重写,void 0不会被重写。void 0无论什么时候都是返回undefined,使用void 0来代替undefined不会出错。

    //indexOf不能匹配NaN
    [NaN].indexOf(NaN) //-1

    //includes能匹配NaN
    [NaN].includes(NaN) //true

    //普通数组中
    [void 0].indexOf(void 0) // 0
    [void 0].includes(void 0) // true
    
    //indexOf无法识别稀疏数组中的undefined
    const arr = [1, 2, , , 4]
    arr.indexOf(void 0) //-1
    arr.includes(void 0) //true

字符串中

indexOf

    //字符串中可以进行类型转换 数组中使用严格对比
    '134click'.indexOf(4) // 2
    ['1', '3', '4'].indexOf(4) // -1

includes

和indexOf特性一样

    //字符串中可以进行类型转换 数组中使用严格对比
    '134click'.includes(4) // true
    ['1', '3', '4'].includes(4) // false