frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【javascript】forEachで配列を取得する

スポンサードリンク

forループよりも簡単に配列のデータを取得するのがforEachです。
下記のように使用します。

<form name="fn_a" id="fi_a" method="GET">
<input type="button" value="押すと配列から読み込み">
	<textarea name="tan_a" id="tai_a" rows="5" cols="30"></textarea>
</form>
var x = Array();
x = ["tokyo","sendai","osaka"];
function foo(){
x.forEach(bar);
}
function bar(val, i, arr){
document.forms[0].elements[1].value += "インデックス" + i + "番の値は" + val + '\n';
}
var btn = document.querySelector('input');
btn.onclick = function(){
	foo();
}

x.forEach(bar)ですがbar()としてしまいそうですが、コールバック関数の為()をつけずに関数名だけにします。

3つの引数は、下記の値が入っています。

  • 第1引数 「tokyo」「sendai」「osaka」
  • 第2引数 添え字「0~2」
  • 第3引数 配列の全要素["tokyo","sendai","osaka"]

添え字を使わずに値が取得できるのは便利であり、慣れないと違和感がありますがforEach覚えといて損はなさそうです。