https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/using-concat-method-that-links-different-arrays-with-javascript/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/using-concat-method-that-links-different-arrays-with-javascript/

JavaScriptで異なる複数の配列を連携するconcatメソッドの使い方

JavaScriptで配列を扱う際、複数の配列を結合して1つの配列にしたいケースがあります。書き方は2種類ありますが、concatメソッドの方が慣れやすいでしょう。

構文

構文意味
配列1.concat(配列2, 配列3, …)配列1に対して、配列2以降を結合する
[…配列1, …配列2, …配列3 ]配列1に対して、配列2以降を結合する
concat()に関する構文

サンプルコード

配列1.concat(配列2, 配列3, …)

Output
配列1 [ ‘りんご’, ‘みかん’, ‘ぶどう’ ];
配列2 [ ‘いちご’, ‘レモン’ ];
配列3 [ ‘ハスカップ’,’ばなな’ ];
結合結果
Pug
.container.my-5
	table.table
		tbody
			tr
				th 配列1
				td [ 'りんご', 'みかん', 'ぶどう' ];
			tr
				th 配列2
				td  [ 'いちご', 'レモン' ];
			tr
				th 配列3 
				td [ 'ハスカップ','ばなな' ];
			tr
				th 結合結果
				td#targetText
			
			
	
JavaScript
const targetText = document.getElementById( 'targetText' );
/*参照元となる配列*/
const sampleArray1 = [ 'りんご', 'みかん', 'ぶどう' ];
const sampleArray2 = [ 'いちご', 'レモン' ];
const sampleArray3 = [ 'ハスカップ','ばなな' ];

const arrayConcate = sampleArray1.concat( sampleArray2, sampleArray3 );

targetText.textContent = arrayConcate;

[…配列1, …配列2, …配列3 ]

Output
配列1 [ ‘りんご’, ‘みかん’, ‘ぶどう’ ];
配列2 [ ‘いちご’, ‘レモン’ ];
配列3 [ ‘ハスカップ’,’ばなな’ ];
結合結果
Pug
.container.my-5
	table.table
		tbody
			tr
				th 配列1
				td [ 'りんご', 'みかん', 'ぶどう' ];
			tr
				th 配列2
				td  [ 'いちご', 'レモン' ];
			tr
				th 配列3 
				td [ 'ハスカップ','ばなな' ];
			tr
				th 結合結果
				td#targetText2
			
			
	
JavaScript
const targetText2 = document.getElementById( 'targetText2' );
/*参照元となる配列*/
const sampleArray4 = [ 'りんご', 'みかん', 'ぶどう' ];
const sampleArray5 = [ 'いちご', 'レモン' ];
const sampleArray6 = [ 'ハスカップ','ばなな' ];

const arrayConcate2 = [...sampleArray4, ...sampleArray5,...sampleArray6];

targetText2.textContent = arrayConcate2;
インストラクター
コメント

コメントを残す