【javascript】length の罠

久々の投稿。寒いと色々進まなくなりますね。

よく javascript で .length をよく使うかと思います。

// こんな感じ。。。
var count = list.length ;
for(var i = 0 ; i < count ; i++)
{
    // 処理
}

配列の要素数を取得するのに使われることも多いと思いますが、

少し注意が必要なことがあります。

下記例1～3のように、挙動を確かめてみました。

例1)

<script type="text/javascript">

var list = [] ;
console.log(list.length) ; // 0 と出力

/** この辺は普通 */
list[0] = "list-0" ;
console.log(list.length) ; // 1 と出力

list[1] = "list-1" ;
console.log(list.length) ; // 2 と出力

</script>

この辺は予想通りかと思います。

例2)

<script type="text/javascript">

var list = [] ;
console.log(list.length) ; // 0 と出力

/** この辺は普通 */
list[0] = "list-0" ;
console.log(list.length) ; // 1 と出力

list[1] = "list-1" ;
console.log(list.length) ; // 2 と出力

/** key を飛ばしてみる */
list[10] = "list-10" ;
console.log(list.length) ; // 11 と出力

</script>

.length は配列の要素数でなく、 key の最大値＋1 を取得する為、

要素数は 3 つなのに length は 11 となります。

(list[10] を追加した後に list[9] = “***” ;と追加して出力しても 11 のままです)

例3)

<script type="text/javascript">

var list = [] ;
console.log(list.length) ; // 0 と出力

/** この辺は普通 */
list[0] = "list-0" ;
console.log(list.length) ; // 1 と出力

list[1] = "list-1" ;
console.log(list.length) ; // 2 と出力

/** 数字以外は無視される */
list["key"] = "list-key" ;
console.log(list.length) ; // 2 と出力

</script>

数字しか見てないので、数字以外の key の要素を入れても

length は変化しません。

上記のように、key を指定して配列に要素を追加した場合、

length で思ったような値を取れないことがある為、注意が必要ですね。

と、調べてて思いましたまる。