jsのindexOfメソッド

1. 配列呼び出し

• IndexOf() メソッドは、配列内の指定された要素の位置を返します。
• このメソッドは、配列を最初から最後まで検索して、対応する要素が含まれているかどうかを確認します。検索を開始する位置は配列の先頭、または配列の先頭（startパラメータを指定しない場合）です。項目が見つかった場合は、最初に出現した項目の位置が返されます。
• 指定された要素が配列内に見つからない場合は、-1 を返します。

//文法
// array.indexOf(item,start) 
//item 見つけなければならない要素の位置、
//start オプションの整数パラメータ。 検索を開始する配列内の位置を指定します。 有効な値は 0 ～ stringObject.length - 1 です。 このパラメータを省略した場合、文字列の最初の文字から検索が開始されます。
let food= ["トマト", "ニンジン", "リブ", "リンゴ"];
let a = food.indexOf("リンゴ");
console.log(a) // 3
let b= food.indexOf("バナナ");
console.log(b) // -1

2 番目に、文字列呼び出し

• IndexOf() メソッドは、指定された文字列値が最初に出現する文字列内の位置を返します。
• 大文字と小文字を区別
• 取得する文字列値が存在しない場合、メソッドは -1 を返します。

//文法
//string.indexOf(value,start)
// value  検索する要素の位置は次のとおりです。
// start オプションの整数パラメータ。 文字列内の検索を開始する位置を指定します。 有効な値は 0 ～ string.length - 1 です。 このパラメータを省略した場合、文字列の最初の文字から検索が開始されます。
let str="Hello world!";
console.log(str.indexOf("Hello"));//0
console.log(str.indexOf("World") );//-1
console.log(str.indexOf("world"));//6

3. 応用例

• 複数選択可能
  

<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:'最大 4 つまで選択してください',
								icon:'none'
							})
						}else{
							this.isChange.push(index);//配列に追加するものを選択します
						}
					} else {
						this.isChange.splice(this.isChange.indexOf(index), 1); //チェックを外します
					}
					console.log(this.isChange)
					// let biaoqianList =  []
					// for(let index in this.isChange){ //biaqianList のインデックスが再度追加されます
					// 	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>