JavaScript array (配列):変数のデータ型
配列（array）は複数の値を格納するためのデータ型です。配列は、0から始まるインデックスを持ち、それぞれのインデックスに対して値を格納することができます。
- 1. 作成
- 2. 要素数の取得
- 3. 要素の取得
- 4. 二次元配列
- 5. 配列メソッド
- 5.1. push():配列の末尾に1つ以上の要素を追加
- 5.2. pop():配列の末尾から要素を削除し、その要素を返す
- 5.3. unshift():配列の先頭に1つ以上の要素を追加し、更新後の配列の新しい長さを返す
- 5.4. shift():配列の先頭から1つの要素を削除し、削除された要素を返す
- 5.5. slice():指定された開始位置と終了位置の間の要素を含む、配列の一部を取得
- 5.6. splice():配列の中から要素を削除または置換し、または新しい要素を追加
- 5.7. concat():2つ以上の配列を結合し、新しい配列を作成
- 5.8. indexOf():指定された要素が最初に現れるインデックスを返す
- 5.9. lastIndexOf():指定された要素が最後に現れるインデックスを返す
- 5.10. join():配列内のすべての要素を文字列に変換して、指定された区切り文字で区切り、1つの文字列に連結
- 5.11. reverse():配列の要素の順序を逆にする
- 5.12. sort():配列の要素を並び替え
- 5.13. filter():指定された条件を満たす要素だけを抽出して、新しい配列を作成
- 5.14. map():配列の各要素に対して指定された関数を実行し、新しい配列を作成
- 5.15. reduce():配列の各要素に対して指定された関数を実行し、単一の値を返す
- 5.16. forEach():配列の各要素に対して指定された関数を実行
- 5.17. every():配列のすべての要素が指定された条件を満たしているかどうかを確認
- 5.18. some():配列のいずれかの要素が指定された条件を満たしているかどうかを確認
- 5.19. find():配列内で最初に指定された条件を満たす要素を返す
- 5.20. findIndex():配列内で最初に指定された条件を満たす要素のインデックスを返す
- 6. 関連記事
作成
配列を作成する方法はいくつかあります。
以下の例は全てfruitsという配列に、apple、banana、orangeの3つの要素を持たせています。
リテラル表記法：
let fruits = ['apple', 'banana', 'orange'];Arrayコンストラクター：
let fruits = new Array('apple', 'banana', 'orange');Arrayコンストラクターは、配列の要素数が1つであり、かつその要素が数値である場合には、配列の長さを指定するための引数と解釈されてしまうことがあるため、注意が必要です。
Array.of()メソッド：
let fruits = Array.of('apple', 'banana', 'orange');Arrayコンストラクターと異なり、引数が1つであっても、要素数を指定するための引数と解釈されません。
Array.from()メソッド：
let fruits = Array.from(['apple', 'banana', 'orange']);配列以外のイテラブルオブジェクトから配列を作成する場合に利用します。
以上のように、JavaScriptには配列を作成する方法がいくつかあります。リテラル表記法を使用することが一般的です。
空(要素0)の配列
リテラル表記法を使用する方法：
let arr = [];Arrayコンストラクターを使用する方法：
let arr = new Array();以上の2つの方法で、要素数が0の空の配列を作成することができます。リテラル表記法の方がシンプルで、一般的に使用される方法です。
要素数の取得
const arr = ['apple', 'banana', 'orange', 'grape'];
console.log(arr.length); // 4この例では、lengthプロパティを使用して、array型の要素数を取得しています。配列arrの要素数は4であるため、4がコンソールに出力されます。
要素の取得
array型変数から値を取得するには、以下のようにインデックスを指定します。
let arr = ['apple', 'banana', 'orange'];
let fruit = arr[1];
console.log(fruit); // 'banana'この例では、配列arrから2番目の要素('banana')を取得しています。arr[1]は、配列arrのインデックスが1の要素を取得することを意味します。
先頭
const arr = ['apple', 'banana', 'orange', 'grape'];
const firstElement = arr[0];
console.log(firstElement); // 'apple'この例では、配列arrのインデックス番号0番目の要素にアクセスして、先頭の要素を取得しています。取得した要素は、変数firstElementに割り当てられ、コンソールに出力されます。
末尾
const arr = ['apple', 'banana', 'orange', 'grape'];
const lastElement = arr[arr.length - 1];
console.log(lastElement); // 'grape'この例では、配列arrのインデックス番号(length - 1)番目の要素にアクセスして、末尾の要素を取得しています。取得した要素は、変数lastElementに割り当てられ、コンソールに出力されます。
全ての要素
forループ
const arr = ['apple', 'banana', 'orange', 'grape'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}この例では、arr配列の要素数を取得し、forループを使用して配列の全ての要素にアクセスしています。forループで、変数iを使用して配列arrのインデックス番号にアクセスしています。各要素は、コンソールに出力されます。
for...ofループ
const arr = ['apple', 'banana', 'orange', 'grape'];
for (const element of arr) {
console.log(element);
}この例では、for...ofループを使用して、配列の全ての要素にアクセスしています。変数elementには、各要素が順番に割り当てられ、コンソールに出力されます。
二次元配列
二次元配列は、配列の要素が別の配列で構成される配列です。これにより、行と列の形式でデータを格納することができます。二次元配列は、表や行列などのデータ構造を表現するために使用されます。
以下は、二次元配列の作成とアクセスの例です。
// 3x3の二次元配列を作成する
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 特定の要素にアクセスする
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6
console.log(matrix[2][1]); // 8この例では、3x3の二次元配列が作成されています。それぞれの要素は別の配列で構成されており、行と列の位置でアクセスすることができます。行と列は0から始まるインデックスで指定されます。例えば、matrix[0][0]は1行目の1列目の要素である1を表します。
二次元配列に要素を追加したり、要素を変更したりすることも可能です。
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 特定の要素を変更する
matrix[1][1] = 10;
// 新しい行を追加する
matrix.push([11, 12, 13]);
console.log(matrix);
この例では、二次元配列の中央の要素であるmatrix[1][1]が10に変更されます。また、matrix.push([11, 12, 13])によって新しい行が配列に追加されます。
二次元配列は、多次元のデータを効果的に表現し、行列操作やグリッドベースのアルゴリズムなどに使用されます。
配列メソッド
配列を操作するための便利なメソッドがいくつか用意されています。以下に、よく使用される配列メソッドについて説明します。
push():配列の末尾に1つ以上の要素を追加
push()メソッドは、配列の末尾に1つ以上の要素を追加します。このメソッドは、元の配列を変更し、変更後の配列の新しい長さを返します。
以下は、push()メソッドを使用した例です。
let arr = ['apple', 'banana'];
arr.push('orange');
console.log(arr); // ['apple', 'banana', 'orange']この例では、配列arrの末尾に新しい要素'orange'を追加しています。push()メソッドは元の配列arrを変更し、変更後の配列['apple', 'banana', 'orange']を返します。
push()メソッドには、1つ以上の要素を同時に追加できるオプションがあります。
let arr = ['apple', 'banana'];
arr.push('orange', 'grape');
console.log(arr); // ['apple', 'banana', 'orange', 'grape']この例では、push()メソッドを使用して、配列arrの末尾に'orange'と'grape'の2つの新しい要素を同時に追加しています。
push()メソッドは、配列の末尾に要素を追加するために頻繁に使用されます。
pop():配列の末尾から要素を削除し、その要素を返す
pop()は、配列の末尾から要素を削除し、その要素を返します。
以下は、pop()メソッドを使用して、配列から要素を削除する例です。
const arr = ['apple', 'banana', 'orange', 'grape'];
const removedElement = arr.pop();
console.log(arr); // ['apple', 'banana', 'orange']
console.log(removedElement); // 'grape'この例では、pop()メソッドを使用して、配列arrの末尾から要素を削除しています。削除された要素は、変数removedElementに割り当てられ、コンソールに出力されます。pop()メソッドを使用すると、元の配列が変更され、配列から要素が削除されます。
配列に要素がない場合、pop()メソッドはundefinedを返します。
pop()メソッドは、配列の末尾から要素を簡単に削除するための便利な方法です。ただし、配列の先頭から要素を削除する場合は、shift()メソッドを使用する必要があります
unshift():配列の先頭に1つ以上の要素を追加し、更新後の配列の新しい長さを返す
const arr = ['orange', 'grape'];
const newLength = arr.unshift('apple', 'banana');
console.log(arr); // ['apple', 'banana', 'orange', 'grape']
console.log(newLength); // 4この例では、unshift()メソッドを使用して、配列arrの先頭に要素'apple'と'banana'を追加しています。追加された要素によって配列の順序が変更され、更新後の配列の新しい長さは4になります。
shift():配列の先頭から1つの要素を削除し、削除された要素を返す
const arr = ['apple', 'banana', 'orange', 'grape'];
const shiftedElement = arr.shift();
console.log(shiftedElement); // 'apple'
console.log(arr); // ['banana', 'orange', 'grape']この例では、shift()メソッドを使用して、配列arrの先頭から要素'apple'を削除しています。削除された要素は、変数shiftedElementに割り当てられ、コンソールに出力されます。また、削除後の配列は、要素'apple'を除いた['banana', 'orange', 'grape']となります。
shift()メソッドは、更新後の配列の新しい長さではなく、削除された要素を返す点がunshift()メソッドと異なります。また、shift()メソッドは、配列の先頭から要素を1つずつ削除するため、ループ処理で配列の先頭から要素を順番に処理する場合に便利です。
slice():指定された開始位置と終了位置の間の要素を含む、配列の一部を取得
const arr = ['apple', 'banana', 'orange', 'grape'];
const slicedArr = arr.slice(1, 3);
console.log(slicedArr); // ['banana', 'orange']
console.log(arr); // ['apple', 'banana', 'orange', 'grape']この例では、slice()メソッドを使用して、arr配列のインデックス1からインデックス3未満までの要素を含む配列を取得しています。返された配列は、['banana', 'orange']であり、元の配列arrは変更されずに['apple', 'banana', 'orange', 'grape']のままです。
slice()メソッドは、開始位置と終了位置を指定することで、配列の一部を取得できます。開始位置が省略された場合は、配列の先頭から取得を開始します。また、終了位置が省略された場合は、配列の末尾まで取得します。負のインデックスを指定することもできます。負のインデックスを指定する場合、配列の末尾からの相対位置が使用されます。
配列から一部の要素を取得する場合には、slice()メソッドが便利です。配列の一部を変更せずに、取得したい要素を新しい配列として返すことができます。
splice():配列の中から要素を削除または置換し、または新しい要素を追加
const arr = ['apple', 'banana', 'orange', 'grape'];
const removedElements = arr.splice(1, 2);
console.log(removedElements); // ['banana', 'orange']
console.log(arr); // ['apple', 'grape']この例では、splice()メソッドを使用して、arr配列のインデックス1から2つの要素を削除しています。削除された要素は、変数removedElementsに割り当てられ、コンソールに出力されます。また、元の配列arrは、削除された['banana', 'orange']の要素を除いた['apple', 'grape']に変更されます。
splice()メソッドは、配列の中から要素を削除する場合や、新しい要素を挿入する場合に便利です。また、配列の中から要素を置換する場合にも使用できます。配列から要素を削除する場合、slice()メソッドと異なり、元の配列を変更する点に注意してください。
splice()メソッドは、開始位置と削除する要素数を指定することで、配列の中から要素を削除できます。また、削除された要素は、新しい配列として返されます。要素を挿入する場合は、挿入位置と新しい要素を指定する必要があります。
concat():2つ以上の配列を結合し、新しい配列を作成
const arr1 = ['apple', 'banana'];
const arr2 = ['orange', 'grape'];
const concatenatedArr = arr1.concat(arr2);
console.log(concatenatedArr); // ['apple', 'banana', 'orange', 'grape']
console.log(arr1); // ['apple', 'banana']
console.log(arr2); // ['orange', 'grape']この例では、concat()メソッドを使用して、arr1配列とarr2配列を結合しています。新しい配列concatenatedArrには、['apple', 'banana', 'orange', 'grape']が含まれ、元の配列arr1とarr2は変更されず、それぞれのままであることが確認できます。
concat()メソッドは、2つ以上の配列を結合することができます。結合される配列は引数として渡され、新しい配列が返されます。元の配列は変更されず、新しい配列に結合された要素が含まれます。
concat()メソッドは、配列の結合に便利です。異なる配列を結合して、新しい配列を作成することができます。また、複数の配列を順番に結合することもできます。
indexOf():指定された要素が最初に現れるインデックスを返す
const arr = ['apple', 'banana', 'orange', 'grape'];
const index1 = arr.indexOf('orange');
const index2 = arr.indexOf('kiwi');
console.log(index1); // 2
console.log(index2); // -1この例では、indexOf()メソッドを使用して、配列arr内の要素'orange'と'kiwi'のインデックスを検索しています。'orange'はインデックス2にあり、'kiwi'は配列内に存在しないため、-1が返されます。
indexOf()メソッドは、配列内の要素のインデックスを検索する場合に便利です。要素の存在を確認したい場合に使用できます。また、配列内の重複した要素の最初のインデックスを検索することもできます。
indexOf()メソッドは、配列の中で最初に見つかった要素のインデックスを検索するため、配列の先頭から検索を開始します。検索を逆方向に開始する場合は、lastIndexOf()メソッドを使用することができます。
lastIndexOf():指定された要素が最後に現れるインデックスを返す
const arr = ['apple', 'banana', 'orange', 'banana', 'grape'];
const index1 = arr.lastIndexOf('banana');
const index2 = arr.lastIndexOf('kiwi');
console.log(index1); // 3
console.log(index2); // -1この例では、lastIndexOf()メソッドを使用して、配列arr内の要素'banana'と'kiwi'の最後のインデックスを検索しています。'banana'は最後に現れるインデックス3にあり、'kiwi'は配列内に存在しないため、-1が返されます。
lastIndexOf()メソッドは、配列内の要素の最後のインデックスを検索する場合に便利です。要素の存在を確認したい場合に使用できます。また、配列内の重複した要素の最後のインデックスを検索することもできます。
lastIndexOf()メソッドは、配列の中で最後に見つかった要素のインデックスを検索するため、配列の末尾から検索を開始します。検索を正順に開始する場合は、indexOf()メソッドを使用することができます。
join():配列内のすべての要素を文字列に変換して、指定された区切り文字で区切り、1つの文字列に連結
const arr = ['apple', 'banana', 'orange'];
const joinedArr = arr.join(', ');
console.log(joinedArr); // 'apple, banana, orange'この例では、join()メソッドを使用して、arr配列内の要素をカンマとスペースで区切った文字列に連結しています。
join()メソッドは、配列内の要素を連結する場合に便利です。連結された文字列を使用して、配列の内容を表示することができます。
join()メソッドは、配列内の要素を文字列に変換して連結するため、配列の各要素は自動的に文字列に変換されます。配列内の要素がオブジェクトや数値などの場合は、それらが自動的に文字列に変換されます。
join()メソッドに引数を渡さない場合、デフォルトの区切り文字はカンマです。
reverse():配列の要素の順序を逆にする
const arr = ['apple', 'banana', 'orange'];
arr.reverse();
console.log(arr); // ['orange', 'banana', 'apple']この例では、reverse()メソッドを使用して、arr配列内の要素の順序を逆にしています。
reverse()メソッドは、配列の要素の順序を逆にする場合に便利です。このメソッドは、元の配列を変更するため、注意が必要です。
sort():配列の要素を並び替え
const arr = [5, 1, 4, 2, 8];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 4, 5, 8]この例では、sort()メソッドを使用して、arr配列内の数値要素を昇順に並べ替えています。この場合、sort()メソッドに比較関数を渡しています。比較関数は、引数として2つの要素を受け取り、負の整数、ゼロ、または正の整数を返す必要があります。負の整数を返す場合、第1引数は第2引数より小さいと判断されます。ゼロを返す場合、2つの要素は同じと判断されます。正の整数を返す場合、第1引数は第2引数より大きいと判断されます。
sort()メソッドは、配列の要素を並び替える場合に便利です。比較関数を使用することで、要素をカスタムルールで並び替えることができます。例えば、数値型の配列を降順に並べ替えたり、オブジェクト型の配列を特定のプロパティで並び替えたりすることができます。
filter():指定された条件を満たす要素だけを抽出して、新しい配列を作成
const arr = [1, 2, 3, 4, 5, 6];
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]この例では、filter()メソッドを使用して、arr配列内の偶数だけを抽出しています。filter()メソッドは、引数として条件を満たすかどうかを判断する関数を受け取ります。この関数は、配列内の各要素に対して実行され、条件を満たす要素だけが新しい配列に含まれます。
filter()メソッドは、配列内の要素を抽出する場合に便利です。このメソッドを使用することで、簡単に特定の条件に合致する要素だけを取得することができます。
filter()メソッドで抽出される要素は、元の配列の要素と同じ型であり、順序も保たれます。filter()メソッドは、新しい配列を作成するため、元の配列は変更されません。
map():配列の各要素に対して指定された関数を実行し、新しい配列を作成
const arr = [1, 2, 3, 4, 5];
const doubled = arr.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]この例では、map()メソッドを使用して、arr配列内の各要素を2倍にしています。map()メソッドは、引数として各要素に対して実行する関数を受け取ります。この関数は、各要素に対して実行され、新しい値が新しい配列に格納されます。
map()メソッドは、配列の各要素を変換する場合に便利です。このメソッドを使用することで、簡単に各要素を変換することができます。また、元の配列の要素数と同じ数の要素を含む新しい配列を作成するため、元の配列の要素数と同じだけの要素数を持つ新しい配列を作成できます。
map()メソッドで変換される要素は、新しい配列に含まれる要素として格納されます。元の配列の要素は変更されず、新しい配列が作成されます。
reduce():配列の各要素に対して指定された関数を実行し、単一の値を返す
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((total, num) => total + num, 0);
console.log(sum); // 15この例では、reduce()メソッドを使用して、arr配列内の合計値を求めています。reduce()メソッドは、引数として実行する関数と、初期値を受け取ります。この関数は、各要素に対して実行され、結果を次の要素とともに次の呼び出しに渡します。初期値は、最初の呼び出し時に関数の最初の引数として渡されます。
reduce()メソッドは、配列内の要素を単一の値にまとめる場合に便利です。このメソッドを使用することで、簡単に配列の合計値や平均値を求めることができます。
reduce()メソッドが返す値は、最後に実行された関数の戻り値です。
forEach():配列の各要素に対して指定された関数を実行
const arr = [1, 2, 3, 4, 5];
arr.forEach(num => console.log(num));この例では、forEach()メソッドを使用して、arr配列内の各要素をコンソールに出力しています。forEach()メソッドは、引数として実行する関数を受け取り、配列内の各要素に対して実行します。
forEach()メソッドは、配列内の要素を反復処理する場合に便利です。このメソッドを使用することで、簡単に配列内の各要素を処理することができます。また、配列内の要素を変更することができます。
forEach()メソッドは、関数の戻り値を返しません。引数として渡された関数は、単に配列内の各要素に対して実行されます。
every():配列のすべての要素が指定された条件を満たしているかどうかを確認
const arr = [2, 4, 6, 8, 10];
const allEven = arr.every(num => num % 2 === 0);
console.log(allEven); // trueこの例では、every()メソッドを使用して、arr配列内のすべての要素が偶数かどうかを確認しています。every()メソッドは、引数として実行する関数を受け取り、配列内のすべての要素に対して実行します。この関数がfalseを返した場合、every()メソッドはその時点で処理を終了し、falseを返します。すべての要素が関数からtrueを返した場合、every()メソッドはtrueを返します。
every()メソッドは、配列内のすべての要素が特定の条件を満たしているかどうかを確認する場合に便利です。このメソッドを使用することで、簡単に配列内のすべての要素が条件を満たしているかどうかを確認することができます。
every()メソッドは、配列が空の場合、常にtrueを返します。
some():配列のいずれかの要素が指定された条件を満たしているかどうかを確認
const arr = [2, 4, 6, 8, 10];
const someOverTen = arr.some(num => num >= 10);
console.log(someOverTen); // trueこの例では、some()メソッドを使用して、arr配列内のいずれかの要素が10以上かどうかを確認しています。some()メソッドは、引数として実行する関数を受け取り、配列内の要素に対して実行します。この関数がtrueを返した場合、some()メソッドはその時点で処理を終了し、trueを返します。すべての要素が関数からfalseを返した場合、some()メソッドはfalseを返します。
some()メソッドは、配列内のいずれかの要素が特定の条件を満たしているかどうかを確認する場合に便利です。このメソッドを使用することで、簡単に配列内のいずれかの要素が条件を満たしているかどうかを確認することができます。
some()メソッドは、配列が空の場合、常にfalseを返します。
find():配列内で最初に指定された条件を満たす要素を返す
const arr = [1, 3, 4, 5, 7, 8];
const firstEven = arr.find(num => num % 2 === 0);
console.log(firstEven); // 4この例では、find()メソッドを使用して、arr配列内で最初に偶数を検索しています。find()メソッドは、引数として実行する関数を受け取り、配列内の要素に対して実行します。この関数がtrueを返した場合、find()メソッドはその要素を返し、処理を終了します。すべての要素が関数からfalseを返した場合、find()メソッドはundefinedを返します。
findIndex():配列内で最初に指定された条件を満たす要素のインデックスを返す
const arr = [1, 3, 4, 5, 7, 8];
const firstEvenIndex = arr.findIndex(num => num % 2 === 0);
console.log(firstEvenIndex); // 2この例では、findIndex()メソッドを使用して、arr配列内で最初に偶数を検索しています。findIndex()メソッドは、引数として実行する関数を受け取り、配列内の要素に対して実行します。この関数がtrueを返した場合、findIndex()メソッドはその要素のインデックスを返し、処理を終了します。すべての要素が関数からfalseを返した場合、findIndex()メソッドは-1を返します。
---