配列操作を便利に行える事でプログラムの質向上が行えます。
配列と一言で言っても、多重配列、連想配列、多重連想配列、多重配列も二重、三重、もっとたくさんある場合もあり、形式は多種多様です。
ここで扱う配列は単階層の値を感まで区切っただけのcsv形式のような配列データをjavascriptで扱う事を前提にしておきます。
配列の内容検索をする時には、for文書いてif文書いてtrue,falseで判定する場合もあるかと思いますが、個人的にindexOfが圧倒的に便利なので、シンプル配列の場合はこれを使うようにしています。
ただ、この"indexOf"というプロパティには、型判定まで含まれているので要注意しましょう。というのが今回の記事の内容です。
indexOfで配列簡単検索
とりあえずもっともシンプルな解説プログラムは以下の通りです。
ちなみに、この手のjavascriptの簡単プログラムは、ブラウザのデバッグコンソール画面で確認できますので、わざわざファイルを作らなくてもいいですよ。
※
codepenを使ってもいいですけどね。
[1,2,3].indexOf(1)
> 0
[1,2,3].indexOf(2)
> 1
[1,2,3].indexOf(3)
> 2
[1,2,3].indexOf(4)
> -1
もともと、文字列(string)内の文字検索で使われていたindexOfですが、IE5までは、文字列でしか使えませんでした。
あるとき突然、配列でも利用できるようになって一気に便利さが増したんですね。
そして、indexOfは、文字列検索の場合は、何文字目にあるかを返すプロパティですが、含まれていない時に"-1"が返されます。
配列の場合も同様に、配列の何要素目にマッチするかで検索され、要素番号を返してくれます。
要素になければ-1ですね。
indexOfの注意点
このindexOfですが、使っていてトラブった点としては、検索する文字列（数値）はキチンと型判定がされるという事です。
[1,2,3].indexOf(1)
> 0
[1,2,3].indexOf("1")
> -1
上記のように書くとわかりやすいのですが、
var arr = [1,2,3];
var val1 = 2;
var val2 = "2";
arr.indexOf(val1);
> 1
arr.indexOf(val2);
> -1
変数格納が別関数などで行われている時は不具合に繋がる場合があります。
これを強引に回避したければ、下記のように書くといいでしょう。
var arr = [1,2,3];
var val1 = 2;
var val2 = "2";
arr.indexOf(Number(val1));
> 1
arr.indexOf(Number(val2));
> 1
NumberやString関数を使って強制変換してあげるんですね。
ここで、型変換エラーが出る場合もあるので、やはり設計重要！という事はポイントなのかもね。
連想配列で使うとどうなる？
シンプル配列でのindexOfは便利で仕方がないのですが、これを連想配列で行うとどうなるでしょうか？
{a:1,b:2,c:3}.indexOf("a")
> Uncaught SyntaxError: Unexpected token
想像通りエラーですね。
余談ですが、検索で存在可否するだけであれば、"indexOf"ではなく、"propertyIsEnumerable"を使うという手もあります。
このプロパティであれば、連想配列でも使えるので、覚えておくと便利です。
var arr1 = [1,2,3];
var arr2 = {a:1,b:2,c:3};
arr1.propertyIsEnumerable(2)
> true
arr2.propertyIsEnumerable("a")
> true
連想配列はkey値の検索ですね。
存在可否なので、わざわざfor文を書くことをかんがえるとはるかに楽ですね。
しかし、このプロパティは、下記の書き方ではエラーになるので、その点、要注意です。
{a:1,b:2,c:3}.propertyIsEnumerable("a")
> Uncaught SyntaxError: Unexpected token
変数に対してでしか使えないプロパティという事なので、エラーを出さないように気をつけてくださいね。
脱線しましたが、"indexOf"の検索対象がObjectだったらどうなるでしょう？
[{a:1},{b:2},{c:3}].indexOf({b:2})
> -1
型がObjectの場合は全て対象外になるようです。
配列検索用の関数を自作してもいいのですが、既存するpropertyを使った方が速度向上が見込めるので、下手に作るよりはリファレンスを漁った方がいい場合もありますね。
0 件のコメント:
コメントを投稿