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

こんにちは。

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

配列を操作する際、インデックスに指定した変数が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 = ["エラーです１", "エラーです2"];
 $('div').html(errorMessage.join +'<br>');

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

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

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

また明日。

おわり。