JavaScriptの配列の仕組みと使い方のサンプルです。
配列とは
a = [ 値1 , 値2 , 値3 ]; |
上記は複数の値を変数aに代入しています。
この変数aは配列として複数の値を持ちます。
配列の図
- 1つの変数で複数の値を保持できます。
- 各項目を要素(element)といいます。
- 要素の位置をインデックス(添字)で管理します。上記図では[0]、[1]、[2]、[3]です。
- インデックスは0から始まります。
- JavaScriptの配列は、要素ごとにデータ型が異なっていても格納可能です。
→例:配列の値として文字列型、数値型、論理型をセットする。 - JavaScriptの配列は可変長です。要素の追加や削除は可能です。
- 以下はMDNのArrayオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
初期化して作成
<script>
const arr = ["赤", "黄", "青"];
console.log(arr[0]); // 赤
console.log(arr[1]); // 黄
console.log(arr[2]); // 青
</script>
リテラルで配列を作成しています。リテラルとはコード中に記述された値です。
空の配列を作成
const arr = [];
arr[0] = "赤";
arr[1] = "黄";
console.log(arr[0]); // 赤
console.log(arr[1]); // 黄
空の配列を作成した後に値をセットしています。
要素の数を宣言して作成
const arr = new Array(3);
arr[0] = "赤";
arr[1] = "黄";
arr[2] = "青";
arr[3] = "黒";
arr[4] = "白";
console.log(arr); //["赤", "黄", "青", "黒", "白"]
JavaScriptの配列は可変長のため宣言した要素数以上を追加できます。
要素を取得(for文、forEach、for...of文)
const arr = ["赤", "黄", "青"];
// for文
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); //赤 黄 青
}
// foEach
arr.forEach(function (a, b) {
console.log(a); //赤 黄 青
console.log(b); //0 1 2
});
// for...of文
for (const c1 of arr) {
console.log(c1); //赤 黄 青
}
for...of文は、IE11未対応です。
要素数・文字列を返す(length,toString)
const arr = ["あ", "い", "う", "え", "お"];
// 要素数を返す
console.log(arr.length); //5
// 文字列を返す
console.log(arr.toString()); //あ,い,う,え,お
// 区切り文字で連結
arrJoin = arr.join("-");
console.log(arrJoin); //あ-い-う-え-お
lengthは、要素数を返します。
toStringは、文字列を返します。
joinは、 引数の区切り文字で連結して新しい文字列を返します。
値を切り出す(slice)
sliceは、値を切り出し新しい配列として返します。
const arr = ["あ", "い", "う", "え", "お"];
// 値を切り出す
console.log(arr.slice(1, 2)); //["い"]
console.log(arr.slice(1, 3)); //["い", "う"]
console.log(arr.slice(1)); //["い", "う", "え", "お"]
//コピー
const arrCopy = arr.slice();
console.log(arrCopy); //["あ", "い", "う", "え", "お"]
sliceの1つ目の引数は開始位置で2つ目の引数は終了位置です。
引数がない場合は配列のコピーになります。
コピー先の配列の変更はコピー元の配列に変更を及ぼしません。
要素を検索(indexOf)・配列か(isArray)
const arr = ["あ", "い", "う", "え", "お"];
// 要素を検索
console.log(arr.indexOf("い")); // 1 位置を返す
console.log(arr.indexOf("A")); // -1 存在しない
// 配列か
console.log(Array.isArray(arr)); // true 配列である
indexOfは、指定した値が存在する場合は位置(数値)を、存在しない場合-1を返します。
isArrayは、引数が配列のときはtrue、そうでない場合はfalseを返します。
配列のコピーと連結(concat)
const arr1 = ["あ", "い", "う", "え", "お"];
// コピー
let arrCopy = arr1.concat();
arrCopy.push("A");
console.log(arrCopy); //["あ", "い", "う", "え", "お", "A"]
console.log(arr1); //["あ", "い", "う", "え", "お"]
const arr2 = ["A", "B", "C"];
// 連結
const arr3 = arr1.concat(arr2);
console.log(arr3); //["あ", "い", "う", "え", "お", "A", "B", "C"]
concatは、引数がない場合は配列のコピーになります。
引数がある場合は配列を連結して新しい配列を返します。
コピー先の配列の変更はコピー元の配列に変更を及ぼしません。
要素を追加・変更(push,unshift,添字)
const arr = ["い", "う", "え"];
// 末尾に追加
arr.push("お");
console.log(arr); // ["い", "う", "え", "お"]
// 先頭に追加
arr.unshift("あ");
console.log(arr); // ["あ", "い", "う", "え", "お"]
// インデックスで指定して追加
arr[1] = "ABC";
console.log(arr); // ["あ", "ABC", "う", "え", "お"]
pushは、配列の末尾に要素を追加します。
unshiftは、配列の先頭に要素を追加します。
変更は、インデックス(添字)で指定して値を代入します。
要素を削除(shift,pop,空の配列)
let arr = ["あ", "い", "う", "え", "お"];
//先頭を削除
arr.shift();
console.log(arr); // ["い", "う", "え", "お"]
//末尾を削除
arr.pop();
console.log(arr); // ["い", "う", "え"]
//全て削除
arr = [];
console.log(arr); // []
shiftメソッドは、先頭の要素を削除します。
popメソッドは、末尾の要素を削除します。
空の配列を代入すると全ての要素を削除します。constの場合エラーになります。
要素を追加・変更・削除(splice)
配列.splice(数値, 数値, 値) |
const arr = ["あ", "い", "う"];
// 追加
arr.splice(1, 0, "Y");
console.log(arr); //["あ", "Y", "い", "う"]
// 変更
arr.splice(1, 1, "A");
console.log(arr); //["あ", "A", "い", "う"]
// 削除
arr.splice(1, 1);
console.log(arr); //["あ", "い", "う"]
追加:引数の1つめは追加する位置、2つめは0、3つめは追加する値を指定。
変更:引数の1つめは変更する位置、2つめは変更する要素の数、3つめは変更後の値を指定。
削除:引数の1つめは削除する位置、2つめは削除する要素の数を指定。
要素を逆順・昇順にソート(reverse,sort)
const arr = ["い", "あ", "う"];
// 逆順
arr.reverse();
console.log(arr); //["う", "あ", "い"]
// 昇順にソート
arr.sort();
console.log(arr); //["あ", "い", "う"]
reverseは、逆順にします。降順ではありません。
sortは、昇順にソートします。
関連の記事
JavaScript 2次元配列のサンプル
JavaScript reduce 配列を1つの値にして出力
JavaScript オブジェクト(連想配列)の使い方