【javascript】Array.from()を使って各要素を配列として取得する方法

javascriptにはHTM Collectionのように配列に似ているけど配列ではないオブジェクトがあります。

Array.from() メソッドを使うことで指定した各要素を配列として生成します。

では早速見ていきましょう。

Array.fromメソッドについて

Array.from(data [,func [,that]])

Array.from()の使い方

html

<ul>
	<li id="apple" class="list">りんご</li>
	<li id="strawberry" class="list">いちご</li>
	<li id="banana" class="list">ばなな</li>
	<li id="grape" class="list">ぶどう</li>
</ul>
<button id="btn">ボタン</button>

javascript

<script>
function sample(){
	var elem = document.getElementsByClassName("list");

	//配列に変換
	var arr = Array.from(elem);

	arr.forEach(function(elem){
		//配列に入っているidを確認
		console.log(elem.id);
	});

	//検索
	var filterText = arr.filter(function(arr) {
		return arr.id === "apple";
	});
	console.log(filterText);
}

let button = document.getElementById('btn');
button.onclick = sample;

ボタンを押すと関数が実行され配列の変換や検索を行います。

コンソールログを見ながら確認してください。

配列に変換

var arr = Array.from(elem);

配列に変換するときは Array.from()メソッドを使います。

配列のidを取得

arr.forEach(function(elem){
	//配列に入っているidを確認
	console.log(elem.id);
});

コンソールログで確認すると下記のようになります。idを出しています。

apple
strawberry
banana
grape

filterで条件に合う配列を検索

//検索
var filterText = arr.filter(function(arr) {
	return arr.id === "apple";
});
console.log(filterText);

上記はidにappleの配列を検索しています。

サンプル