js数组中indexOf和findIndex的区别
1.
语法
arr.indexOf(searchElement[, fromIndex])
参数
searchElement
要查的元素
fromIndex可选
开始查的位置。如果该索引值⼤于或等于数组长度，意味着不会在数组⾥查，返回-1。如果参数中提供的索引值是⼀个负值，则将其作为数组末尾的⼀个抵消，即-1表⽰从最后⼀个元素开始查，-2表⽰从倒数第⼆个元素开始查，以此类推。注意：如果参数中提供的索引值是⼀个负值，并不改变其查顺序，查顺序仍然是从前向后查询数组。如果抵消后的索引值仍⼩于0，则整个数组都将会被查询。其默认值为0.
返回值
⾸个被到的元素在数组中的索引位置; 若没有到则返回 -1
2.
语法
arr.findIndex(callback[, thisArg])
参数indexof能用于数组吗
callback （element, index, array）
针对数组中的每个元素, 都会执⾏该回调函数, 执⾏时会⾃动传⼊下⾯三个参数:
  　element 当前元素。
  　index 当前元素的索引。
  　array 调⽤findIndex的数组。
thisArg可选。执⾏callback时作为this对象的值.
返回值
数组中通过提供测试函数的第⼀个元素的索引。否则，返回-1
3. 两者之间的区别
（1）使⽤⽅式
indexOf传⼊参数为待查元素，findIndex传⼊参数为⾃定义函数
（2）适⽤范围
虽然indexOf与findIndex都可⽤以查元素，但findIndex⽐indexOf使⽤更灵活，适⽤范围更⼴
例如，我们可以⾃定义findIndex的查函数，使其查值时忽略⼤⼩写、强转类型⽐较，甚⾄可以查值相同的引⽤类型，以下举例详细说明
a. 忽略⼤⼩写
const arr = [1, '2', 'Test', { a: 1 }]
const findVal = 'test'
console.log(arr.indexOf(findVal)) // -1
console.log(arr.findIndex(val => {
if (LowerCase && LowerCase) LowerCase() === LowerCase()    return val === findVal
})) // 2
b. 类型强转
const arr = [1, '2', 'Test', { a: 1 }]
const findVal = 2
console.log(arr.indexOf(findVal)) // -1
console.log(arr.findIndex(val => val == findVal)) // 1
c. 查值相同的引⽤类型
const arr = [1, '2', 'Test', { a: 1 }]
const findVal = { a: 1 }
console.log(arr.indexOf(findVal)) // -1
console.log(arr.findIndex(val => compare(val, findVal))) // 3
/**
* @name 两值⽐较
* @param {*} obj1 值1
* @param {*} obj2 值2
* @returns {Boolean} true 相等 false 不等
*/
export function compare (obj1, obj2) {
const type = getDataType(obj1)
if (type !== getDataType(obj2)) return false
if (typeof obj1 !== 'object' || obj1 === null) return obj1 === obj2
// Set类型, Map类型, 转化为数组
if (type === 'set' || type === 'map') {
obj1 = Array.from(obj1)
obj2 = Array.from(obj2)
}
const obj1_keys = Object.keys(obj1)
const obj2_keys = Object.keys(obj2)
if (obj1_keys.length !== obj2_keys.length) return false
return obj1_keys.every(k =>  compare(obj1[k], obj2[k]))
}
/**
* @name 获取数据类型
* @param {*} val 数据
* @returns {String} 数据类型
* boolean 布尔值, number 数, string 字符串,
* undefined, null, array 数组, object 对象,
* function 函数, symbol, set Set类型, map Map类型
*/
export function getDataType (val) {
const rules = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Array]': 'array',
'[object Object]': 'object',
'[object Function]': 'function',
'[object Symbol]': 'symbol',
'[object Set]': 'set',
'[object Map]': 'map'
}
return rules[String.call(val)]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。