駆け出しのエンジニア日記

プログラミング言語勉強中の奮闘日記

sliceとsplice

sliceとspliceも配列のメソッドです。

slice・・・文字列や配列などからデータの一部分だけ取り出せる

splice ・・・既存の要素を取り除く・置き換える・追加できる

 

・sliceに関してはStringメソッドに似ています。

早速サンプル書いてみます。

let colors = ['red', 'orange', 'yellow', 'blue', 'green',
'black', 'white'];

colors.slice(1);
// 結果 ['orange', 'yellow', 'blue', 'green', 'black', 'white'];
colors.slice(5);
// 結果 ['black', 'white'];
colors.slice(2, 4);
// 結果 ['yellow','blue'];
colors.slice(0, 3);
// 結果 ['red', 'orange', 'yellow'];

配列のインデックス番号を用いて、サンプルのように切り抜く位置を指定して使います。

負の数も取ることができます。その場合は、後ろから数えたものが結果として出力されます。

 

・splice

これに関してはできることが多いので、まずは式を見てください。

配列名.splice(開始インデックス);
配列名.splice(開始インデックス, 削除する要素数);
配列名.splice(開始インデックス, 削除する要素数, 追加要素1, 追加要素2, ...);

開始インデックス以外は省略することが可能です。

これもサンプルを見てみましょう。

et colors = ['red', 'orange', 'yellow', 'blue', 'green',
'black', 'white'];
// 配列から'black'を取り除いてみます
colors.splice(5, 1);
// 結果 ['red', 'orange', 'yellow', 'blue', 'green', 'white'];
 
// 配列に新しい色を追加してみます
colors.splice(1,0,'pink');
// 結果 ['red', 'pink', 'orange', 'yellow', 'blue',
'green', 'white'];
 
// 配列に新しい色を複数追加してみます
colors.splice(4,0,'light blue','Yellow-green');
// 結果 ['red', 'pink', 'orange', 'yellow',
'light blue','Yellow-green','blue', 'green', 'white'];
 
// 配列から要素を削除してみます
colors.splice(2,2,'delete!');
// 結果 ['red', 'pink', 'delete', 'light blue','Yellow-green',
'blue', 'green', 'white'];

このようになります。

少し考え方が難しいかもしれませんが、要素は先頭や末尾に追加することも多いので、spliceの使用頻度は高くありません。

 

MDNでその都度確認するとかでも大丈夫だと思います。

developer.mozilla.org