Array.prototype.forEach() - 配列の各要素を材料に処理を実行する

2017/09/26

Array.prototype.forEach()は、配列の各要素を材料に処理を実行するメソッドです。一般的な配列のループ処理はこのメソッドで行ないます。

概要

名前: forEach
所属: Array.prototype
仕様書: https://tc39.github.io/ecma262/#sec-array.prototype.foreach

説明

Array.prototype.forEach ( callbackfn [ , thisArg ] )

第1引数(callbackfn)にコールバック関数を指定します。配列の各要素がこのコールバック関数にかけられます。コールバック関数は値、インデックス番号、配列そのもの、の3つの引数を受け取ります。コールバックの返り値は意味がありません。

第2引数(thisArg)を指定すると、それがコールバック関数内におけるthisの値となります。省略した場合、thisの値はundefinedです。

function callbackfn ( value, index, array ) {
	// 処理
}

チュートリアル

例えば、配列の各要素を文字列として書き出したい、というテーマでArray.prototype.forEach()を利用してみましょう。

var array = [ "S", "Y", "N", "C", "E", "R", ] ;

var callbackfn = function ( value, index, sourceArray ) {
	document.body.innerHTML += value ;
}

array.forEach( callbackfn ) ;

処理は内部で次のように繰り返されます。

callbackfn( "S", 0, array ) ;
callbackfn( "Y", 1, array ) ;
callbackfn( "N", 2, array ) ;
callbackfn( "C", 3, array ) ;
callbackfn( "E", 4, array ) ;
callbackfn( "R", 5, array ) ;

デモ

Array.prototype.forEach()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var array = [ "S", "Y", "N", "C", "E", "R" ] ;

array.forEach( function ( value, index, sourceArray ) {
	document.body.appendChild( new Text( JSON.stringify( value ) + "\n" ) ) ;
} ) ;
/** try it! **/
</script>
</body>
</html>