中学生でもわかる！JavaScriptの.splice()メソッドを理解しよう！

programming
DMM WEBCAMP

こんにちは、フローです。

今回は、JavaScriptの配列操作関数、

.splice()メソッドについて学びます。

難しいプログラミング言語でも、中学生にも理解できるように丁寧に説明していきます。

よろしくお願いします。

.splice()とは？

JavaScriptの.splice()メソッドは、

配列から要素を削除したり、置き換えたり、

新しい要素を追加したりするためのメソッドです。

「splice」は英語で「つなぎ合わせる」や「接続する」という意味がありますが、

このメソッドは実際に配列を切り貼りすることで配列を「つなぎ合わせ」ます。

どんな時に使うのか？

配列の中から特定の要素を削除したい時、

または一部の要素を新しいものに置き換えたい時、

さらには配列の途中に新しい要素を挿入したい時などに、

.splice()メソッドを使用します。

それでは、具体的な使用例を見てみましょう。

パターン1：配列から要素を削除する

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

この例では、

fruits配列の3番目の要素（”cherry”）を削除しています。

.splice()メソッドの第一引数は削除を開始する位置、第二引数は削除する要素の数を指定します。

パターン2：配列の要素を置き換える

let pets = ["cat", "dog", "rabbit"];
pets.splice(1, 1, "turtle");
console.log(pets); // ["cat", "turtle", "rabbit"]

この例では、

pets配列の2番目の要素（”dog”）を”turtle”に置き換えています。

パターン3：配列に新しい要素を挿入する

let numbers = [1, 2, 4, 5];
numbers.splice(2, 0, 3);
console.log(numbers); // [1, 2, 3, 4, 5]

この例では、

numbers配列の3番目の位置に新しい要素（3）を挿入しています。挿入する場合、

第二引数に0を指定します。

.splice()の注意点

.splice()メソッドはとても強力で便利ですが、

注意点があります。

それは、このメソッドが元の配列を直接変更するという特性です。

つまり、元の配列を変更せずに新しい配列を作りたい場合、

.splice()メソッドは適切な選択肢ではありません。

そのような場合は、配列のスライスメソッド

.slice() や配列のスプレッド演算子を使って新しい配列を作成することが推奨されます。

let oldArray = [1, 2, 3, 4, 5];
let newArray = [...oldArray];
newArray.splice(2, 1); 
console.log(newArray); // [1, 2, 4, 5]
console.log(oldArray); // [1, 2, 3, 4, 5]

この例では、

oldArrayから新しい配列newArrayを作成し、

そのnewArrayから要素を削除しています。

その結果、oldArrayは変更されず、新しい配列だけが変更されます。

まとめ

JavaScriptの.splice()メソッドは、

配列から要素を削除したり、置き換えたり、

新しい要素を追加したりする強力なツールです。

しかし、このメソッドが元の配列を直接変更するという特性を理解しておくことが重要です。

適切な場面で適切な方法を選ぶことが、良いプログラミングの鍵となります。

今日は、.splice()メソッドの使い方と注意点について学びました。

次回もJavaScriptの配列操作メソッドについて詳しく見ていきましょう。

それでは、また次回まで！

レッツチャレンジ！