JavaScript 配列の仕組みと使い方のサンプル

JavaScriptの配列の仕組みと使い方のサンプルです。

確認環境 ・Google Chrome

目次

• 配列とは
• 　配列を作成する
• 　配列を作成する(Arrayオブジェクト)
• 　配列に値を追加する(pushメソッド)
• 　配列の値を更新する
• 　配列の値をfor文で取得する
• 先頭に値を追加 (unshiftメソッド)
• 先頭の値を削除 (shiftメソッド)
• 末尾の値を削除 (popメソッド)
• 値を置き換える/任意の位置に値を追加 (spliceメソッド)
• 値を切り出す (sliceメソッド)
• 値を区切り文字で連結 (joinメソッド)
• 値を昇順に並び替える (sortメソッド)
• 値を逆順に並び替える (reverseメソッド)
• 値のインデックスを返す(indexOfメソッド)
• 値の数を取得 (lengthプロパティ)
• 配列を連結する (concatメソッド)
• 二次元配列を作成する

配列とは

• １つの変数で複数の値を保持できます。
• 各項目を要素(element)といいます。
• 要素の順序をインデックス(添字)で管理します。上記図では[0]、[1]、[2]、[3]がインデックスです。
• インデックスは0から始まります。
• JavaScriptの配列は、要素ごとにデータ型が異なっていても格納可能です。
• 配列のオブジェクトとしてArrayオブジェクトがあります。
• 配列で関数を使用するサンプルは以下を参照下さい。
  JavaScript 配列で関数を使用(forEach/map/filter/reduce)
• 以下はMDNのArrayオブジェクトのリンクです。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

配列を作成する

配列を作成するサンプルです。

<script>

const a = ["赤","黄","青"];

console.log(a[0]); // 赤
console.log(a[1]); // 黄
console.log(a[2]); // 青

</script>

3行目は、リテラルで配列を作成しています。リテラルとはコード中に記述された値です。
5～7行目は、配列の各値を表示しています。

JavaScriptでは、配列の各値に異なるデータ型をセットできます。
例：配列の値として文字列型、数値型、論理型をセットする。

配列を作成する(Arrayオブジェクト)

Arrayオブジェクトを使用して配列を作成するサンプルです。

<script>

const c = new Array("あ","い","う");
console.log(c); //["あ", "い", "う"]

const d = new Array(2);
d[0] = "A";
d[1] = "B";
console.log(d); //["A", "B"]

</script>

3行目は、Arrayオブジェクトのコンストラクタで配列を作成しています。
6行目は、Arrayオブジェクトのコンストラクタで最初に配列の数を指定し、7,8行目で値を追加しています。

配列に値を追加する(pushメソッド)

配列.push(要素1, ..., 要素N)

配列に値を追加するサンプルです。

<script>

const a = ["赤","黄","青"];

a[3] = "白";

a.push("黒");

console.log(a); //["赤","黄","青","白","黒"]

</script>

3行目は、配列です。赤、黄、青のインデックスはそれぞれ0,1,2です。
5行目は、3行目に存在しないインデックスの3を指定してるので新しい要素として追加されます。
7行目は、pushメソッドで配列の末尾に値を追加しています。インデックスを指定しなくてよいのでこちらのほうが使いやすいです。

配列の値を更新する

配列の値を更新するサンプルです。

<script>

const a = ["赤","黄","青"];

a[1] = "オレンジ";

console.log(a); // ["赤", "オレンジ", "青"]

</script>

5行目は、3行目の配列のインデックスの1(黄)を指定しています。更新になり文字が置き換わります。

配列の値をfor文で取得する

配列の値をfor文で取得するサンプルです。

<script>
const color = ["赤","黄","青"];

for(const c1 of color ){
	console.log(c1); //赤 黄 青
}

for (let i = 0; i < color.length; i++) {
	console.log(color[i]); //赤 黄 青
}
</script>

4～6行目は、for...of文で値を取得しています。for...of文は書きやすいですがIE11は未対応です。
8～10行目は、for文で配列の各値を取得しています。
以下は、MDNのfor...ofのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

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

配列の先頭に値を追加するサンプルです。

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

a.unshift("さ");

console.log(a); //["さ", "あ", "い", "う"]
 
</script>

5行目は、unshiftメソッドで配列の先頭に値を追加しています。

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

配列の先頭の値を削除するサンプルです。

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

a.shift();

console.log(a); //["い", "う"]
 
</script>

5行目は、shiftメソッドで先頭の値を削除しています。

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

配列の末尾の値を削除するサンプルです。

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

a.pop();

console.log(a); //["あ", "い"]
 
</script>

5行目は、popメソッドで末尾の値を削除しています。

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

配列.splice(start[, deleteCount[, item1[, item2[, ...]]]])

startの値の位置から指定の数分の値を指定の値で置き換えます。(startは0から始まります)

配列の値を置き換える/任意の位置に値を追加するサンプルです。

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

a.splice(1,2,"Y");

console.log(a); //["あ", "Y"]

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

b.splice(1,0,"Z");

console.log(b); //["あ", "Z", "い", "う"]
 
</script>

5行目は、spliceメソッドで配列の2つの値を1つに置き換えています。
11行目のようにspliceメソッドの2つめの引数を0にすると任意の位置に値を追加できます。

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

配列.slice([begin[, end]])

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

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

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

const b = a.slice(1,2);

console.log(b); //["い"]


const c = a.splice(1,3);

console.log(c); //["い", "う"]
 
</script>

5行目は、sliceメソッドで配列の値を1つに切り出しています。
11行目は、sliceメソッドで配列の値を2つに切り出しています。

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

配列.join([separator])

引数の区切り文字で連結して新しい配列を返します。

値を区切り文字で連結するサンプルです。

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

const b = a.join("=");

console.log(b); //あ=い=う

</script>

5行目は、joinメソッドで配列の値を引数の値で連結しています。

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

値を昇順に並び替えるサンプルです。

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

a.sort();

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

</script>

5行目は、sortメソッドで昇順に並び替えています。

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

値を逆順に並び替えるサンプルです。

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

a.reverse();

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

</script>

5行目は、reverseメソッドで逆順に並び替えています。

値のインデックスを返す(indexOfメソッド)

配列.indexOf(searchElement[, fromIndex]);

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

配列の値のインデックスを返すサンプルです。

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

const b = a.indexOf("う");

console.log(b); //2

</script>

5行目は、indexOfメソッドで指定した値のインデックスを返します。

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

配列の値の数を取得するサンプルです。

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

console.log(a.length); //3

</script>

5行目は、lengthプロパティで配列の値の数を返します。

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

var 変数 = 配列.concat([value1[, value2[, ...[, valueN]]]])

配列を連結して新しい配列を返します。

配列を連結するサンプルです。

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

console.log(c); // ["あ", "い", "う", "A", "B", "C"]

</script>

6行目は、concatメソッドで2つの配列を結合しています。

二次元配列を作成する

二次元配列を作成するサンプルです。

<script>

const a = [
	["赤","黄","青"],
	["緑","白","黒"]
];

console.log(a[0][0]); //赤
console.log(a[0][1]); //黄
console.log(a[0][2]); //青
console.log(a[1][0]); //緑
console.log(a[1][1]); //白
console.log(a[1][2]); //黒

//入れ子の構造
const b = [
	"色の種類",
	["赤","黄","青"],
	["緑","白","黒"]
];

console.log(b[0]); // 色の種類
console.log(b[1]); // (3) ["赤", "黄", "青"]
console.log(b[2]); // (3) ["緑", "白", "黒"]
console.log(b[1][0]); // 赤
console.log(b[1][1]); // 黄
console.log(b[1][2]); // 青
</script>

3～6行目は、二次元の配列を作成しています。
8～13行目は、インデックス番号を2つ使用して配列の値を参照しています。

16～20行目は、入れ子の構造の配列を作成しています。

関連の記事

JavaScript if文で配列を比較するサンプル
JavaScript for...in文とfor...of文のサンプル
JavaScript 配列で関数を使用(forEach/map/filter/reduce)
JavaScript 連想配列のサンプル