JavaScriptで配列の先頭(unshift)や末尾(push)に追加する方法

JavaScriptで配列を扱うさい、ユーザーの入力データなどを格納する目的で、配列に動的に要素を追加することがあります。

この時、要素を先頭に追加する場合はunshiftメソッドを使い、末尾に追加する場合はpushメソッドを利用します。

構文

メソッド意味返り値
配列.unshift先頭に要素を追加する追加された後の要素の個数
配列.push末尾に要素を追加する追加された後の要素の個数
.unshift() .push()メソッド

サンプルコード

サンプルコードとして、下記フォームに入力された値を既存の配列に格納し、その後でforEachメソッドを利用してループで返す方法を紹介します。

Output
Pug
.container.my-5
	textarea#textarea.form-control
	#targetText.mb-2
	.buttons.mt-2
		button#unshiftButton unshift
		button#pushButton push
JavaScript
/*参照元となる配列*/
const sampleArray = ['りんご', 'みかん', 'ぶどう'];

/* テキストエリア */
let textarea = document.getElementById( 'textarea' );
const unshiftButton = document.getElementById( 'unshiftButton' );
const pushButton = document.getElementById( 'pushButton' );
let targetText = document.getElementById( 'targetText' );

//テキストを入力する度にclickを実行
unshiftButton.addEventListener( 'click', doUnshift );
pushButton.addEventListener( 'click', doPush );

function doUnshift() {
	targetText.textContent = '';
	//入力テキスト
	const inputText = textarea.value;
	if ( inputText !== '' ) {
			//要素を追加
			sampleArray.unshift( inputText );
			sampleArray.forEach( ( sample, index ) => {
	//インデックスと値を順に出力
	targetText.textContent += `「インデックス: ${index}, 値: ${sample}」`;
});
	} else {
		targetText.textContent = `値を入力してください。`;
	}
}

function doPush() {
	targetText.textContent = '';
	//入力テキスト
	const inputText = textarea.value;
	//要素を追加
	if ( inputText !== '' ) {
		sampleArray.push( inputText );
		sampleArray.forEach( ( sample, index ) => {
			//インデックスと値を順に出力
			targetText.textContent += `「インデックス: ${index}, 値: ${sample} 」`;
		});
	} else {
		targetText.textContent = `値を入力してください。`;
	}
}
インストラクター
コメント

コメントを残す