Array.from() - 配列に似たオブジェクトから配列を作る

2017/09/26

Array.from()は、配列に似たオブジェクトから配列を作るコンストラクタメソッドです。例えば、HTMLCollectionなどを配列に変換できます。また、第2引数にコールバック関数を指定すると、Array.prototype.map()と同じ処理が行われます。

概要

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

説明

Array.from ( items [ , mapfn [ , thisArg ] ] )

第1引数(items)には対象のオブジェクトを指定します。

第2引数(mapfn)にコールバック関数、第3引数(thisArg)にコールバック関数に渡す引数を指定すると、配列に変換する時に各値を関数にかけることができます。この仕組みはArray.prototype.map()と同じです。

チュートリアル

Element.getElementsByTagName()で取得したHTMLCollectionは配列ではないので、例えば、配列のプロトタイプ関数であるforEach()を利用することはできません。

// HTMLCollectionを取得
var object = document.getElementsByTagName( "li" ) ;

// HTMLCollectionは配列ではないのでforEach()は使えない
object.forEach( function( value ) { /*...*/ } ) ;

しかし、Array.from()で配列に変換すれば利用できます。

// HTMLCollectionを配列に変換
var array = Array.from( object ) ;

// 配列なのでforEach()を使える
array.forEach( function( value ) { /*...*/ } ) ;

配列に変換する時、各値に処理をかけたい場合は、第2引数、第3引数を利用しましょう。Array.prototype.map()と仕組みは同じです。

Array.from( object, callbackFunc, arguments ) ;
array.map( callbackFunc, arguments ) ;

デモ

Array.from()のデモです。

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

<!DOCTYPE html>
<html>
<head>
	<style>
pre {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<ul>
	<li>あ</li>
	<li>い</li>
	<li>う</li>
	<li>え</li>
	<li>お</li>
</ul>
<hr>
<pre></pre>
<script>
/** try it! **/
var object = document.getElementsByTagName( "li" ) ;
var a = Array.from( object ) ;

console.log( a ) ;

a.forEach( function ( element ) {
	document.querySelector( "pre" ).appendChild( new Text( element.outerHTML + "\n" ) ) ;
} ) ;
/** try it! **/
</script>
</body>
</html>