JS 配列の基本便利な使い方と項目の追加と削除

今回は「配列」についてご紹介させて頂きます。

配列は奥深く、様々な使い方があるのですが、ここでは基本的な使い方についてご紹介させて頂きます。

どのメソッドも学習がを進めていく上で非常に重要なものになりますので、しっかりと理解しておきましょう。

配列の基本

配列とは、通常変数は、一つの値しか持つことが出来ませんが、配列データを作成すると複数の値を持つことが出来るようになります。

基本的な使い方は、一つの値をもつ変数と同じようなものになりますが、配列はリスト内の値に個別にアクセスすることが出来たり、ループーを用いてすべての値に同じことをしたり、効率的な使い方をすることが出来ます。

let numbers = [1,2,3,4,5,6];

配列を作るには、「[]」で囲って、カンマで区切って記述します。

配列の中には、数値はもちろん、文字列、変数、別の配列などほとんどのものを格納することが出来ます。

[1,2,3,]のように最後の要素に「,」をつけた場合は無視されます。

[1 , , 3]のような場合は、カンマの間を空の要素として数えます。

let numbers = [1,2,3,4,5,6];
numbers[0] = 7;
numbers;
(6) [7, 2, 3, 4, 5, 6]

項目を変更したい場合は、「[]」で変更したい番号を指定して、新しい値を記述します。

let numbers = [1,2,3,4,5,6];
numbers.length;
6

配列の長さを数える場合は、文字列の数を数えた時と同じように、「length」プロパティを使用します。

let data = 'carrot,lettuce,potato';

let vegetables = data.split(',');
vegetables;
(3) ['carrot', 'lettuce', 'potato']

vegetables[2];
'potato'

文字列を配列にするには、「split()」メソッドを使用します。

let vegetables = ['carrot', 'lettuce', 'potato'];

let data = vegetables.join(',');
data;
'carrot,lettuce,potato'

配列を文字列にするには、「join()」メソッドを使用します。

または、「toString()」メソッドを使用することも出来ます。

let vegetables = ['carrot', 'lettuce', 'potato'];

vegetables.toString();
'carrot,lettuce,potato'

「join()」を使うメリットは、カンマ以外の他の文字を指定することが出来ることです。

let vegetables = ['carrot', 'lettuce', 'potato'];

vegetables.push('cabbege');
vegetables;
(4) ['carrot', 'lettuce', 'potato', 'cabbege']

配列の最後に項目を追加する場合は、「push()」メソッドを使用します。

複数の項目を追加する場合は、カンマでつないで記述します。

let vegetables = ['carrot', 'lettuce', 'potato'];

vegetables.unshift('cabbege');
vegetables;
(4) ['cabbege', 'carrot', 'lettuce', 'potato']

配列の先頭に追加するには、「unshift()」メソッドを使用します。

vegetables.pop();
'potato'
vegetables;
(3) ['cabbege', 'carrot', 'lettuce']

最後尾を削除するには、「pop()」メソッドを使用します。

最後尾の「potato」が削除されているのが分かると思います。

let vegetables = ['carrot', 'lettuce', 'potato','cabbege'];

vegetables.shift();
'carrot'
vegetables;
(3) ['lettuce', 'potato', 'cabbege']

先頭を削除するには、「shift()」メソッドを使用します。

先頭の「carrot」が削除されているのが分かると思います。

	意味
split()	文字列を配列にする
join()	配列を文字列にする「,」以外も指定出来る
toString()	配列を文字列にする
push()	配列の最後に項目を追加複数の項目を追加するには「,」でつなぐ
unShift()	配列の先頭に追加
pop()	最後尾の項目を削除
shift()	先頭の項目を削除

	意味
.length	文字の長さを返す
変数[]	[]に指定した特定の文字を返す
indexOf()	()内の指定した文字列が始まる数値を返す文字列がない場合は「-1」を返す
slice()	特定の文字列を返す（例）slice(5,10)：5番目から10番目までの文字列 slice(5)：5番目以降の文字列
toUpperCase()	大文字に切り替える
toLowerCase()	小文字に切り替える
replace()	文字の一部分を書き換える