programming

Tech 夫

【Javascript】Array（配列）の使い方をまとめました

「ロナえる」の夫です。

JavascriptのArrayでは、要素の追加、削除、ソートなど色々な処理をすることができます。

今回は、その処理をまとめてみました。

全てではないですが、大部分を網羅しています。

いざ調べてみると本当に色々できるので感動です。

Arrayとは？

Arrayとは配列を扱うためのオブジェクトです。

例えば、次のように複数の要素を１つの変数で扱うことができます。


const array = [0, 2, 4, 6]
output = array[1] //output = 2

詳しくは多くのサイトで紹介されていると思うので、配列としての詳しい話はここでは割愛をします。

配列のサイズを確認

length：配列のサイズを確認

ArrayのPublicなメンバーであるlengthを利用することで、

「配列の大きさを確認すること」

ができます。


let array = [0, 2, 4, 6]
const length = array.length // length = 4

要素の追加

要素の追加は、メソッドを使わなくても配列のインデックスを直接指定してでもできます。

push：配列の末尾に要素を追加

pushメソッドを利用することで、

「配列の末尾に新たに要素を追加すること」

ができます。


let array = [0, 2, 4, 6]
const length = array.push(8) //array = [0, 2, 4, 6, 8], length = 5

戻り値としては、要素が追加された後の配列のサイズを返します。

また、追加できる要素は１つずつではなく、一度に複数個の要素を追加することができます。


let array = [0, 2, 4, 6]
const length = array.push(8, 10, 12) //array = [0, 2, 4, 6, 8, 10, 12], length = 7

unshift：配列の先頭に要素を追加

unshiftメソッドを利用することで、

「配列の先頭に新たに要素を追加すること」

ができます。

このメソッドはpushと同様に戻り値として、要素の配列のサイズを返します。

また、複数要素を同時に追加することも可能です。


let array = [0, 2, 4, 6]
let length = array.unshift(-2) //array = [-2, 0, 2, 4, 6], length = 5
length = array.unshift(-6, -4) //array = [-6, -4, -2, 0, 2, 4, 6], length = 7

splice：配列途中に要素を追加

spliceメソッドを利用することで、

「配列の途中に新たに要素を追加すること」

ができます。

ただし、pushやunshiftと違い、戻り値としては配列のサイズが返ってきません。

この辺は後ほど紹介するspliceの削除・置換を参照ください。

引数はsplice(start, num, 値1, 値2, ...)となります。

  • start：要素を追加する配列の位置（インデックス）
  • num：削除する要素数。spliceには削除や置換機能もあり、この引数はそのような場合に利用します。ただ、要素を追加したい場合は0を指定してください。
  • 値1, 値2...：追加したい値。複数あれば、,で区切って列挙する。

let array = [0, 2, 4, 6]
let array2 = array.splice(1, 0, -6, -4, -2) //array = [-6, -4, -2, 0, 2, 4, 6], array2 = []

また、spliceメソッドの削除や置換に関してはこちら。

配列にインデックスを直接指定して要素を追加

Javascriptの配列は、

「インデックスを直接指定して値を追加すること」

もできます。


let array = [0, 2, 4, 6]
array[4] = 8 //array = [0, 2, 4, 6, 8]

この場合注意しないといけないのは、配列の（最後のインデックス＋１）より大きいインデックスを指定した場合、未定の要素が現れるので、その要素はundefinedになります。


let array = [0, 2, 4, 6]
array[6] = 8 //array = [0, 2, 4, 6, undefined, undefined, 8]

要素の取得・削除

要素の取得する方法では大きく分けて２つの挙動があります。

  • 要素の取得のみ
  • 要素を取得しつつ、その要素を配列から削除する

間違って利用すると、大惨事になるので気をつけましょう。

pop：末尾要素の取得・削除

popメソッドを利用することで、

「配列の末尾要素の取得・削除すること」

ができます。


let array = [0, 2, 4, 6]
let element = array.pop() //array = [0, 2, 4], element = 6
element = array.pop() // array = [0, 2], element = 4

arrayが空配列（[]）だった場合は、pop()はundefinedを返します。

shift：先頭要素の取得・削除

shiftメソッドを利用することで、

「配列の先頭要素の取得・削除すること」

ができます。


let array = [0, 2, 4, 6]
let element = array.shift() //array = [2, 4, 6], element = 0
element = array.pop() // array = [4, 6], element = 2

arrayが空配列（[]）だった場合は、shift()はundefinedを返します。

splice：「配列の途中要素を削除」および「削除した要素の取得」

spliceメソッドを利用することで、

「配列の途中要素を削除すること、さらに削除した要素を取得すること」

ができます。

今回２回目の登場ですね。

置換もできるのですが、正確には削除と追加を順番に実行しています。

spliceの戻り値は、「削除した要素」です。

引数はsplice(start, num, 値1, 値2, ...)となります。

  • start：要素をする配列の位置（インデックス）
  • num：削除する要素の個数
  • 値1, 値2...：削除個数と組み合わせると値を置換することができます。削除個数以上を指定すると、溢れた分は単純に追加されます。

let array = [0, 2, 4, 6]
//削除
let array2 = array.splice(0, 1) //array = [2, 4, 6], array2 = [0]

//置換
let array2 = array.splice(0, 2, 8, 10) //array = [8, 10, 4, 6], array2 = [0, 2]
let array2 = array.splice(0, 2, 8, 10, 12) //array = [8, 10, 12, 4], array2 = [0, 2]

また、開始位置にマイナスを指定すると、配列末尾からの位置となります。

例えば、上のarrayの場合、array.splice(-1, 1)と指定すると、末尾から１つ目の６が取り除かれます。

さらに、splice(開始位置)といった具合で、１つだけ引数を指定すると、開始位置以降の要素が取り除かれます。

slice：配列の途中要素を取得

sliceメソッドを利用することで、

「配列の途中要素を取得すること」

ができます。

spliceと似たメソッドですが、

  • 引数が開始位置と終了位置
  • 元の配列には変更がない

という点で異なります。

引数は、slice( start, end )となります。

配列のstart位置から(end - 1)位置までの要素を新たな配列として返します。

また、startだけ指定した場合は、start位置以降の要素が全て取得できる。

要素の範囲はendまでではなく、その１つ前の(end - 1)なので注意が必要


let array = [0, 2, 4, 6]
let array2 = array.slice(1, 3) //array = [0, 2, 4, 6], array2 = [2, 4]
array2 = array.slice(2) //array = [0, 2, 4, 6], array2 = [4, 6]

要素の並び替え

sort：配列の中身をソートする

sortメソッドを利用することで、

「その名の通り配列の中身をソートすること」

ができます。

ソートした結果は元の配列には反映されず、戻り値として返されます。


let array = [2, 1, 0, 3]
let array2 = array.sort() //array = [2, 1, 0, 3], array2 = [0, 1, 2, 3]

let array3 = ["d", "a", "c", "b"]
let array4 = array3.sort() //array3 = ["d", "a", "c", "b"], array4 = ["a", "b", "c", "d"]

reverse：配列を逆順に並び替え

reverseメソッドを利用することで、

「配列を逆順に並べ替えること」

ができます。

sortと同様に元の配列には影響がなく、新しい配列として返されます。


let array = [0, 2, 4, 6]
let array2 = array.reverse() //array = [0, 2, 4, 6], array2 = [6, 4, 2, 0]

番外編：sortを利用して逆ソート

sortとreverseを組み合わせれば、小さい順だけでなく大きい順に並べることができます。

この大きい順に並べるのをsortだけでも実現することができます。

sortには実は引数があり、sort( func )といった形で関数を一つ指定することができます。

  • func: 引数は２つの要素a,bを指定します。
  • func(a,b)<0の時：aをbより小さいインデックスにソート（つまりaが前）
  • func(a,b)==0の時：変化なし
  • func(a,b)>0の時：bをaより小さいインデックスにソート（つまりbが前）

つまり、a>bとなるようにfuncを定義してあげると、逆順にソートすることができます。


const func = (a, b) => {
 return a - b;
};
let array = [2, 1, 0, 3]
let array2 = array.sort(func) //array = [2, 1, 0, 3], array2 = [3, 2, 1, 0]

文字列処理

toString：配列要素を文字列に変換

toStringメソッドを利用することで、

「配列の要素を文字列に変換すること」

ができます。

戻り値として、要素が結合された文字列が返されます。

要素間は,で区切られます。


let array = [0, "a", 1.1, true, undefined, "b"]
const s = array.toString() //s = "0,a,1.1,true,,b"

join：配列の要素の結合

joinメソッドを利用することで、

「配列の要素を結合すること」

ができます。

結合された結果は、戻り値として取得できます。

引数は、join( separator )となります。

  • separator：結合された時の要素間に差し込まれる文字

separatorに何もしない場合はデフォルトで,が挿入されます。

これだけだと、toStringと同じですね。

undefinedやnullがあると空文字となります。


let array = [0, "a", 1.1, true, undefined, "b"]
const s = array.join() //s = "0,a,1.1,true,,b"
const s1 = array.join("") //s1 = "0a1.1trueb"
const s2 = array.join(" - ") //s2 = "0 - a - 1.1 - true -  - b"

検索

includes：要素の有無を判定

includesメソッドを利用することで、

「配列内で特定の要素の有無を判定すること」

ができます。

引数に判別したい要素を指定して、含まれていればtrue、そうでなければfalseを返します。


let array = [0, "a", 1.1, true, undefined, "b"]
let f = array.includes(0) //f = true
f = array.join("b") //f = true
f = array.join(undefined) //f = true
f = array.join("aa") //f = false

find：特定の条件の要素を１つ検索

findメソッドを利用することで、

「配列内の特定の条件を満たす要素を１つ検索すること」

ができます。

引数には、find(func)といった形で特定の条件を判定する関数を入力します。

  • func( value )：引数にvalueをとり、valueは配列の各々の要素。funcがtrueであれば条件を満たしたこととなります。
  • func( value, index, array)：引数にはvalueの配列のインデックスindexと元の配列arrayの指定もできます。

最初に条件を満たした要素を１つだけ返します。


let array = [2, 1, 0, 3]

// ex1: 1より大きい要素を検索
const func = (value) => {
 return value < 2;
};
let val = array.find(func) //val = 1

// ex2: 1つ隣の要素より小さい要素を検索
const func2 = (value, index, array) => {
 if( index != array.length ) {
  return  value < array[i + 1] ;
 }else {
  return false;
};

let = array.find(func2) //val = 0

特定の条件を満たす複数の要素を検索して取得したい場合は、filterを使います。

filter：：特定の条件の要素を複数検索

filterメソッドを利用することで、

「配列内の特定の条件を満たす要素を複数検索すること」

ができます。

引数はfindと同じですが、filterは指定した条件を満たす複数要素を配列として返します。


let array = [2, 1, 0, 3]

// ex1: 1より大きい要素を検索
const func = (value) => {
 return value < 2;
};
let array = array.filter(func) //val = [1, 0]

// ex2: 1つ隣の要素より大きい要素を検索
const func2 = (value, index, array) => {
 if( index != array.length ) {
  return  value > array[i + 1] ;
 }else {
  return false;
};

const val = array.filter(func) //val = [2, 1, 3]

findIndex：特定の条件の要素のインデックスを１つ検索

findIndexは「インデックスの取得」で記述したこちらを参照ください。

インデックスの取得

indexOf：指定した要素（文字列や数字など）のインデックスを取得

indexOfメソッドを利用することで、

「配列から指定した要素（文字列や数字など）のインデックスを取得すること」

ができます。

引数は、indexOf( val, start )となります。

  • val：インデックスを取得したい要素
  • start：検索を開始する位置。配列の長さ以上の値を指定すると検索はされない。

もし配列に指定した要素が含まれなかった場合は-1が返されます。

指定した要素が配列に複数含まれる場合、最初に見つかった要素のインデックスを返します。


let array = [0, "a", 1.1, true, undefined, "b", "a"]
let idx = array.indexOf(0) //val = 0
idx = array.indexOf("a") //idx = 1
idx = array.indexOf("c") //idx = -1
idx = array.indexOf(0, 1) //idx = -1
idx = array.indexOf(0, 10) //idx = -1

lastIndexOf：指定した要素（文字列や数字など）のインデックスを取得

lastIndexOfメソッドを利用することで、

「配列から指定した要素（文字列や数字など）のインデックスを取得すること」

ができます。

indexOfとほぼ同じ挙動ですが、lastIndexOfは配列の末尾から反対方向に検索をしていきます。

こちらも同様に指定した要素が複数あっても、最初に見つけた要素のインデックスを返します。


let array = [0, "a", 1.1, true, undefined, "b", "a"]
let idx = array.indexOf(0) //val = 0
idx = array.indexOf("a") //idx = 6
idx = array.indexOf("c") //idx = -1
idx = array.indexOf(0, 1) //idx = 0
idx = array.indexOf(0, 10) //idx = -1

findIndex：特定の条件を満たす要素のインデックスを取得

findIndexメソッドを利用することで、

「特定の条件を満たす要素のインデックスを１つ取得すること」

ができます。

引数はfindと同様に、findIndex(func)といった形で特定の条件を判定する関数を入力します。

findと異なるのは、findでは条件を満たす要素を取得てきたのに対して、findIndexでは条件を満たす要素のインデックスを取得できます。

  • func( value )：引数にvalueをとり、valueは配列の各々の要素。funcがtrueであれば条件を満たしたこととなります。
  • func( value, index, array)：引数にはvalueの配列のインデックスindexと元の配列arrayの指定もできます。

let array = [2, 1, 0, 3]

// ex1: 1より大きい要素を検索
const func = (value) => {
 return value < 2;
};
let idx = array.findIndex(func) //idx = 1

// ex2: 1つ隣の要素より小さい要素を検索
const func2 = (value, index, array) => {
 if( index != array.length ) {
  return  value < array[i + 1] ;
 }else {
  return false;
};

idx = array.findIndex(func2) //idx = 2

一括処理

forEach：配列の各要素に対して特定の処理を実施

foreEachメソッドを利用することで、

「配列の各要素に対して特定の処理を実施すること」

ができます。

引数は、forEach(func)といった形で処理内容を記述した関数を入力します。

  • func( value )：引数にvalueをとり、valueは配列の各々の要素。funcには実行したい処理を記述します。
  • func( value, index, array)：引数にはvalueの配列のインデックスindexと元の配列arrayの指定もできます。

また、戻り値はundefinedです。

空の要素の場合は何もしない。　ex) ["a", "b", ,"d"]のようなbとdの間にある要素では何も実行されない。


// ex1: 各要素を表示
let array = ["a", 1, "b",, true];
let i = 0;
const func = (value) => {
 console.log(value);
 i++;
};
array.foreEach(func);
//コンソール上に各要素が表示される
// expected output: "a"
// expected output: 1
// expected output: "b"
// expected output: true
console.log(i);
// expected output: 4

// ex2: 要素の値をインデックス値に元の配列を変更する
let array2 = ["a", 1, "b", true];
const func2 = (value, index, array) => {
 array[index] = index;
};

array2.foreEach(func2); // array2 = [0, 1, 2, 3] 元の配列の書き換えも可能

forEachは例外以外で中断することができないので、中断したい場合は他の方法を取る必要があります。例えば、forループ。

reduce：配列の各要素で直前の処理結果を利用しつつ逐次処理

reduceメソッドを利用することで、

「グローバル変数を利用して、for文で直前のループの結果を引き回すようなこと」

ができます。

例えば、次のように合計を計算するケースをreduceでは簡潔に記述することができます。


let array = [0, 2, 4, 6];
let sum = 0; 
for (let i = 0; i < array.length; i++) {
  sum += array[i];
}

// sum = 12 (0+2+4+6)

reduceでは、例えばsumのような合計値を戻り値として取得することができます。

引数は、reduce(func)or reduce(func, initialValue)といった形で処理内容を記述した関数を入力します。

  • func( value )：引数にvalueをとり、valueは配列の各々の要素。funcには実行したい処理を記述します。
  • func( value, index, array)：引数にはvalueの配列のインデックスindexと元の配列arrayの指定もできます。
  • initialValue：初期値。指定がなければ、配列の１つ目の要素が初期値になる。指定がない場合は、１つ目の要素ではfuncの処理は実行されない。

空の要素の場合は何もしない。　ex) ["a", "b", ,"d"]のようなbとdの間にある要素では何も実行されない。


// ex1: 各要素を合算
var array = [0, 1, 2,, 3];
var i = 0;
const func = (preVal, val) => {
 i++;
 return preVal + val;
};
const sum = array.reduce(func);  // sum = 6
console.log(i);
// expected output: 3
// 初期値がない場合は、１つの目の値が初期値となり、中の処理は実行されない。


// ex2: 初期値を指定して合算
i = 0;
const func = (preVal, val) => {
 i++;
 return preVal + val;
};
const sum = array.reduce(func, 1);  // sum = 7
console.log(i);
// expected output: 4


// ex3: 1つ隣の要素より小さい要素を検索
let array2 = ["a", 1, "b", true];
const func2 = (value, index, array) => {
 array[index] = index;
};

array2. reduce(func2); // array2 = [0, 1, 2, 3] 元の配列の書き換えも可能

fill：配列の初期化（一斉に値変更）

fillメソッドを利用することで、

「簡単に配列の初期化をすること」

ができます。

正確には一斉には配列の値を変更することができ、その開始位置/終了位置を指定することができます。

引数は、fill(val, start, end)となっています。

また、元の配列には変更がなく、変更後の配列が戻り値として取得されます。

  • val：変更後の値
  • start：開始位置。指定しなければ全ての要素。
  • end：終了位置。正確には(end - 1)の値までが変更される。指定しなければ末尾要素まで。

const array = [0, 1, 2, 3]
const array2 = array.fill(0) // array = [0, 1, 2, 3], array2 = [0, 0, 0, 0]
const array3 = array.fill(0, 2) //array = [0, 1, 2, 3], array3 = [0, 1, 0, 0]
const array4 = array.fill(0, 2, 3) //array = [0, 1, 2, 3], array4 = [0, 1, 0, 3]

-Tech, 夫
-, , , ,