JavaScript 配列メソッド
1. 基本的な配列メソッド
JavaScript の配列操作には、多種多様なメソッドが用意されています。
- Array length（レングス）
- Array toString()（文字列変換）
- Array at()（インデックス指定）
- Array join()（結合）
- Array pop()（末尾の削除）
- Array push()（末尾への追加）
- Array shift()（先頭の削除）
- Array unshift()（先頭への追加）
- Array isArray()（配列判定）
- Array delete()（要素の削除 ※非推奨）
- Array concat()（連結）
- Array copyWithin()（配列内コピー）
- Array flat()（フラット化）
- Array slice()（切り出し）
- Array splice()（要素の入れ替え）
- Array toSpliced()（非破壊的入れ替え）
2. JavaScript 配列の length
length プロパティは、配列の長さ（要素数）を返します。
2.1 コード例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length; // 4 を返すまた、length プロパティに値を代入することで、配列の長さを設定（切り詰めなど）することも可能です。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 2; // 配列は ["Banana", "Orange"] になる3. JavaScript 配列の toString()
toString() メソッドは、配列の要素をカンマ区切りの文字列として返します。
3.1 コード例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let myList = fruits.toString(); // "Banana,Orange,Apple,Mango"すべての JavaScript オブジェクトは toString() メソッドを持っています。JavaScript がオブジェクトをテキストとして表示する必要がある場合（HTML 出力時など）、内部的にこのメソッドが使用されます。
4. JavaScript 配列の at()
ES2022 で新しく導入されたのが at() メソッドです。
4.1 コード例
at() を使って 3 番目の要素を取得する：
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2); // "Apple"ブラケット [] を使って取得する場合：
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2]; // "Apple"at() メソッドはブラケット記法と同じ結果を返しますが、大きな違いは負のインデックスを使える点です。多くの言語では [-1] で末尾の要素にアクセスできますが、JavaScript の [] はオブジェクトのキー指定にも使われるため、obj[-1] は「-1 という名前のキー」を探してしまいます。at() はこの問題を解決するために導入されました。
4.2 ブラウザサポート
at() は ECMAScript 2022 の機能であり、2022 年 3 月以降、すべてのモダンブラウザでサポートされています。
5. JavaScript 配列の join()
join() メソッドもすべての要素を文字列に結合しますが、toString() との違いは「セパレータ（区切り文字）」を任意に指定できる点です。
5.1 コード例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
// 結果: Banana * Orange * Apple * Mango6. Popping と Pushing
配列の末尾に対して要素を削除したり追加したりする操作を Popping（ポッピング） および Pushing（プッシング） と呼びます。
6.1 JavaScript 配列の pop()
pop() メソッドは配列の最後の要素を削除します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // "Mango" が削除されるこのメソッドは「削除された値」を返り値として返します。
6.2 JavaScript 配列の push()
push() メソッドは配列の最後に新しい要素を追加します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // 末尾に "Kiwi" が追加されるこのメソッドは「新しい配列の長さ（length）」を返り値として返します。
7. 要素のシフティング（Shifting）
Shifting（シフティング） は Popping と似ていますが、末尾ではなく「先頭」の要素を操作します。
7.1 JavaScript 配列の shift()
shift() メソッドは配列の最初の要素を削除し、他のすべての要素を低いインデックスに「シフト」させます。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // "Banana" を削除し、他を詰める7.2 JavaScript 配列の unshift()
unshift() メソッドは配列の最初に新しい要素を追加し、古い要素を後ろにずらします。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // 先頭に "Lemon" を追加8. 要素の変更
配列の要素にはインデックス番号を使ってアクセスし、値を上書きできます。
8.1 コード例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi"; // "Banana" を "Kiwi" に書き換えまた、length プロパティを利用して簡単に要素を末尾に追加することもできます。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; // 末尾に追加9. Array.isArray()
変数が配列かどうかを判定するには、ECMAScript 5 で追加された Array.isArray() を使用します。
Array.isArray(fruits); // true または false を返す10. JavaScript 配列の delete
注意！delete 演算子を使用すると、配列内に undefined の「穴」が空いてしまいます。要素を削除したい場合は、代わりに pop() や shift()、あるいは splice() を使用してください。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // 0番目が空（undefined）になる11. 配列の結合（Concat）
concat() メソッドは、既存の配列をマージして新しい配列を作成します。
11.1 コード例
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);concat()は元の配列を変更せず、常に新しい配列を返します。- 複数の配列を引数に取ることも可能です。
- 配列だけでなく、値を直接引数に渡すこともできます。
12. Array copyWithin()
copyWithin() メソッドは、配列内の要素を同じ配列内の別の位置にコピーします。
12.1 コード例
インデックス 0 からの全要素をインデックス 2 の位置へコピーする：
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);元の値を上書きしますが、配列の長さ（length）は変わりません。
13. 配列のフラット化（Flattening）
フラット化とは、多次元配列（配列の中の配列）の次元を削減するプロセスです。
13.1 JavaScript 配列の flat()
ES2019 で導入された flat() メソッドは、サブ配列の要素を指定した深さまで連結した新しい配列を作成します。
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat(); // [1, 2, 3, 4, 5, 6]13.2 JavaScript Array flatMap()
flatMap() は、まず全要素にマップ関数を適用し、その結果をフラット化して新しい配列を作成します。
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);14. 配列の接合（Splicing）と切り出し（Slicing）
splice() は要素の追加・削除を行い、slice() は配列の一部を取り出します。
14.1 JavaScript 配列の splice()
新しい要素を追加する例：
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");- 第 1 引数 (2): 追加する位置。
- 第 2 引数 (0): 削除する数。
- 残りの引数: 追加する新しい要素。
14.2 JavaScript 配列の toSpliced()
ES2023 で追加された toSpliced() は、元の配列を変更せずに、変更を加えた新しい配列を返します。
const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1); // 元の months はそのまま15. JavaScript 配列の slice()
slice() メソッドは、配列の一部を新しい配列にコピーします。
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1); // インデックス 1 以降を切り出し- 第 2 引数を指定すると（例:
slice(1, 3)）、開始位置から終了位置の直前までが選択されます。 - 元の配列は一切変更されません。
16. 自動的な toString()
JavaScript では、プリミティブ値が期待される場面（出力を試みる際など）で、配列は自動的にカンマ区切りの文字列に変換されます。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// 以下の 2 つは同じ結果になります
document.getElementById("demo").innerHTML = fruits.toString();
document.getElementById("demo").innerHTML = fruits;