コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

JavaScript 配列メソッド

基本的な配列メソッド

Array length

length プロパティは配列の長さ（サイズ）を返します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

JavaScript Array toString()

toString() メソッドは、配列を（カンマで区切られた）文字列に変換します。


const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

結果:

Banana,Orange,Apple,Mango

JavaScript Array at()

ES2022 で導入された配列メソッド at()：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

または、通常の配列のインデックス指定と同じです：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

at() メソッドは、配列からインデックス指定された要素を返します。

at() メソッドは、[] と同じ結果を返します。

at() メソッドは、2022 年 3 月以降の全てのモダンブラウザでサポートされています：

Chrome 92, Edge 92, Firefox 90, Safari 15.4, Opera 78

注:

多くの言語では、[-1] のような負のインデックスを使ってオブジェクトや配列、文字列の末尾の要素にアクセスできますが、JavaScript ではできません。なぜなら、[] は配列やオブジェクトの両方に対して使われるためです。例えば、obj[-1] は key -1 の値を参照し、オブジェクトの最後のプロパティを参照するわけではありません。

この問題を解決するために、ES2022 で at() メソッドが導入されました。

JavaScript Array join()

join() メソッドは、すべての配列要素を指定したセパレータで連結します。


const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

結果:

Banana * Orange * Apple * Mango

Popping と Pushing

配列を操作する際に、要素の削除と追加は簡単です。

これがポップとプッシュです。

JavaScript Array pop()

pop() メソッドは、配列から最後の要素を削除します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

pop() メソッドは、取り除かれた値を返します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

JavaScript Array push()

push() メソッドは、配列に新しい要素を追加します（末尾に）：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

push() メソッドは、新しい配列の長さを返します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Shifting Elements

シフトはポップと同等ですが、最初の要素ではなく最初の要素で動作します。

JavaScript Array shift()

shift() メソッドは、最初の配列要素を削除し、すべての他の要素のインデックスを下げます。


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

shift() メソッドは、削除された値を返します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

JavaScript Array unshift()

unshift() メソッドは、新しい要素を配列の先頭に追加し、古い要素を後ろに移動します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

unshift() メソッドは、新しい配列の長さを返します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

要素の変更

配列要素は、インデックス番号を使ってアクセスします：

配列のインデックスは 0 から始まります：

  • [0] は最初の配列要素
  • [1] は2番目
  • [2] は3番目 …

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

JavaScript Array length

length プロパティは新しい要素を配列に追加する簡単な方法を提供します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

JavaScript Array delete()

注意！

delete() を使うと、配列に未定義の「穴」ができます。

pop() や shift() を代わりに使用してください。


const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

配列のマージ（連結）

プログラミング言語では、連結（concatenation）は文字列を末尾から連結することを意味します。

配列の連結は、配列を末尾から連結することを意味します。

JavaScript Array concat()

concat() メソッドは既存の配列をマージ（連結）して新しい配列を作成します：

（二つの配列をマージする例）


const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

注：

concat() メソッドは既存の配列を変更しません。常に新しい配列を返します。

concat() メソッドは任意の数の配列引数を取ることができます。

（三つの配列をマージする例）


const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

concat() メソッドは文字列を引数としても取ることができます：

（値を含む配列とマージする例）


const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

JavaScript Array copyWithin()

copyWithin() メソッドは、配列の要素を他の位置にコピーします：

（0 から index 2 にすべての要素をコピーする例）


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

（0 から 2 までの要素を index 2 にコピーする例）


const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2);

注：

copyWithin() メソッドは既存の値を上書きします。

copyWithin() メソッドは配列に新しいアイテムを追加しません。

copyWithin() メソッドは配列の長さを変更しません。

配列のフラット化

フラット化（Flattening）は配列の次元を低くするプロセスです。

複数次元の配列を一次元の配列に変換する際に便利です。

JavaScript Array flat()

ES2019 で導入された flat() メソッド。

flat() メソッドは指定された深さまでのサブ配列要素を結合した新しい配列を作成します。


const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

ブラウザサポート:

JavaScript Array flat() は、2020 年 1 月以降のすべてのモダンブラウザでサポートされています：

Chrome 69, Edge 79, Firefox 62, Safari 12, Opera 56

配列のスプライシングとスライシング

splice() メソッドは新しいアイテムを配列に追加します。

slice() メソッドは配列の一部を取り出します。

JavaScript Array splice()

splice() メソッドは新しいアイテムを配列に追加できます：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一パラメータ（2）は新しい要素が追加される位置を定義します。

第二パラメータ（0）は削除される要素の数を定義します。

残りのパラメータ（”Lemon”, “Kiwi”）は追加される新しい要素を定義します。

splice() メソッドは削除されたアイテムが入った配列を返します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

要素を削除するために splice() を利用する例:


const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

JavaScript Array toSpliced()

ES2023 で追加された Array toSpliced() メソッドは、元の配列を変更せずに新しい配列を作成する安全な splice() 方法です。


const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);

JavaScript Array slice()

slice() メソッドは配列の一部を新しい配列に取り出します：

配列の要素 1 から取り出す例（”Orange” から）：


const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

注：

slice() メソッドは新しい配列を作成します。

slice() メソッドは元の配列から要素を削除しません。

配列の要素 3 から取り出す例（”Apple” から）：


const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

slice() メソッドは slice(1, 3) のように二つの引数を取ることができます。

メソッドは開始引数からの要素を選択し、終了引数まで（含まず）です。

引数が省略されると、最初の例のように、slice() メソッドは残りの配列を取り出します。

自動 toString()

プリミティブな値が期待される場合、JavaScript は自動的に配列をカンマ区切りの文字列に変換します。

これは、配列を出力しようとした場合に常に行われます。

次の二つの例は同じ結果を出力します：


const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();


const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

注：

すべての JavaScript オブジェクトには toString() メソッドがあります。