Posted on

JavaScriptトラップ集

業務上JavaScriptを使用していて、ハマったorハマりかけたポイントをまとめてみました。

1、indexOf(危険度:★★★☆☆)

文字列内に特定の文字列が存在するかを判定したい時に、
indexOf()を使用すると便利ですが、

 
 let tmpArr = '小谷翔平';
 let searchArr = '谷';
 console.log(tmpArr.indexOf(searchArr)); //結果:1 ⇒ 文字列の2文字目に存在

気をつけなければならないのは、
特定の文字列が存在しない時に返って来るのが、falseでは無く-1だという事です。

 
 let tmpArr = '小谷翔平';
 let searchArr = '鈴';
 console.log(tmpArr.indexOf(searchArr)); //結果:-1

PHPの同じような関数のstrposではfalseで返ってくるので、
業務で両方使っていると紛らわしいですね。

また、indexOfで特定の文字列が一番最初に存在する場合は、
0が返ってくるので、以下のような使い方はバグのもとになります。

 
 let tmpArr = '小谷翔平';
 let searchArr = '小';
 if(!tmpArr.indexOf(searchArr)) { //0だと通ってしまう
	//文字列が含まれない場合はなんらかの処理
 }

2、parseIntとNumberの違い(危険度:★★☆☆☆)

JavaScriptで文字列を数字に変換したい場合、
主にparseInt()、Number()の2種類の方法があります。

 
 let tmpArr = '1234';
 console.log(Number(tmpArr)); //結果:1234
 console.log(parseInt(tmpArr)); //結果:1234

両者の違いですが、parseIntの場合は数値以外の文字列が含まれる場合でも、
数字を抽出して返却してくれるケースがある事です。

 
 let tmpArr = '1234abc';
 console.log(Number(tmpArr)); //結果:NaN
 console.log(parseInt(tmpArr)); //結果:1234

詳しい事はこちらで。
このあたりはトラップが多いので、replace()等であらかじめ数字を抽出したうえでNumber()をかけるのが良さそうです。

 
 let tmpArr = 'abc1234';
 console.log(Number(tmpArr.replace('abc', '')); //結果:1234

3、JavaScriptとphpでの空配列の扱い(危険度:★★★☆☆)

JavaScriptとphpでは条件式での真偽値がちょくちょく違うので要注意。

//JavaScriptの場合
 console.log(Boolean([])); //結果:true
//PHPの場合
 var_dump((Boolean)[]); //結果:false

空の配列では真偽値が逆になります。
ここら辺も闇が深そうなので業務で両方使う場合は注意が必要そうですね。

4、JavaScriptのDate関連(危険度:★★★★☆)

JavaScriptではDateオブジェクトで日時を扱いますが、
こちらのページに詳しいように、
いろいろとトラップが多いので注意が必要です。

特に個人的にハマったのが、getMonth()の挙動です。

 
 let date = new Date('2019-02-04T03:24:00');
 console.log(date.getMonth()); //結果は2では無く、1

他にも、日付を得るのはgetDay()ではなくgetDate()とかいろいろと紛らわしいです。