JavaScriptで配列の先頭(shift)や末尾(pop)から要素を取り除く方法

JavaScriptで配列を扱う際、ユーザーの入力データなどに応じて配列から動的に値を削除することがあります。

この時、要素の先頭を取り除く場合はshiftメソッドを使い、末尾を取り除く場合はpopメソッドを利用します。

構文

メソッド意味
配列.shift先頭の要素を取り除く
配列.push末尾の要素を取り除く
.shift() .push()メソッド

サンプルコード

サンプルコードとして、予め配列に要素が格納された入れるから、値を除外するスクリプトを紹介します。

Output
Pug
.container.my-5
	#targetText.mb-2
	.buttons.mt-2
		button#shiftButton shift
		button#popButton pop
SCSS
#shiftButton,
#popButton {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
/*参照元となる配列*/
const sampleArray = ['りんご', 'みかん', 'ぶどう', 'いちご', 'レモン', 'ハスカップ','ばなな'];

/* テキストエリア */
let textarea = document.getElementById( 'textarea' );
const shiftButton = document.getElementById( 'shiftButton' );
const popButton = document.getElementById( 'popButton' );
let targetText = document.getElementById( 'targetText' );
//初期化処理
let bootstrap = () => {
	sampleArray.forEach( ( sample, index ) => {
		//インデックスと値を順に出力
		targetText.textContent += `「インデックス: ${index}, 値: ${sample} 」`;
	});
}
bootstrap();

//テキストを入力する度にclickを実行
shiftButton.addEventListener( 'click', doShift );
popButton.addEventListener( 'click', doPop );

function doShift() {
	if ( sampleArray != '' ) {
			targetText.textContent = ``;
			//要素の削除
			sampleArray.shift();
			sampleArray.forEach( ( sample, index ) => {
	//インデックスと値を順に出力
	targetText.textContent += `「インデックス: ${index}, 値: ${sample}」`;
});
	} else {
		targetText.textContent = `配列にもう要素がありません`;
	}
}

function doPop() {
	//要素を追加
	if ( sampleArray != '' ) {
		targetText.textContent = ``;
		sampleArray.pop();
		sampleArray.forEach( ( sample, index ) => {
			//インデックスと値を順に出力
			targetText.textContent += `「インデックス: ${index}, 値: ${sample} 」`;
		});
	} else {
		targetText.textContent = `配列にもう要素がありません。`;
	}
}
インストラクター
コメント

コメントを残す