最新！JavaScript入門講座ー配列操作の基本をわかりやすく解説！

配列は複数の値の集合体です。それぞれの要素にアクセスする、といったインデックスを用いた操作の他に追加、削除、置き換えるといった機能を実行するメソッドが用意されています。
メソッドを使わなくても、同じようなことはできますがコード量が一気に減るのでこちらを使ったほうが便利です。

本記事では、配列の操作の基本を初学者の方向けに解説していきます。

本記事のペルソナ

配列の操作の基礎を学びたい方
配列の要素の取得を学びたい方
配列の要素の削除を学びたい方
配列の要素の追加を学びたい方
配列の検索を学びたい方
配列のメソッドについて学びたい方

第17回配列要素取得・追加

第19回配列の繰り返し

配列の操作基本
まとめ
参考文献

配列の操作基本

配列の要素数を取得

まず最初は配列の要素数の取得についてです。
これについては、文字列でもやりましたね。基本的に文字列の長さを取得したときと同じように記述すれば大丈夫です。

let hokkaido = ["札幌","旭川","函館","釧路","苫小牧","小樽"];

console.log(hokkaido);
console.log(hokkaido.length);

$ node array.js

[ '札幌', '旭川', '函館', '釧路', '苫小牧', '小樽' ]
6

要素を追加する（push・unshift）

続いては配列に要素を追加するメソッド、pushとunshiftについて解説していきます。

let price = [423000,3300,2200,2300,120];
price.push(10000);

price.push(330,240);

for(let i = 0;i < price.length;i++){
    console.log(`株価 ${price[i]} $`);
}

$ node array.js

株価 423000 $
株価 3300 $
株価 2200 $
株価 2300 $
株価 120 $
株価 10000 $
株価 330 $
株価 240 $

pushは配列の最後から順に追加するメソッドになります。
1行ずつ表示させると、しっかりと順番に後ろから追加されていることがわかります。

let money = ["CAD","AUD","NZD","SGD"]

money.unshift("USD");

for(let i = 0;i < money.length;i++){
    console.log(`通貨 ${money[i]} ($)`);
}

$ node array.js

通貨 USD ($)
通貨 CAD ($)
通貨 AUD ($)
通貨 NZD ($)
通貨 SGD ($)

こっちは、先ほどとは逆で前から順に配列に格納していくメソッドになります。
実行すると、最初にUSDが入っているはずです。

要素を削除する（pop,shift)

続いては要素を削除するメソッドを解説していきます。

let company = ["SONY","SoftBank","楽天","任天堂","NTT"];

company.pop();
console.log(company);

$ node array.js

[ 'SONY', 'SoftBank', '楽天', '任天堂' ]

popは実行すると、配列の最後の要素を削除します。

let company = ["SONY","SoftBank","楽天","任天堂","NTT"];

company.pop();
console.log(company);

company.shift();

console.log(company);

$ node array.js

[ 'SONY', 'SoftBank', '楽天', '任天堂' ]
[ 'SoftBank', '楽天', '任天堂' ]

shiftは逆で、一番最初の要素を削除します。先ほどのコードに付け足したものですが、最初最後の要素が取り除かれるので、最後が任天堂になります。
つぎに、最初の要素が取り除かれるので、SoftBank、楽天、任天堂が残るわけですね。

配列の結合（concat）

続いては配列の結合について解説していきます。
これは文字列でも共通しているconcatを使用します。

let company = ["三菱UFJ","三井住友","みずほ","りそな","埼玉りそな"]

let netbank = ["楽天","住信SBI","あおぞら","ソニー"]

let bank = company.concat(netbank);

for(let i=0;i<bank.length;i++){
    console.log(`bank No. ${i} ${bank[i]} 銀行`);
}

$ node array.js

bank No. 0 三菱UFJ 銀行
bank No. 1 三井住友 銀行
bank No. 2 みずほ 銀行
bank No. 3 りそな 銀行
bank No. 4 埼玉りそな 銀行
bank No. 5 楽天 銀行
bank No. 6 住信SBI 銀行
bank No. 7 あおぞら 銀行
bank No. 8 ソニー 銀行

実行すると、このようになります。
新たな変数に結合した配列を代入し、出力をしてみると、しっかりと一つの配列になっていることがわかります。

配列要素の置き換え（splice）

続いては、要素の置き換えを解説していきます。

let services = ["Google Chrome","MDN Web Docs","Google Map","Google Earth","Google YouTube"]

services.splice(1,1,"Google search");

for(let i = 0;i < services.length;i++){
    console.log(`${i+1} : ${services[i]}`);
}

$ node array.js

1 : Google Chrome
2 : Google search
3 : Google Map
4 : Google Earth
5 : Google YouTube

まずは、要素の一つを入れ替える使い方です。インデックスが1のMDNをGoogle searchと入れ替えます。このとき、引数には、開始位置のインデックス、削除する数、追加する要素を入れます。
出力すると、しっかりと入れ替わっていることがわかります。

let services = ["Google Chrome","MDN Web Docs","Google Map","Google Earth","Google YouTube"]

services.splice(1,1,"Google search");


services.splice(0,services.length);

console.log(services);

$ node array.js

[]

続いては、引数に数字のみを入れる方法を解説していきます。引数に追加する要素を指定しない場合、指定したインデックスから指定範囲分の要素を削除できます。
この場合、全ての要素を削除することが可能です。

配列要素の検索（indexOf,lastIndexOf）

続いては要素の検索について解説していきます。

let service = ["Pixiv","Netflix","dアニメストア","Amazon Prime Video","AT-X"];

let index = service.indexOf("dアニメストア");
console.log(index);

$ node array.js

2

配列の先頭から順に検索していくのがindexOfになります。引数に指定した値を一致する要素があったとき、最初の要素のインデックスを返します。

let service = ["Pixiv","Netflix","dアニメストア","Amazon Prime Video","AT-X"];

let index = service.indexOf("dアニメストア");
console.log(index);
index = service.indexOf("U-Next");
console.log(index);

$ node array.js

2
-1

また、上の例のように配列内に存在しない値を指定した場合には-1が返されます。

最後は配列の最後から検索を開始するlastIndexOfについて解説していきます。

let service = ["Pixiv","Netflix","dアニメストア","Amazon Prime Video","AT-X","Pixiv"];

let index = service.lastIndexOf("AT-X");
console.log(index);
index = service.lastIndexOf("Pixiv");
console.log(index);