配列とは
| a = [ 値1 , 値2 , 値3 ]; |
上記は複数の値を変数aに代入しています。
この変数aは配列として複数の値を持ちます。
配列の図
- １つの変数で複数の値を保持できます。
- 各項目を要素(element)といいます。
- 要素の位置をインデックス(添字)で管理します。上記図では[0]、[1]、[2]、[3]です。
- インデックスは0から始まります。
- JavaScriptの配列は、要素ごとにデータ型が異なっていても格納可能です。
→例：配列の値として文字列型、数値型、論理型をセットする。 - JavaScriptの配列は可変長です。要素の追加や削除は可能です。
配列を作成
<script>
const arr = ["Aaa", "Bbb", "Ccc"];
console.log(arr[0]); // Aaa
console.log(arr[1]); // Bbb
console.log(arr[2]); // Ccc
</script>リテラルで配列を作成しています。リテラルとはコード中に記述された値です。
空の配列を作成
const arr = [];
arr[0] = "Aaa";
arr[1] = "Bbb";
console.log(arr[0]); // Aaa
console.log(arr[1]); // Bbb空の配列を作成した後に値をセットしています。
要素の数を宣言して作成
const arr = new Array(2);
arr[0] = "Aaa";
arr[1] = "Bbb";
arr[2] = "Ccc";
arr[3] = "Ddd";
console.log(arr); //['Aaa', 'Bbb', 'Ccc', 'Ddd']
JavaScriptの配列は可変長のため宣言した要素数以上を追加できます。
要素を取得(for文)
const arr = ["Aaa", "Bbb", "Ccc"];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); //Aaa Bbb Ccc
}
要素の数分処理されます。
要素を取得(forEach)
const arr = ["Aaa", "Bbb", "Ccc"];
arr.forEach(function (a, b) {
console.log(a); //Aaa Bbb Ccc
console.log(b); //0 1 2
});
4行目は、インデックス(添字)です。
要素を取得(for...of文)
const arr = ["Aaa", "Bbb", "Ccc"];
for (const c1 of arr) {
console.log(c1); //Aaa Bbb Ccc
}
要素の数分処理されます。
要素数を返す(length)
const arr = ["Aaa", "Bbb", "Ccc"];
console.log(arr.length); // 3
lengthは、要素数を返します。
文字列を返す(toString)
const arr = ["Aaa", "Bbb", "Ccc"];
console.log(arr.toString()); // Aaa,Bbb,Ccc
toStringは、文字列を返します。
文字列を返す(join)
const arr = ["Aaa", "Bbb", "Ccc"];
console.log(arr.join("-")); // Aaa-Bbb-Ccc
console.log(arr.join("")); // AaaBbbCcc
console.log(arr.join()); // Aaa,Bbb,Ccc
joinは、 引数の区切り文字で連結して新しい文字列を返します。
3行目の引数は空文字で区切り文字なしの連結になります。
4行目は引数なしでカンマ区切りになります。
要素を切り出す(slice)
const arr = ["Aaa", "Bbb", "Ccc", "Ddd"];
console.log(arr.slice(1, 2)); // ['Bbb']
console.log(arr.slice(1, 3)); // ['Bbb', 'Ccc']
console.log(arr.slice(1)); // ['Bbb', 'Ccc', 'Ddd']
sliceの１つ目の引数は開始位置で2つ目の引数は終了位置です。
配列のコピー(slice)
const arr1 = ["Aaa", "Bbb", "Ccc"];
let arrCopy = arr1.slice();
arrCopy.push("ZZZ");
console.log(arrCopy); //['Aaa', 'Bbb', 'Ccc', 'ZZZ']
console.log(arr1); //['Aaa', 'Bbb', 'Ccc']
arrCopy[1] = "XXX";
console.log(arrCopy); //['Aaa', 'XXX', 'Ccc', 'ZZZ']
console.log(arr1); //['Aaa', 'Bbb', 'Ccc']
sliceに引数がない場合は配列のコピーになります。
要素を検索(indexOf)
const arr = ["Aaa", "Bbb", "Ccc"];
console.log(arr.indexOf("Aaa")); // 0 位置を返す
console.log(arr.indexOf("Bbb")); // 1 位置を返す
console.log(arr.indexOf("ZZZ")); // -1 存在しない
console.log(arr.indexOf("a")); // -1 存在しない
indexOfは、指定した値が存在する場合は位置(数値)を、存在しない場合-1を返します。
配列か(isArray)
const arr = ["Aaa", "Bbb", "Ccc"];
console.log(Array.isArray(arr)); // true
const str1 = "Aaa";
console.log(Array.isArray(str1)); // false
isArrayは、引数が配列のときはtrue、そうでない場合はfalseを返します。
配列のコピー(concat)
const arr1 = ["Aaa", "Bbb", "Ccc"];
let arrCopy = arr1.concat();
arrCopy.push("ZZZ");
console.log(arrCopy); //['Aaa', 'Bbb', 'Ccc', 'ZZZ']
console.log(arr1); //['Aaa', 'Bbb', 'Ccc']
arrCopy[1] = "XXX";
console.log(arrCopy); //['Aaa', 'XXX', 'Ccc', 'ZZZ']
console.log(arr1); //['Aaa', 'Bbb', 'Ccc']
concatは、引数がない場合は配列のコピーになります。
配列の連結(concat)
const arr1 = ["Aaa", "Bbb", "Ccc"];
const arr2 = ["XXX", "YYY", "ZZZ"];
const arr3 = arr1.concat(arr2);
console.log(arr3); //['Aaa', 'Bbb', 'Ccc', 'XXX', 'YYY', 'ZZZ']
concatは、引数がある場合は配列を連結して新しい配列を返します。
末尾に要素を追加(push)
const arr = ["Aaa", "Bbb", "Ccc"];
arr.push("ZZZ");
console.log(arr); // ['Aaa', 'Bbb', 'Ccc', 'ZZZ']
pushは、配列の末尾に要素を追加します。
先頭に要素を追加(unshift)
const arr = ["Aaa", "Bbb", "Ccc"];
arr.unshift("ZZZ");
console.log(arr); // ['ZZZ', 'Aaa', 'Bbb', 'Ccc']
unshiftは、配列の先頭に要素を追加します。
インデックスで指定して要素を追加/変更(添字)
const arr1 = ["Aaa", "Bbb", "Ccc"];
arr1[1] = "ZZZ";
console.log(arr1); // ['Aaa', 'ZZZ', 'Ccc']
const arr2 = ["Aaa", "Bbb", "Ccc"];
arr2[3] = "ZZZ";
console.log(arr2); // ['Aaa', 'Bbb', 'Ccc', 'ZZZ']
const arr3 = ["Aaa", "Bbb", "Ccc"];
arr3[4] = "ZZZ";
console.log(arr3); // ['Aaa', 'Bbb', 'Ccc', , 'ZZZ']
インデックス(添字)の位置に要素がある場合は変更、ない場合は追加になります。
先頭の要素を削除(shift)
const arr = ["Aaa", "Bbb", "Ccc"];
arr.shift();
console.log(arr); // ['Bbb', 'Ccc']
shiftメソッドは、先頭の要素を削除します。
末尾の要素を削除(pop)
const arr = ["Aaa", "Bbb", "Ccc"];
arr.pop();
console.log(arr); // ['Aaa', 'Bbb']
popメソッドは、末尾の要素を削除します。
全ての要素を削除(空の配列)
let arr = ["Aaa", "Bbb", "Ccc"];
arr = [];
console.log(arr); // []
空の配列を代入すると全ての要素を削除します。constの場合エラーになります。
位置を指定して要素を追加(splice)
| 配列.splice(追加する位置, 0, 追加する値) |
2つめの引数を0にすることにより指定の位置に要素を追加できます。
位置は0から始まります。
const arr1 = ["Aaa", "Bbb", "Ccc"];
arr1.splice(1, 0, "ZZZ");
console.log(arr1); //['Aaa', 'ZZZ', 'Bbb', 'Ccc']
const arr2 = ["Aaa", "Bbb", "Ccc"];
arr2.splice(2, 0, "ZZZ");
console.log(arr2); // ['Aaa', 'Bbb', 'ZZZ', 'Ccc']
位置を指定して要素を変更(splice)
| 配列.splice(変更する位置, 変更する要素の数, 変更後の値) |
const arr1 = ["Aaa", "Bbb", "Ccc"];
arr1.splice(1, 1, "ZZZ");
console.log(arr1); //['Aaa', 'ZZZ', 'Ccc']
const arr2 = ["Aaa", "Bbb", "Ccc"];
arr2.splice(2, 1, "ZZZ");
console.log(arr2); // ['Aaa', 'Bbb', 'ZZZ']
const arr3 = ["Aaa", "Bbb", "Ccc"];
arr3.splice(0, 1, "ZZZ");
console.log(arr3); // ['ZZZ', 'Bbb', 'Ccc']
const arr4 = ["Aaa", "Bbb", "Ccc"];
arr4.splice(0, 2, "ZZZ");
console.log(arr4); // ['ZZZ', 'Ccc']
14行目は、2つめの引数が2なので要素２つ(AAAとBBB)と変更されています。
位置は0から始まります。
位置を指定して要素を削除(splice)
| 配列.splice(削除する位置, 削除する要素の数) |
引数が2つだと要素の削除になります。位置は0から始まります。
const arr1 = ["Aaa", "Bbb", "Ccc"];
arr1.splice(1, 1);
console.log(arr1); //['Aaa', 'Ccc']
const arr2 = ["Aaa", "Bbb", "Ccc"];
arr2.splice(2, 1);
console.log(arr2); // ['Aaa', 'Bbb']
const arr3 = ["Aaa", "Bbb", "Ccc"];
arr3.splice(0, 2);
console.log(arr3); // ['Ccc']
const arr4 = ["Aaa", "Bbb", "Ccc"];
arr4.splice(0, 3);
console.log(arr4); // []
要素を逆順にする(reverse)
const arr = ["Bbb", "Ccc", "Aaa"];
arr.reverse();
console.log(arr); //['Aaa', 'Ccc', 'Bbb']
reverseは、逆順にします。降順ではありません。
要素を昇順にソート(sort)
const arr = ["Bbb", "Ccc", "Aaa"];
arr.sort();
console.log(arr); //['Aaa', 'Bbb', 'Ccc']
sortは、昇順にソートします。
関連の記事