https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/splice-method-that-replaces-some-of-the-elements-in-the-array-with-javascript/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/splice-method-that-replaces-some-of-the-elements-in-the-array-with-javascript/

JavaScriptで配列内の要素の一部を置き換えるspliceメソッドの使い方

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

この時、配列内の要素の一部を置き換えるにはspliceメソッドを利用します。

構文

メソッド意味
配列.splice(追加位置, 取り出す数, 追加要素, 追加要素, 追加要素)配列
splice()メソッド

サンプルコード

サンプルコードとして、予め配列に要素が格納された状態で特定の要素を置き換えるスクリプトを紹介します。

いくつかのパターンを想定して作成しました。

Output
Pug
.container.my-5
	table.table
		tbody#targetText
	
JavaScript
/*参照元となる配列*/
const sampleArray = ['りんご', 'みかん', 'ぶどう', 'いちご', 'レモン', 'ハスカップ','ばなな' ];
const sampleArray1 = ['りんご', 'みかん', 'ぶどう', 'いちご', 'レモン', 'ハスカップ','ばなな' ];
const sampleArray2 = ['りんご', 'みかん', 'ぶどう', 'いちご', 'レモン', 'ハスカップ','ばなな' ];
const sampleArray3 = ['りんご', 'みかん', 'ぶどう', 'いちご', 'レモン', 'ハスカップ','ばなな' ];
const sampleArray4 = ['りんご', 'みかん', 'ぶどう', 'いちご', 'レモン', 'ハスカップ','ばなな' ];

sampleArray1.splice( 2, 1, '桃' );
sampleArray2.splice( 2, 1 );
sampleArray3.splice( 1, 3, '桃', 'キウイ', 'マスカット' );
sampleArray4.splice( 1, 3 );

const postDatas = [
	{ sample_id: "処理なし", sample_data: sampleArray},
  { sample_id: "splice( 2, 1, '桃' );", sample_data: sampleArray1 },
  { sample_id: "splice( 2, 1 );", sample_data: sampleArray2 },
  { sample_id: "splice( 1, 3, '桃', 'キウイ', 'マスカット' );", sample_data: sampleArray3 },
	{ sample_id: "splice( 1, 3 );", sample_data: sampleArray4 },
];

for ( const postData of postDatas ) {
		//インデックスと値を順に出力
	targetText.innerHTML += `<tr><th>${postData.sample_id}</th><td>${postData.sample_data}</td>
</tr>`;
}
インストラクター
コメント

コメントを残す