快捷導(dǎo)航

js的indexOf方法使用

更新時(shí)間：2023年05月17日 15:52:57 作者：Smile_zxx

indexOf() 方法可返回?cái)?shù)組中某個(gè)指定的元素位置，本文就來(lái)介紹一下js的indexOf方法使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、數(shù)組調(diào)用

indexOf() 方法可返回?cái)?shù)組中某個(gè)指定的元素位置。
該方法將從頭到尾地檢索數(shù)組，看它是否含有對(duì)應(yīng)的元素。開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭（沒(méi)有指定 start參數(shù)時(shí)）。如果找到一個(gè) item，則返回 item 的第一次出現(xiàn)的位置。
如果在數(shù)組中沒(méi)找到指定元素則返回 -1。

//語(yǔ)法
// array.indexOf(item,start) 
//item 必須 要查找的元素的位置，
//start 非必須可選的整數(shù)參數(shù)。規(guī)定在數(shù)組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。
let food= ["番茄", "胡蘿卜", "排骨", "蘋果"];
let a = food.indexOf("蘋果");
console.log(a) // 3
let b= food.indexOf("香蕉");
console.log(b) // -1

二、字符串調(diào)用

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
區(qū)分大小寫
如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1。

//語(yǔ)法
//string.indexOf(value,start)
// value  必須 要查找的元素的位置
// start 可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 string.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。
let str="Hello world!";
console.log(str.indexOf("Hello"));//0
console.log(str.indexOf("World") );//-1
console.log(str.indexOf("world"));//6

三、應(yīng)用例子

可以實(shí)現(xiàn)多項(xiàng)選擇

<template>
?? ?<div class="biaoqian">
?? ??? ??? ??? ?<button v-for="(item,index) in biaoqianList"?
?? ??? ??? ??? ?:key='index'?
?? ??? ??? ??? ?class="btn"?
?? ??? ??? ??? ?type="default"?
?? ??? ??? ??? ?size="mini"
?? ??? ??? ??? ?:class="{'active': isChange.indexOf(index)!=-1}"?
?? ??? ??? ??? ?@click="clickBtn(index)">{{item}}</button>
?? ??? ?</div>
</template>
export default{
?? ??? ?data(){
?? ??? ??? ?return{
?? ??? ??? ? ? ?isChange:[], ?//多選
?? ??? ??? ??? ?biaoqianList:['早餐','午餐','晚餐','宵夜'],
?? ??? ??? ??? ?foodChose:[]
?? ??? ??? ? ?}
?? ??? ??? ?},
?? ??? ?methods:{
?? ??? ??? ??? ?clickBtn(index){
?? ??? ??? ??? ??? ?// 多選
?? ??? ??? ??? ??? ?if (this.isChange.indexOf(index) == -1) {
?? ??? ??? ??? ??? ??? ?if(this.isChange.length == 4){
?? ??? ??? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ??? ??? ?title:'最多選擇四項(xiàng)',
?? ??? ??? ??? ??? ??? ??? ??? ?icon:'none'
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?this.isChange.push(index);//選中添加到數(shù)組里
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?this.isChange.splice(this.isChange.indexOf(index), 1); //取消選中
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?console.log(this.isChange)
?? ??? ??? ??? ??? ?// let biaoqianList = ?[]
?? ??? ??? ??? ??? ?// for(let index in this.isChange){ //biaoqianList里面的索引重新加入
?? ??? ??? ??? ??? ?// ?? ?biaoqianList.push(this.biaoqianList[this.isChange[index]])
?? ??? ??? ??? ??? ?// }
?? ??? ??? ??? ?},
?? ??? ?}
}
<style lang="less">
?? ?.biaoqian{
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?justify-content: start;
?? ??? ??? ??? ?align-items: center;
?? ??? ??? ??? ?.active{
?? ??? ??? ??? ??? ?background-color: #76d2f4 ;
?? ??? ??? ??? ??? ?color: white;?? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?.btn{
?? ??? ??? ??? ?border:0.01px solid #76d2f4;
?? ??? ??? ??? ?background-color:white ;
?? ??? ??? ??? ?color: #76d2f4;
?? ??? ??? ?}
?? ??? ?}
</style>

到此這篇關(guān)于js的indexOf方法使用的文章就介紹到這了,更多相關(guān)js indexOf內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: