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"]

const c = ["あ","い","う"];

c.splice(1,0,"Z");
console.log(c); //["あ", "Z", "い", "う"]
</script>

14行目のように2つめの引数に0をセットすると任意の位置に要素を追加できます。

要素を切り出す (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文のサンプル

プログラムでつまったらteratailに登録して質問しましょう！↓↓↓

△上に戻る