JavaScriptの勉強06【配列と配列メソッド】

前回までで文字列について学びました。

前回の記事 micche-labo.hatenablog.com

今回は配列について勉強していきます。

はじめに

このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！
玄人の方はどうぞ温かい目で見守っていてください。

なにか間違い・助言あれば、ご教授おねがいします。

勉強方法：Chromeのデベロッパーツールでコンソールを開いて実行。

配列とは

リストのこと。ここから項目を参照できるので、ひとつづつ変数を定義して関数を実行したりするよりも便利で効率的、ということらしい。

配列の作り方

['項目','項目',…'項目'];といったように[]内に''でくくった文字を,でくぎって指定する。

配列は

文字列の配列
数値の配列
文字列と数値が混ざった配列

の3パターンの他、さらに

配列の中に配列

といったこともできる。

文字列の配列

文字だけでリストを作る。

//変数定義
let fruits = ['いちご', 'りんご', 'バナナ','スイカ'];
//実行
fruits;
//実行結果
 ['いちご', 'りんご', 'バナナ', 'スイカ']

数値の配列

数値の配列は数字を''でくくらない。

let myNumber = [0, 7, 10, 28, 33, 59, 100];
myNumber;
[0, 7, 10, 28, 33, 59, 100]

文字列と数値が混ざった配列

文字列・数値を混ぜることもできる。

let random = ['買い物',4,70,130];
random;
['買い物', 4, 70,130)]

配列の中に配列を作る

配列の中に別の配列を含む場合は、[]でくくる。

let listInList = ['じゃがいも',10,[1,12,30]]
listInList;
 ['じゃがいも', 10, Array(3)]

配列にアクセスする

ここからは配列の中身にいろいろとアクセスする方法。

配列の項目の取り出し方

配列の中身を取り出すには、変数名[数字]で取り出せる。
さきほどのフルーツリストを例に取り出してみると…

//数字[0]を指定
fruits[0];
//実行結果
'いちご'

//数字を変える
fruits[3];
//実行結果
'スイカ'

のように取り出せる。
※0番目=初めの項目

配列の項目に新しい値を代入

先ほどの配列の最初の項目をキウイに変更してみます。

//代入
fruits[0]='キウイ';
//実行
fruits;
//実行結果
['キウイ', 'りんご', 'バナナ', 'スイカ']

「いちご」が「キウイ」に変更された。

配列の中の配列にアクセスする

配列の中の配列（=多次元配列）を取り出すには、変数名[数値][数値]で指定する。
先ほどの配列、listInListを例にすると、

listInList[2][0];
1

となる。

はじめの[2]で配列内の「[1,12,30]」を参照し、次の[0]で配列の中の配列にある初めの項目の1を参照している。

Point
多次元配列の30を取り出したければlistInList[2][2]とする。

配列の長さを調べる

.lengthをつけることで調べられる。 数値のリストmyNumberを例にとると、

myNumber.length;
7

のように、数値の長さは7であることがわかる。（つまり７個の数字がリストの中にあるよ〜〜ってこと）

Point
文字列の時に使ったlengthでは実際の文字の長さを表していたが、配列に使用すると、配列内の項目の数を返してくれる。

文字列の時の例

let blogTitle = 'みっちぇのWebデザイン研究所';
blogTitle.length;
//結果
15

配列でのlengthの使われ方

配列でのlengthは、主にループ処理するときに使われることが多いとのこと。

//配列を作る
let myNumber = [0, 7, 10, 28, 33, 59, 100];
//for文でループ処理
for (let i = 0; i < myNumber.length; i++) {
  console.log(myNumber[i]);
}

//コンソールでの実行結果
0
7
10
28
33
59
100

0番目からスタートし、myNumber.length（＝7）番目まできたら終了する、という処理。

1. <はより小さいを意味する。
2. iは7より小さい番号すなわち6で終了する。
3. 0が最初項目なので、6で終了というのは0,1,2,3,4,5,6ということになる。
4. 6の場所にある項目は100であるので、100でループが終了する。

それぞれの配列の数値と対応する番号

※i++でi+1のこと。
micche-labo.hatenablog.com

for文についてはMDN参照 developer.mozilla.org

配列メソッド

前回記事にした文字列でも便利なメソッドをいろいろと学びましたが、配列にも便利なメソッドがある。

前回の記事
micche-labo.hatenablog.com

文字列の分割

以下のような文字列があったとする。

let myData = '犬,猫,うさぎ,ハムスター,鳥,魚';

※これは配列ではなく、ただの文字列である。

この文をコンソールに表示すると、

myData
'犬,猫,うさぎ,ハムスター,鳥,魚'

となる。

これを,で分割し、配列にしてみる。
分割するには、splitメソッドを使用する。（これは文字列メソッドらしい）

let myDataList = myData.split(',');
myDataList
['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚']

このように、新しい変数myDataListでは、,を目印に分割した配列が完成した。

区切り文字が,じゃない場合

もし区切り文字が,ではなく:だった場合はというと

let myData = '犬:猫:うさぎ:ハムスター:鳥:魚';
let myDataList = myData.split(':');
myDataList
 ['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚']

のように、splitのあとの()内で区切り文字に指定したい文字を指定することで、変更できる。

配列の長さを確認し、対応する数の項目を確認

さきほどmyDataListの長さをlengthで確認。

myDataList.length;
6

配列の長さは6であることがわかった。

ではこの配列の3にある項目は？？

[数]で調べる。

myDataList[3];
'ハムスター'

ハムスターであることがわかった。

※[0]が初めの項目犬になる。

最後の項目が知りたい時

配列の変数[配列の変数.length-1];でわかる。

myDataList[myDataList.length-1];
'魚'

最後の項目は魚であることがわかった。

配列から文字列に変換する

今までやってきたことは、「文字列を配列に変換する」ことであった。

今度はその逆。
「配列を文字列に変換する」には、join()メソッドを使用する。

let myNewString = myDataList.join(',');
myNewString;
//結果
'犬,猫,うさぎ,ハムスター,鳥,魚'

()内には好きな区切り文字を指定できるので、:で区切りたい場合は

let myString = myDataList.join(':');
myString;
//結果
'犬:猫:うさぎ:ハムスター:鳥:魚'

とすることで、区切り文字を好きな文字に指定できる。

▼join(と)や、join(&)、join(|)を試してみた結果。

なんでも区切り文字に指定できるjoinメソッド。

配列から文字列に変換するその2

配列から文字列に変換する方法にはもう一つある。

toString()メソッドを使用する方法だ。

しかしこれは区切り文字を指定できないため、常に区切り文字は,となる。

let shoppingList = ['にんじん','きゃべつ','玉ねぎ','じゃがいも'];
shoppingList.toString();
//結果
'にんじん,きゃべつ,玉ねぎ,じゃがいも'

区切り文字に他の文字を指定した場合

例えばtoString('と');にしてみた場合。

let shoppingList = ['にんじん','きゃべつ','玉ねぎ','じゃがいも'];
shoppingList.toString('と');
//結果
'にんじん,きゃべつ,玉ねぎ,じゃがいも'

結果は,で区切られており、指定した文字は無視されている。

ここがjoin()メソッドとの違いである。

項目の追加

項目は追加・削除もできる。
まずは最後尾に追加するやりかた。

最後尾に項目を追加する

push()で追加できる。

let myDataList = ['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚'];
myDataList.push('モルモット');
//結果
7

追加した後の配列の長さ（length）が返される。

配列の中身を確認するにはもう一度呼び出せばOK。

myDataList
['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚', 'モルモット']

配列最後にモルモットという項目が追加された。

ちなみに追加項目はいくつでもOK。

myDataList.push('メダカ','亀','トカゲ');
myDataList;
//結果
['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚', 'モルモット', 'メダカ', '亀', 'トカゲ']

最後尾に'メダカ','亀','トカゲ'の3項目追加されたのがわかる。

最後尾の項目を削除する

pop()メソッドで最後尾の項目を削除可能。

myDataList.pop();
myDataList;
//結果
['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚', 'モルモット', 'メダカ', '亀']

ちなみに()内に項目の内容をいれても無視され、常に最後尾の項目が削除される。

先頭に項目を追加する

unshift()メソッドで先頭に項目を追加できる。

myDataList.unshift('モルモット');
//結果
7
//再度呼び出し
myDataList
//結果
['モルモット', '犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚']

先頭に'モルモット'が追加された。

先頭の項目を削除する

削除するにはshift()メソッドを使用する。

myDataList.shift(); 
//結果
'モルモット'
//再度呼び出し
myDataList
//結果
['犬', '猫', 'うさぎ', 'ハムスター', '鳥', '魚']

先頭の'モルモット'が削除された。

指定した項目を削除

indexOf()とsplice()（slice()ではない！！！）を使用する。

indexOfについて
micche-labo.hatenablog.com

let animals = ['犬','猫','うさぎ'];
let cat = animals.indexOf('猫');
cat
//結果
1

//新しい変数に削除する項目を格納
let removedItem = animals.splice(cat, 1) // 要素を削除
removedItem
//結果
['猫']

//配列を再度確認
animals
//結果
['犬', 'うさぎ']

1. 配列を作る
2. indexOf()メソッドで配列内の項目を指定
3. 数値が返される
4. removedItemという変数に削除する要素を格納
   1. splice()メソッド を使用する
   2. 配列の変数.splice(変数,1)で削除する項目を指定
5. removedItemで確認すると、削除した項目が返される
6. animalsで配列を確認すると、「猫」が削除されたことがわかる。

実験

indexOfで指定しなかった場合。

let animals = ['犬','猫','うさぎ'];
let removedAnimal = animals.splice(animals, 2);
undefined
animals
['うさぎ']

2行目のanimals.splice(animals, 2);で、'犬'と'猫'の2項目が消えてしまった。
つまり、splice()内に提示した数字では、好きな項目を消すことはできないようである。

実験その２

indexOfは引き続き使わず、splice()にlengthを入れてみる。

let animals = ['犬','猫','うさぎ'];
let removedAnimal = animals.splice(animals.length-2, 1);
animals
//結果
['犬', 'うさぎ']

こっちはうまく作動して、真ん中の項目が消えた。
ただしこのやりかたは項目数が多いと効率的ではないし、間違いも起こるし、なんかプログラミングしている意味がないように感じる。

ので、やっぱりindexOfで指定した項目を探し出してから、削除するのが現実的であると思う。

実験その3

splice()の挙動が知りたかったので実験。
(変数,数字)以外に、(数字,数字)だとどうなる？

let animals = ['犬','猫','うさぎ'];
let removedItem = animals.splice(1, 2)

結果

//配列呼び出し
animals
//結果
['犬']

配列内の「猫」「うさぎ」が消え、0番目の「犬」のみが残った。

spliceの中身は変数でも数字でもいいらしい。

じゃあspliceの中身は何を指示しているのか？次。

指定した複数の項目を削除

splice()は、最初の数字で項目内の何番目を指定し、二つ目の数字でその数字から数えて何番目の項目までかを指定している。

//配列を作る
let shoppingList = ['にんじん','きゃべつ','玉ねぎ','じゃがいも','ねぎ','なす'];
//配列内の2の要素から数えて3つ項目を消す
let removedItem = shoppingList.splice(2,3);

//再度配列を表示
shoppingList
//結果
['にんじん', 'きゃべつ', 'なす']

項目は0番目からはじまるので、splice(2,3);はの2は'玉ねぎ'を指定したことになる。
そして、3は'玉ねぎ'、'じゃがいも'、 'ねぎ'の3項目を指定したことになる。

よって、配列から3項目削除され、残った'にんじん'、'きゃべつ'、'なす'の項目が表示された。

まとめ

• 配列は[]でくくる。
• lengthで長さを確認できる。
• 配列から文字列、文字列から配列への変換は簡単。
  • split()で文字列から配列へ。
    中身はなんでもOK、''で文字を指定する。
  • join()で配列から文字列へ。
    中身はなんでもOK、''で文字を指定する。
  • toString()でも文字列へ変換可能。 この場合は区切り文字は指定できない。
• 配列内を参照できる。
  • indexOf()とsplice()を組み合わせる。
• 削除・追加もできる。
  • push()で最後尾に追加。
  • unshift()で先頭に追加。
  • pop()で最後尾を削除。
  • shift()で先頭を削除。
• 複数項目を削除もできる。
  • splice()で複数項目を削除可能。

今日もメソッドがてんこもりであった。
似たような名前のメソッドもあり、間違えそうになるが、引き続き勉強に勤しもうと思う。