Js基础-indexOf()方法的使用

JavaScript08

Js基础-indexOf()方法的使用,第1张

indexOf()只返回字符串在规定的查找顺序中,首次出现的位置

工作中应用 => 如果要检索的字符串值没有出现,则该方法返回 -1

找数组中的元素 也可以使用es6的find()方法

非要对 number 类型使用 indexOf 方法嘞?那就转换成字符串咯,接着上例来写

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

参考这篇文章

https://www.jianshu.com/p/1c15be16a85a

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

对比:

1、findIndex()和indexOf方法实现都是通过循环遍历查找。

2、findIndex()的应用场景要比indexOf广泛一些,可以查找大于等于小于,表达式可以随便写,indexOf就只能在第一层查找相等的值。

3、findIndex()实际上相当于一个for循环,只不过找到了你不需要自己退出。

在js最新标准ECMA5中数组是支持的indexOf方法的(目前的主流浏览器均支持ECMA5)

ECMA5新增的方法:

/**

 * ECMA5数组新增方法

 */

// 1.indexOf 比较的是 '==='

// var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]

// // 一个参数: 返回3在数组arr的索引

// var index1 = arr.indexOf(3)

// alert(index1) // 2

// // 两个参数: 从第5个位置查找3, 返回3在arr的索引

// var index2 = arr.indexOf(3, 5)

// alert(index2) // 6

// 2.lastIndexOf (从后面查找)

// 3.五个迭代方法(不改变原数组)

// var arr2 = [1, 2, 3, 4, 5, 4, 3, 2, 1]

// 3.1.every对数组的每一元素,调用回调函数运行, 如果回调函数都返回true,结果返回true 如果回调函数有一个返回false, 返回false

// 当every回调函数返回false时, 函数直接返回

// var r1 = arr2.every(function(item, index, array) {

// document.write(item)

// return item > 2

// })

// alert(r1)

// alert(arr2)

// 3.2.filter对于数组的每一个元素, 调用回调函数进行过滤, 返回过滤后的结果

// var r2 = arr2.filter(function(item, index, array) {

// return item > 3

// })

// alert(r2)

// 3.3.foreach对于数组的每一个元素, 调用回调函数(没有返回值)

// var r3 = arr2.forEach(function(item, index, array) {

// document.write(item)

// })

// alert(r3) // undefined

// 3.4.map对于数组的每一个元素, 调用回调函数, 返回一个新数组

// var r4 = arr2.map(function(item, index, array) {

// return item*2

// })

// alert(r4)

// alert(arr2)

// 3.5.some对数组的每一元素,调用回调函数运行, 如果回调函数任意一个返回true,结果返回true 如果回调函数都返回false, 返回false

//  当some回调函数返回true时, 函数直接返回

// var r5 = arr2.some(function(item, index, array) {

// document.write(item)

// return item > 2

// })

// alert(r5)

// alert(arr2)

//4.reduce, reduceRight (遍历的起始位置不同)

// var arr3 = [1, 2, 3, 4, 5, 4, 3, 2, 1]

// // prev: 前一个值

// // cur: 当前值

// var r6 = arr3.reduce(function(prev, cur, index, array) {

// return prev + cur 

// })

// alert(r6) // 求数组和

var arr3 = [1, 2, 3, 4, 5, 4, 3, 2, 1]

var r7 = arr3.reduceRight(function(prev, cur, index, array) {

return prev + cur 

})

alert(r7) // 求数组和

数组其他方法:

/**

* js中的数组类似与java中的map, 长度可任意改变, 元素类型任意

 */

// 一.创建数组

// 方法1.

// var arr1 = new Array()

// // 方法2.

// var arr2 = [1, 2.2, true, "hello"]

// alert(arr2.length)

// arr2.length = 3 // 小于实际长度, 会进行截断 大于实际长度, arr2[length-1]返回的是undefined

// alert(arr2) // 隐式的调用了arr2.toString()方法

// 二.数组常用方法

// 1.pop , push

// var arr3 = []

// arr3.push(1)

// arr3.push(2, 3) // 可以推入多个值, 返回数组的长度

// alert(arr3.push(4, 5)) // 返回数组的长度 5

// alert(arr3)

// arr3.pop() // 从数组的尾部移除一个元素, 返回移除的元素

// alert(arr3.pop()) // 返回移除的元素 4

// alert(arr3)

// 2.shitf, unshitf

// var arr4 = [1, 2, 3, 4, 5]

// alert(arr4.shift()) // 从数组首部移除元素, 返回移除的元素

// alert(arr4)

// arr4.unshift("a") // 从头部插入元素, 返回数组的长度

// alert(arr4.unshift("b", "c")) // 返回数组的长度 7

// alert(arr4)

// 3. splice, slice 

/**

 * splice: 改变数组本身

 * slice: 不改变数组

 */

// var arr5 = [1, 2, 3, 4, 5]

// // splice: 

// //        第一个参数: 表示从哪个位置进行删除

// //        第二个参数: 表示删除的个数

// //        第三个参数及以后: 表示从截取的位置插入的元素

//          //        返回值: 原数组被删除的元素

// var r = arr5.splice(1, 2, 3, 4, 5) // splice(1)==> 1 | splice(1, 2)==> 1, 4, 5

// alert(r) // 被删除的元素

// alert(arr5) // 1, 3, 4, 5, 4, 5

// var arr6 = [1, 2, 3, 4, 5]

// var r2 = arr6.slice(2, 4) // 左闭右开区间, 返回被截取的元素

// alert(r2) // 3, 4

// alert(arr6) // 1, 2, 3, 4, 5 

//4. contact, join

/**

 * contact 和 join 均不改变数组本身

 * 

 */

// var arr7 = [1, 2, 3]

// var arr8 = [4, 5, 6, 7]

// var r3 = arr7.concat(arr8)

// alert("arr7: " + arr7)

// alert("arr8: " + arr8)

// alert("concat: " + r3)

// var r4 = arr7.join("-") // 每个元素间加-, 返回的是一个字符串

// alert("arr7: " + arr7)

// alert("join: " + r4)

// 5. sort, reverse

/**

 * sort, reverse均改变数组本身

 * sort: 默认将每个元素变为字符串,进行比较

 */

// var arr9 = [8, 4, 3, 9, 5, 9, 0, 1, 10, true]

// var r5 = arr9.sort() // 正序排序, 返回排序后的数组

// alert(r5) // 返回排序后的数组

// alert(arr9) // 数组的序列已经被改变(正序)

//

// arr9 = [8, 4, 3, 9, 5, 9, 0, 1] 

// var r6 = arr9.reverse() // 逆序输出, 返回逆序的数组

// alert(r6) // 返回逆序的数组

// alert(arr9) // 数组元素已经被改变

var arr = [8, 4, 3, 9, 5, 9, 10, 1] 

function compare(v1, v2) {

if (v1 > v2)

return 1

else if (v1 < v2)

return -1

else

return 0

}

alert(arr.sort()) // 转换为字符串排序

alert(arr.sort(compare)) // 自定义排序