TECH I.S.

JavaScript 配列メソッド

メソッドは、このチュートリアルのページに表示される順番に並んでいます。
Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
 Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

JavaScript Array length

lengthプロパティは、配列の長さ(サイズ)を返します。

例

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

JavaScript Array toString()

JavaScriptのメソッドtoString()は、配列を(コンマ区切りの)配列値の文字列に変換します。

例

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

結果：

バナナ、オレンジ、アップル、マンゴー

Javascript Array at()

ES2022では配列メソッドat()が導入されました。

例

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

例

[ ]を使用して果物の 3 番目の要素を取得します。：

const fruits = ["Banana", "Orange", "Apple", "Mango"]; let fruit = fruits.at(2);
at()メソッドは、配列からインデックス付き要素を返します。
at()メソッドは[ ]と同じものを返します。 at()メソッドは、2022年3月以降、すべてのモダンブラウザでサポートされています。


Chrome92 Edge92 Firefox90 Safari15.4 Opera78
2021年4月 2021年7月 2021年7月 2022年3月 2021年8月

注
多くの言語では、オブジェクト/配列/文字列の末尾から要素にアクセスするために、[-1]のような負の括弧によるインデックス付けが認められています。
obj[-1]は、オブジェクトの最後のプロパティではなく、キー-1の値を指します。
at()メソッドは、この問題を解決するためにES2022で導入されました。

Javascript Array join()

join()メソッドは、すべての配列要素を文字列に結合します。

これはtoString()のように動作し、さらに区切り文字を指定できます。

例

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

結果：

バナナ、オレンジ、アップル、マンゴー

ポッピングとプッシュ

配列を操作する場合、要素を削除して新しい要素を追加するのは簡単です。

ポッピングとプッシュとは次のとおりです。

項目を配列から外へポップするか、項目を配列の中へプッシュします。

JavaScript配列 pop()

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

例

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

pop()メソッドは、「ポップアウト」された値を返します。

例

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

JavaScript配列 push()

push()メソッドは、新しい要素を配列に(最後に)追加します。

例

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

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

例

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

シフト要素

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

JavaScript 配列 shift()

shift()メソッドは最初の配列要素を削除し、他のすべての要素をより低いインデックスに「シフト」します。

例

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

shift()メソッドは、「シフトアウト」された値を返します。

例

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

JavaScript配列 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 配列の長さ

lengthプロパティを使用すると、配列に新しい要素を簡単に追加できます。

例

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

JavaScript配列 delete()

警告 ！

配列要素はJavaScript演算子のdeleteを使用して削除できます。

deleteを使用すると、配列にundefinedの穴が残ります。

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

例

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

Merging Arrays (連結)

プログラミング言語では、連結とは文字列をエンドツーエンドで結合することを意味します。 「snow」と「ball」を連結すると「snowball」になります。 配列の連結とは、配列をエンドツーエンドで結合することを意味します。

array concat()

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

例 (2 つの配列の結合)

const myGirls = ["Cecilie", "Lone"]; const myBoys = ["Emil", "Tobias", "Linus"]; const myChildren = myGirls.concat(myBoys);

concat()メソッドは既存の配列を変更しません。常に新しい配列を返します。
concat()メソッドは、任意の数の配列引数を取ることができます:

例 (3つの配列の結合)

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"); 

Flatting an Array

配列のフラット化は、配列の次元を削減するプロセスです。
フラット化は、多次元配列を 1 次元配列に変換する場合に便利です。

Array flat()

ES2019からArray flat()メソッドを導入。 flat() メソッドは、部分配列の要素を指定した深さまで連結した新しい配列を作成します。

例 (配列と値の結合)

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

ブラウザーサポート

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


Chrome69 Edge79 Firefox62 Safari12 Opera56
2018年9月 2020年1月 2018年6月 2018年9月 2018年9月

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

splice()メソッドは新しい項目を配列に追加します。 slice()メソッドは、配列の一部をスライスします。

JavaScript配列 splice()

splice()メソッドを使用して、新しい項目を配列に追加できます。

例

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

最初のパラメータ(2)は、新しい要素を追加(スプライス)する位置を定義する。

2番目のパラメータ(0)は、いくつの要素を削除するかを定義する。

残りのパラメーター("Lemon" 、"Kiwi")は、追加される新しい要素を定義します。

splice()メソッドは、削除されたアイテムを含む配列を返します。

例

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

splice()を使用して要素を削除する

巧妙なパラメータ設定で、splice()配列に「穴」を残さずに要素を削除するには:

例

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

最初のパラメータ(0)は、新しい要素を追加する(結合する)位置を定義します。

2 番目のパラメータ(1)は、削除する要素の数*を定義します。

残りのパラメーターは省略されます。新しい要素は追加されません。

JavaScript Array toSpliced()

ES2023で、元の配列を変更せずに配列を分割する安全な方法として、Array toSpliced()メソッドが追加されました。

新しい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)のように2つの引数を取ることが出来ます。

メソッドは次に、start引数からend引数まで(ただし、end引数は含まない) の要素を選択します。

例

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

最初の例のようにend引数を省略すると、slice()メソッドは、配列の残りをスライスします。

例

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

自動 toString()

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

これは、配列を出力しようとする場合に常に当てはまります。

次の2つの例では、同じ結果が生成されます。

例

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()メソッドがあります。

配列内の最大値と最小値を見つける

JavaScript配列の最高値または最低値を見つけるための組み込み関数はありません。

この問題の解決方法については、このチュートリアルの次の章で説明します。

配列のソート

配列の並べ替えについては、このチュートリアルの次の章で説明します。

完全な配列リファレンス

配列の完全なリファレンスについては、完全な JavaScript 配列リファレンスを参照してください。

このリファレンスには、配列のすべてのプロパティとメソッドの説明と例が含まれています。


チュートリアル