【JavaScript】配列操作
生成
配列（Arrayオブジェクト）は以下のようにして生成することができます。
//結果は全て同じ
const ary1 = [1, 2, 3]
const ary2 = new Array(1, 2, 3)
const ary3 = Array(1, 2, 3)ただし、Arrayは引数が数値 1 つの場合、その数の領域確保が行われます。
const ary1 = [10] //10を要素にもつ配列
const ary2 = Array(10) //10個の空の要素を持つ配列参照
const ary = [1, 2, 3]
ary[1] //2
ary[4] //undefined
ary.length //3配列の要素を参照するには、以下のようにインデックスを指定します。
範囲外のインデックスを指定した場合は、undefinedが返されます。
またlengthプロパティにより要素数を取得することができます。
取得
pop
const ary = [1, 2, 3]
const x = ary.pop() //3
console.log(ary) //[1, 2]popは末尾の要素を取得します。取得した要素は配列から削除されます。
shift
const ary = [1, 2, 3]
const x = ary.shift() //1
console.log(ary) //[2, 3]shiftは先頭の要素を取得します。取得した要素は配列から削除されます。
追加
push
const ary = [1, 2, 3]
ary.push(4) //[1, 2, 3, 4]
ary.push(5, 6) //[1, 2, 3, 4, 5, 6]pushは配列の末尾に要素を追加します。
複数要素指定することができ、戻り値として要素数を返します。
unshift
const ary = [1, 2, 3]
ary.unshift(4) //[4, 1, 2, 3]
ary.unshift(5, 6) //[5, 6, 4, 1, 2, 3]unshiftは配列の先頭に要素を追加します。
複数要素指定することができ、戻り値として要素数を返します。
splice
const ary = [1, 2, 3]
ary.splice(1, 0, 4) //1の位置に4を追加 [1, 4, 2, 3]spliceは指定した位置に要素を追加します。
追加する場合、第二引数は必ず0を指定します。
spliceは後の説明でも使用するため、ここでの説明は割愛します。
結合
push
const ary1 = [1, 2, 3]
const ary2 = [4, 5, 6]
ary1.push(...ary2)
console.log(ary1) //[1, 2, 3, 4, 5, 6]
console.log(ary2) //[1, 2, 3]2 つの配列を結合するには、以下のようにpushとスプレッド構文（...）を組み合わせます。
concat
const ary1 = [1, 2, 3]
const ary2 = [4, 5, 6]
const ary3 = ary1.concat(ary2)
console.log(ary1) //[1, 2, 3]
console.log(ary2) //[4, 5, 6]
console.log(ary3) //[1, 2, 3, 4, 5, 6]concatも同じく 2 つの配列を結合することができます。
pushはメソッドの呼び出し元の配列に直接要素を追加して結合します。
一方concatは、結合した結果を戻り値として返します。そのため呼び出し元の配列に影響を与えません。
抽出
slice
const ary = [1, 2, 3, 4, 5]
ary.slice(1, 3) //[2, 3]
ary.slice(2) //[3, 4, 5]sliceは、第一引数の数値〜第二引数の数値 - 1 のインデックスの要素を抽出し、その結果を戻り値として返します。
第一引数のみの場合は、その数値以降のインデックスの要素を抽出します。
filter
const ary = [1, 2, 3, 4, 5]
ary.filter((e) => e > 3) //[4, 5]
ary.filter((e) => e % 2 === 1) //[1, 3, 5]filterは、指定した条件を満たす要素を抽出し、その結果を戻り値として返します。
条件の指定にはアロー関数を用います。イメージとして、要素 1 つ 1 つに対してアロー関数の処理が順に実行され、trueを返す要素のみが抽出されます。
検索
includes
const ary = [1, 2, 3, 4, 5]
ary.includes(2) //true
ary.includes(2, 3) //falseincludesは、第一引数で指定した値が配列に含まれるかを検索し、その結果を真偽値で返します。
第二引数には検索を開始する要素のインデックスで、デフォルトは0になります。
indexOf, lastIndexOf
const ary = [1, 2, 3, 1, 4, 5]
ary.indexOf(3) //2
ary.indexOf(6) //-1
ary.indexOf(3, 3) //-1
ary.lastIndexOf(1) //3indexOfは、第一引数で指定した値を先頭から検索し、最初に見つかった要素のインデックスを返します。
見つからなかった場合は-1を返します。
第二引数には検索を開始する要素のインデックスで、デフォルトは0になります。
lastIndexOfもindexOfと同じですが、検索方向が末尾からになる点が異なります。
findIndex
const ary = [1, 2, 3, 4, 5]
ary.findIndex((e) => e > 3) //3
ary.findIndex((e) => e < 0) //-1findIndexは、指定した条件を満たす要素を検索し、最初に見つかったもののインデックスを返します。
見つからなかった場合は-1を返します。
条件の指定にはfilterと同じくアロー関数を用います。
find
const ary = [1, 2, 3, 4, 5]
ary.find((e) => e > 3) //4
ary.find((e) => e < 0) //undefinedfindは、findIndexと同じく指定した条件を満たす要素を検索します。
検索結果として、最初に見つかった要素そのものを返します。
対象の要素が存在しない場合はundefinedを返します。
削除
splice
const ary = [1, 2, 3, 4, 5]
const ary1 = ary.splice(1, 2)
console.log(ary) //[1, 4, 5]
console.log(ary1) //[2, 3]
const ary2 = ary.splice(0)
console.log(ary) //[]
console.log(ary2) //[1, 4, 5]spliceは要素の追加で 1 度説明しました。
実はspliceは指定したインデックスから要素の追加と削除を同時に行います。
splice(開始インデックス, 削除する要素数, 追加する要素群)追加だけの場合は、第二引数を0にすることで要素の削除が行われず、開始インデックスから要素を追加していました。
削除だけの場合は、第三引数を指定しないことで開始インデックスから指定数の要素が削除されます。 第二引数を省略した場合は、指定したインデックスからすべての要素が削除されます。
spliceの戻り値には、削除した要素群が設定されています。
編集
splice
const ary = [1, 2, 3, 4, 5]
ary.splice(2, 1, 6) //[1, 2, 6, 4, 5]
ary.splice(0, 2, 7, 8) //[7, 8, 6, 4, 5]指定インデックスの要素を変更したい場合は、spliceを使用します。
実際には前述したように削除 + 追加によって要素の置き換えをしています。
fill
const ary = [1, 2, 3, 4, 5]
ary.fill(0, 2, 4) //[1, 2, 0, 0, 5]
ary.fill(0, 2) //[1, 2, 0, 0, 0]
ary.fill(0) //[0, 0, 0, 0, 0]fillは、第一引数の数値〜第二引数の数値 - 1 のインデックスの要素を指定した値に置き換えます。
インデックスの指定は省略でき、それぞれ先頭、末尾がデフォルトになります。
fillは以下のように配列の初期値設定に使用できます。
const ary = Array(5).fill(0) //[0, 0, 0, 0, 0]reverse
const ary = [1, 2, 3, 4, 5]
ary.reverse() //[5, 4, 3, 2, 1]reverseは、要素の順序を反転します。
map
const ary = [1, 2, 3, 4, 5]
const ary1 = ary.map((e) => e * 2)
console.log(ary) //[1, 2, 3, 4, 5]
console.log(ary1) //[2, 4, 6, 8, 10]mapは、すべての要素に指定した処理を実行し、その結果を要素とした配列を返します。
処理はアロー関数で定義します。元の配列に影響はありません。
集約
join
const ary = [1, 2, 3]
ary.join(',') //"1, 2, 3"joinは、引数で指定した文字を区切り文字として要素を連結した文字列を返します。
reduce
const ary = [1, 2, 3, 4, 5]
const sum1 = ary.reduce((acc, cur) => acc + cur) //15
const sum2 = ary.reduce((acc, cur) => acc + cur, 10) //25reduceは、各要素のに対して指定した処理を行い、集約した値を返します。
アロー関数の第一引数はアキュームレーターといい、1 つ前の処理の実行結果が設定されます。
第二引数には現在の要素の値が設定されます。
第三引数、第四引数は省略可能で、それぞれ現在のインデックスと配列そのものが設定されます。
初回は先頭の要素がアキュームレーターに設定され、処理は 2 つ目の要素から実行されます。
ただし、reduceの第二引数が指定された場合は、その値がアキュームレーターに設定され、1 つ目の要素から処理が実行されます。
例のsum1の処理イメージは以下になります。
| インデックス | アキュームレーター | 現在値 | 処理結果 |
|---|---|---|---|
1 | 1 | 2 | 3 |
2 | 3 | 3 | 6 |
3 | 6 | 4 | 10 |
4 | 10 | 5 | 15 |