使用indexOf返回对象数组的坑!!!

1,546 阅读2分钟

indexOf到底什么意思

Array.prototype.indexOf()

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

参数

  • searchElement

  • 要在数组中定位的元素。

  • fromIndex 可选的

  • 开始搜索的索引。如果索引大于或等于数组的长度,则返回-1,这意味着不会搜索数组。如果提供的索引值为负数,则将其视为距数组末尾的偏移量。注意:如果提供的索引为负数,数组仍会从前到后搜索。如果提供的索引为 0,则将搜索整个数组。默认值:0(搜索整个数组)。

indexOf() searchElement使用严格相等(与===或 三等号运算符使用的方法相同)与 Array 的元素进行比较。

普通类型的数组使用indexOf返回索引

const arrNum = [12,23,45,67,8,9];
const arrStr = ['12','a','b','c'];
console.log(arrNum.indexOf(67)); // 3
console.log(arrStr.indexOf('b')); // 2

现在看来是没有什么问题的,但是接下来如果是对象数组呢?

const arrObj = [{name: '张三',age: 12},{name: '李四',age: 73}];
console.log(arrObj.indexOf({name: '张三',age: 12})); // -1
// 为什么这个地方不能正确返回当前的索引值呢?

我们稍微改一下代码,请看:

const arrObj = [{name: '张三',age: 12},{name: '李四',age: 73}];
console.log(arrObj.indexOf(arrObj.filter(res => res.age === 12)[0])); // 0
// 这样就能正常返回当前索引值了,当然你可以使用findIndex()、findLastIndex()来返回当前索引,
但是我就是要用indexOf,哈哈哈,就是玩嘛。

Okay为什么这样写就可以了呢,就是因为如果数组中存放的是对象或者数组的话,必须是该对象的引用,才可以使用indexOf得到正确的索引值。

还有一点就是indexOf的坑就是,如果我们使用indexOf来判断后端ajax或者axios返回的值的时候 注意比较的时候要看他们的数据类型是否一致,有些时候ajax返回的是Object的类型,你比较的是String类型,这就是我遇到的坑.

使用includes和indexOf那个更好呢

const arrNum = ['12',23,45,67,8,9,NaN];
console.log(arrNum.includes(NaN)) // true
console.log(arrNum.indexOf(NaN)); // -1 

我们看到当数组中有NaN的时候indexOf就不太行了,es5中的indexOf能返回当前的索引,但是不够语义化,还有一点就是对NaN不够友好,而es6中的includes解决了语义化,对NaN更友好一些。