JavaScript 配列のメソッドのサンプル(Arrayオブジェクト)

nas

JavaScriptの配列のメソッドのサンプルです。
Arrayオブジェクトのメソッドとプロパティを使用します。

目次

Arrayオブジェクト

先頭に値を追加 (unshiftメソッド)

配列の先頭に値を追加するサンプルです。
unshiftメソッドを使用します。

<script>

const a = ["あ","い","う"];
a.unshift("さ");
console.log(a); //["さ", "あ", "い", "う"]

</script>

先頭の値を削除 (shiftメソッド)

配列の先頭の値を削除するサンプルです。
shiftメソッドを使用します。

<script>

const a = ["あ","い","う"];
a.shift();
console.log(a); //["い", "う"]

</script>

末尾に値を追加 (pushメソッド)

配列の末尾に値を追加するサンプルです。
pushメソッドを使用します。

<script>

const a = ["あ","い","う"];
a.push("か");
console.log(a); //["あ", "い", "う", "か"]

</script>

末尾の値を削除 (popメソッド)

配列の末尾の値を削除するサンプルです。
popメソッドを使用します。

<script>

const a = ["あ","い","う"];
a.pop();
console.log(a); //["あ", "い"]

</script>

値を置き換える/任意の位置に値を追加 (spliceメソッド)

splice(start,数[,A[,...]])

spliceメソッドは、startの値の位置から数分の値をAで置き換えます。(startは0から始まります)

値を置き換えるサンプルです。

<script>

const a = ["あ","い","う"];
a.splice(1,1,"Z");
console.log(a); // ["あ", "Z", "う"]

const b = ["あ","い","う"];
b.splice(1,2,"Y");
console.log(b); //["あ", "Y"]

</script>

spliceメソッドの2つめの引数に0をセットすると任意の位置に値を追加できます。

<script>

const c = ["あ","い","う"];
c.splice(1,0,"Z");
console.log(c); //["あ", "Z", "い", "う"]

</script>

値を切り出す (sliceメソッド)

slice(start[,end])

sliceメソッドは、配列の値を切り出します。
start～end-1の値を切り出し新しい配列として返します。(startは0から始まります)
endがない場合は最後の値まで切り出し新しい配列として返します。

値を切り出すサンプルです。

<script>
const a = ["あ","い","う"];

const b = a.slice(0,1);
console.log(b); //["あ"]

const c = a.slice(1,2);
console.log(c); //["い"]

const d = a.slice(1,3);
console.log(d); //["い", "う"]

const e = a.slice(1);
console.log(e); //["い", "う"]
</script>

値を区切り文字で連結 (joinメソッド)

値を指定した区切り文字で連結するサンプルです。文字列を返します。
joinメソッドを使用します。

<script>

const a = ["あ","い","う"];
const b = a.join("<->");
console.log(b); //あ<->い<->う

</script>

値を昇順に並び替える (sortメソッド)

値を昇順に並び替えるサンプルです。
sortメソッドを使用します。

<script>

const a = ["い","あ","う"];
a.sort();
console.log(a); //["あ", "い", "う"]

</script>

値を逆順に並び替える (reverseメソッド)

値を逆順に並び替えるサンプルです。
reverseメソッドを使用します。

<script>

const a = ["い","あ","う"];
a.reverse();
console.log(a); //["う", "あ", "い"]

</script>

値の存在を確認する(indexOfメソッド)

indexOfメソッドは、引数の値が存在する要素のインデックスを返します。
指定した値が存在しない場合-1を返します。

値の存在を確認するサンプルです。

<script>
const a = ["あ","い","う"];

const b = a.indexOf("う");
console.log(b); //2

const c = a.indexOf("え");
console.log(c); //-1
</script>

4行目は、配列aの"う"が存在するインデックスの2が返ります。
7行目は、配列aに"え"が存在しないので-1が返ります。

値の数を取得 (lengthプロパティ)

値の数を取得するサンプルです。
lengthプロパティを使用します。

<script>

const a = ["あ","い","う"];
console.log(a.length); //3

</script>

配列を連結する (concatメソッド)

配列を連結するサンプルです。新しい配列を返します。
concatメソッドを使用します。

<script>
const a = ["あ","い","う"];
const b = ["A","B","C"];

const c = a.concat(b)
console.log(c); // ["あ", "い", "う", "A", "B", "C"]
</script>

配列の各値を関数で実行(forEachメソッド)

配列の値を関数に渡して実行するサンプルです。

<script>
const a = ["A","B","C"];

a.forEach(function(b){
	console.log(b + "です"); //Aです Bです Cです
});
</script>

4行目は、配列の値の数分、function(b)を実行します。bに各値がはいります。
breakは使用できません。

配列の各値を関数で実行＋新しい配列を作成(mapメソッド)

配列の各値を関数で実行+新しい配列を作成するサンプルです。

<script>
const a = ["A","B","C"];

const c = a.map(function(b){
	return b + "です";
});

console.log(c); //(3) ["Aです", "Bです", "Cです"]

console.log(a); //(3) ["A", "B", "C"]
</script>

4行目は、配列の値の数分、function(b)を実行します。bに各値が入ります。
実行の結果、配列cが作成されます。

配列の各値を関数で実行＋新しい配列を作成＋絞る(filterメソッド)

配列の各値を関数で実行＋新しい配列を作成＋絞るサンプルです。

<script>
const a = [1,5,9];

const c = a.filter(function(b){
	return b > 6;
});

console.log(c); //[9]

console.log(a); //(3) [1, 5, 9]
</script>

4行目は、配列の値の数分、function(b)を実行します。bに各値がはいります。
5行目の条件にあった値が、配列cとして作成されます。

配列の各値を関数で実行＋新しい配列を作成＋単一の値にする(reduceメソッド)

配列の各値を関数で実行＋新しい配列を作成＋単一の値にするサンプルです。
配列の各値を合計するときなどに使用します。

<script>
const a = [1,5,9,3];

const c = a.reduce(function(b,c){
	return b + c;
});

console.log(c); //18
</script>

4行目の引数は特殊です。以下のように実行されます。
1回目は、引数のbには1つめの配列の値、cには2つめの配列の値がはいります。→戻り値は6
2回目は、引数のbには1回めの戻り値、cには3つめの配列の値がはいります。→戻り値は15
3回目は、引数のbには2回めの戻り値、cには4つめの配列の値がはいります。→戻り値は18

関連の記事

JavaScript 配列の使い方のサンプル
JavaScript if文で配列を比較するサンプル
JavaScript for...in文とfor...of文のサンプル

△上に戻る