splice、split、slice 単語が似てるので...
splice、split、sliceって単語が似ていて、たまにしか使わないからどれだっけ？
ってなりますよね 
ということで、違いと使い方を備忘録として記載してみました。参考の程 
これだけは意識しよう!! spliceは要注意!!
| メソッド名 | 破壊的メソッド | 何を | 何で返す |
|---|---|---|---|
| splice | ○ | 配列 | （取り除かれた要素を含む）配列 |
| split | × | 文字列 | （分割した文字列を要素に持つ）配列 |
| slice | × | 配列 / 文字列 | 配列 / 文字列 |
破壊的メソッド・・・元のデータ構造を変更するメソッドの事
こんな意味
| メソッド名 | 英語を和訳 |
|---|---|
| splice | つなぎ合わせる、結合する、接合部 |
| split | 裂く、割る、分ける、分裂 |
| slice | 薄く切る、薄片、一切れ、部分 |
spliceの使い方
splice
配列.splice(start, deleteCount, item1, item2, ..., itemN)
- start（必須）: 操作を開始する要素のインデックス
-
deleteCount（省略可）: 削除する要素の数（取り出す要素の数）
省略すると、startから最後まで - itemN（省略可）: 追加する要素。省略すると、削除のみ実行
spliceを使う時の注目キーワード
破壊的 追加 削除 置換 結合 スプレッド構文 分割
spliceの例（削除）
const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.splice(1, 1); //（開始のインデックス,取り出す個数）
console.log(fruits); // ['apple', 'cherry'] 元の配列が変わる
console.log(result); // ['banana'] 取り出された要素が入る
spliceの例（追加）
const fruits = ['apple', 'banana'];
const result = fruits.splice(1, 0, 'cherry'); //（開始のインデックス,取り出す個数,要素）
console.log(fruits); // ['apple', 'cherry', 'banana'] 元の配列が変わる
console.log(result); // [] 何も取り出されていないので空
spliceの例（置換）
const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.splice(1, 1, 'orange'); //（開始のインデックス,取り出す個数,要素）
console.log(fruits); // ['apple', 'orange', 'cherry'] 元の配列が変わる
console.log(result); // ['banana'] 取り出された要素が入る
spliceは取り出してつなげるので、スプレッド構文を使う事で結合する事ができる
spliceの例（結合）
const a = [10, 20];
const b = [30, 40];
a.splice(a.length, 0, ...b);
console.log(a); // [10, 20, 30, 40]
第1引数のみの場合、start位置より後は削除、元配列と処理後の配列が分割する様な形になる
spliceの例（削除 / 分割）
const alphabet = ['a', 'b', 'c', 'd', 'e'];
const result = alphabet.splice(2); //（開始のインデックス）
console.log(alphabet); // ['a', 'b', 'c'] 元の配列が変わる
console.log(result); // ['d', 'e'] 取り出された要素が入る
spliceを使うと、元の配列が変わってしまうので、元の配列をコピーしておくことで、元の配列が変更されることを防ぎ、安全に操作を行うことができる。
コピーの例
const arr = [1, 2, 3];
const copyArr = [...arr]; // スプレッド構文
splitの使い方
split
文字列.split(separator, limit)
- separator（省略可）: 分割の基準となる文字列（例: カンマやスペース）
- limit（省略可）: 最大で返される配列の要素数。省略すると、文字列全体が指定した区切り文字で分割され、全ての部分が配列として返される
splitを使う時のキーワード
文字列を分割 区切り文字（例えばcsv形式） 正規表現 分割個数
splitの例
const str = "apple,banana,cherry";
const arr2 = str.split(",");
console.log(arr2);// ["apple", "banana", "cherry"]
splitの例（特定の文字で分割）
const sentence = "Hello world!";
const words = sentence.split(" ");
console.log(words); // ["Hello", "world!"]
splitの例（特定の文字で分割）
const data = "one|two|three";
const items = data.split("|");
console.log(items); // ["one", "two", "three"]
splitの例（限度設定）
// limit引数で、返される配列の要素数を制限
const text = "a,b,c,d,e";
const limited = text.split(",", 3);
console.log(limited); // ["a", "b", "c"]
splitの例（正規表現）
const text = "one1two2three";
const parts = text.split(/\d/); // 0から9までのいずれかでマッチした数字で分割
console.log(parts); // ["one", "two", "three"]
splitの例(１文字ずつの配列を作成)
const text = "abc";
const result = text.split('');
console.log(result); // ["a", "b", "c"]
splitの例(文字列が空の場合)
const emptyString = "";
// 文字列は空で、セパレーターは空ではない
console.log(emptyString.split("a")); // [""] 空文字列を1つ含む配列
// 文字列とセパレーターがともに空文字列
console.log(emptyString.split(emptyString)); // []
引数を指定しない場合やundefinedの場合、元の文字列が1つの要素として返される
splitの例（separator を省略したり undefined を渡したりすると）
const text = "hello world";
const result = text.split();
console.log(result); // ["hello world"]
const result2 = text.split(undefined);
console.log(result2); // ["hello world"]
sliceの使い方
slice
slice(start, end)
splitと似ているが、文字列で返したいならsliceを使う
- start（省略可）: 操作を開始する要素のインデックス
- end（省略可）:endのインデックス自身は含まない。、省略すると、startから末尾まで指定される
sliceを使う時の注目キーワード
配列と文字列 endのインデックスは含まない 配列のコピー 負のインデックス
sliceの例（配列と文字列）
// 配列の一部を返す
const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
// 文字列の一部を返す
const str = "Hello, World!";
const newStr = str.slice(7, 12);
console.log(newStr); // "World"
// 注意）スペースはインデックスに含む、endのインデックスは含まない
sliceの例（配列のコピー）
// 引数を空に指定した場合、配列のコピーを作る事ができる
const arr = [1, 2, 3];
const copyArr = arr.slice();
console.log(arr); // [1, 2, 3]
console.log(copyArr); // [1, 2, 3]
sliceの例（負のインデックス）
// 負のインデックスで配列や文字列の末尾からの要素を取得
const arr = [1, 2, 3, 4, 5];
const lastTwo = arr.slice(-2);
const last = arr.slice(2, -1); //(endのインデックスは含まない)
console.log(lastTwo); // [4, 5]
console.log(last); //[3, 4]
おまけ 「疎配列」（Sparse Arrays）とは
疎配列
「空（empty）」 の「要素（スロット、slot）」を1つ以上持つ配列のこと
配列の要素の値として undefined でも null でもない概念「空（empty）」がある
例
// 密な配列
let arr = [1,2,3];
// 疎な配列
let arr1 = [ ,2,3];
// 疎な配列
let arr2 = new Array(3); //[ <3 empty items> ] または [ , , , ]
疎配列では、配列の要素数とlengthプロパティの値は一致しない
例
// 疎な配列 要素数2
let arr1 = [ ,2,3];
console.log(arr1.length); // 3
| メソッド名 | 疎配列の扱い |
|---|---|
| splice | 扱える |
| split | 文字列操作のため、無関係 |
| slice | 扱える |
疎配列 / splice例
const arr = [1, , 3, 4, , 6];
console.log(arr.splice(1, 2)); // [empty, 3]
console.log(arr); // [1, 4, empty, 6]
疎配列 /sliceの例
const arr = [1, , 3];
const newArr = arr.slice(0, 3);
console.log(newArr); // [1, empty, 3]
参考
【JavaScript】 spliceメソッドについて徹底解説！ | Pikawaka
Array.prototype.splice() - JavaScript | MDN