毎日更新

22日目 配列むずい(続編)

こんにちは。

昨日配列操作で詰まってた原因がわかってほっとしました。昨日の記事の続きです。

http://wpblog.kiwatchi.com/%e6%af%8e%e6%97%a5%e6%9b%b4%e6%96%b0/788/

配列を操作する際、インデックスに指定した変数がundefinedだった場合、配列に謎のundefined要素が追加されてしまうようです。


var arr = [true, true];
var i = undefined;
arr[i] = true;
console.log(arr) //[true, true, undefined: true]

もちろんこのソースのようにインデックスに意図的にundefinedを入れてた訳ではありませんでしたが、特定の条件のときにundefinedになってしまっていたがためにこのエラーになってしまっていたようです。

ちなみに昨日の記事で、

「配列の要素を変更するときに arr[0] = "hoge"; みたいにインデックス指定して値変更できなんだっけ?」的なこと言ってますが、これも全てundefinedが悪さをしていたせいでうまくいってなかっただけで、普通にできますね。

実務出て1年経ってもこんなことやってるんですから、初学者のみなさんも安心してください(?)

配列の話ついでに昨日覚えたメソッドを紹介。

それは、「join()」メソッドです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

以下、MDNのサンプルコードをそのまま転用


const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
 // expected output: "Fire,Air,Water"

console.log(elements.join('-'));
 // expected output: "Fire-Air-Water"

引数に渡した値で配列をつなぎ、一つの文字列を返します。
引数に何も与えない場合はカンマでつなぎます。

昨日はこいつを使って、バリデーションエラー文言の配列をHTML内にぶちこみました。


var errorMessage = ["エラーです1", "エラーです2"];
 $('div').html(errorMessage.join +'<br>');

//divの中身 
<div>エラーです1<br>エラーです2</div> 

こうやって、ひとつひとつ実際に使って覚えていくしかないっすねぇ〜

レビュワーからも、「配列操作は慣れです!ファイト!」と言われたので、習うより慣れよでどんどん触っていこう。

また明日。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。

© 2021 きわっちのブログ Powered by AFFINGER5