初心者必見!JavaScriptのspliceを使いこなす5つの方法

JavaScriptのspliceメソッドを解説するイラストJS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのspliceメソッドを使いこなすことができるようになります。

初心者の方でもわかりやすく解説していますので、JavaScriptの配列操作をマスターしたい方はぜひお読みください。

●JavaScriptのspliceメソッドとは

○spliceメソッドの基本

JavaScriptの配列操作において、spliceメソッドは非常に便利なメソッドです。

spliceメソッドは、配列から要素を削除したり、要素を追加したり、要素を置き換えることができます。

●spliceメソッドの使い方

spliceメソッドの使い方は次のような形です。

array.splice(start, deleteCount, item1, item2, …)

ここで、startは操作を開始する配列のインデックス、deleteCountは削除する要素数、item1, item2, …は追加する要素です。

それでは、具体的な使い方をサンプルコードとともに見ていきましょう。

○サンプルコード1:配列から要素を削除する

このコードではspliceメソッドを使って、配列から指定した範囲の要素を削除する方法を紹介しています。

この例では、fruits配列からインデックス1から2つの要素を削除しています。

let fruits = ['apple', 'banana', 'cherry', 'grape'];
fruits.splice(1, 2);
console.log(fruits); // ['apple', 'grape']

○サンプルコード2:配列に要素を追加する

このコードではspliceメソッドを使って、配列の指定した位置に要素を追加する方法を紹介しています。

この例では、fruits配列のインデックス1に”orange”と”kiwi”を追加しています。

let fruits = ['apple', 'banana', 'cherry', 'grape'];
fruits.splice(1, 0, 'orange', 'kiwi');
console.log(fruits); // ['apple', 'orange', 'kiwi', 'banana', 'cherry', 'grape']

○サンプルコード3:配列の要素を置き換える

このコードではspliceメソッドを使って、配列の指定した位置の要素を別の要素に置き換える方法を紹介しています。

この例では、fruits配列のインデックス1の要素を”orange”に置き換えています。

let fruits = ['apple', 'banana', 'cherry', 'grape'];
fruits.splice(1, 1, 'orange');
console.log(fruits); // ['apple', 'orange', 'cherry', 'grape']

●注意点と対処法

○spliceメソッドの戻り値に注意

spliceメソッドは、削除された要素を戻り値として返します。

削除する要素がない場合、空の配列が返ります。

この戻り値を利用することで、削除した要素を別の配列に格納することもできます。

○負のインデックスを使用する場合

spliceメソッドでは、負のインデックスを使用することができます。

負のインデックスを指定すると、配列の末尾から要素を操作します。

例えば、-1は配列の最後の要素を指します。

●応用例とサンプルコード

○サンプルコード4:配列内の特定の要素を削除する

このコードではspliceメソッドを使って、配列内の特定の要素を削除する方法を紹介しています。

この例では、fruits配列から”banana”を削除しています。

let fruits = ['apple', 'banana', 'cherry', 'grape'];
let index = fruits.indexOf('banana');
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits); // ['apple', 'cherry', 'grape']

○サンプルコード5:配列をシャッフルする

このコードではspliceメソッドを使って、配列の要素をランダムにシャッフルする方法を紹介しています。

この例では、fruits配列の要素をシャッフルしています。

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

let fruits = ['apple', 'banana', 'cherry', 'grape'];
shuffleArray(fruits);
console.log(fruits); // 例: ['grape', 'apple', 'cherry', 'banana']

まとめ

この記事では、JavaScriptのspliceメソッドを使って配列の要素を削除、追加、置き換える方法を紹介しました。

また、注意点や応用例も紹介しました。spliceメソッドは配列操作の際に非常に便利なメソッドですので、ぜひ活用してみてください。