JavaScriptで、ArrayLikeオブジェクトを配列に変換する方法

JavaScriptでは、スプレッド演算子(…)を用いると、配列のようなオブジェクト(Arraylikeオブジェクト)を配列に変換することが可能です。

ArrayLikeオブジェクトとは?

ArrayLikeオブジェクトは、次のようなオブジェクトです。

  • 配列の様にlengthプロパティーで長さを取得できる
  • 配列の様に要素がインデックスで紐づけられている
  • しかし、配列ではなくオブジェクトである
定義

配列

インデックスを使って格納されたデータを参照

オブジェクト

名前(プロパティ)を使って格納されたデータを参照

サンプルコードでも紹介しますが、上記に該当するのは下記の様なコードになります。

  • 文字列
  • querySelectorAll()など、HTMLからデータを取得する関数の結果

日常的な開発でも、これらを配列に変換して、map()メソッドやfilter()メソッドに変換して、何らかの処理を行というプログラムを書く機会は多いです。

構文

構文意味
[…変換対象]配列に変換

サンプルコード

Output
晴れ
曇り
荒天
台風
文字列を配列に変換して出力
querySelectorAllで取得したオブジェクトを配列に変換したのち出力
Pug
.container.my-5
	div.sample-data 晴れ
	div.sample-data 曇り
	div.sample-data 雪
	div.sample-data 荒天
	div.sample-data 雨
	div.sample-data 台風
	div
		table.table
			tbody
				tr
					th 文字列を配列に変換して出力
					td#targetText
				tr
					th querySelectorAllで取得したオブジェクトを配列に変換したのち出力
					td#targetText2
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText2 = document.getElementById( 'targetText2' );

const postDatas = 'りんご';
const postDatas2 = document.querySelectorAll( '.sample-data' );
const doTask = [...postDatas];
const doTask2 = [...postDatas2];


targetText.textContent = doTask;
doTask2.map((element) => targetText2.appendChild(element));
インストラクター
コメント

コメントを残す