1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

連想配列には.lengthが使えない話

Last updated at Posted at 2020-08-16

#lengthはオブジェクトには使用できない!!
先日社内での新規プロダクト開発案件にて起きた出来事。

<div v-if="feature.length > 0">{{ feature }}</div>

-------------------------------------------------------------------------------------------------
<script>
const vm = new Vue({
feature: <?php echo !empty($feature) ? Format::forge($feature)->to_json() : 'null'; ?>,
})
</script>

上記のような変数の中身が入っていれば表示、なければ表示しないというありがちな処理をvueで記述した際に間違いなく値が入っているのに何故か表示されないという場面に遭遇。
なぜだ。。と数時間ハマってしまいました。
結論からいうと変数が連想配列としてフロントに渡されておりそれをjsonに変換→オブジェクト化→lengthは配列にのみ使用でき連想配列(オブジェクト)には使用できない、という単純なオチでした。。
情けない。。

#一応配列と連想配列(オブジェクト)についてまとめてみる
オブジェクトとは、複数の値を名前で区別し管理します。オブジェクトに入っているこれらデータはプロパティと呼ばれます。
そしてjavascriptではオブジェクトと連想配列は同じものとして扱われます。(その他言語では明確に異なるものとして扱われることがあります。)

一方配列は複数の値を名前ではなく番号で区別し管理します。
そしてJavaScriptでは、配列は「特殊なオブジェクト」です。単なるオブジェクトでもobj[1]=5;のようにセットできてはしまいますが、配列の場合は書き換えることでlengthが自動更新されたり、pushやsliceといった、配列操作に便利なメソッドが用意されています。

そして今回の問題のオチとしましては上述したlengthは配列に用意されたメソッドでありオブジェクトには使うことができなかったというものです。
#おわりに
思いも寄らないところでつまずいてしまいましたがオブジェクトと配列の違いについては今までなんとなくしか理解できていなかったので非常に良い学びになりました。
疲れたマン。

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?