本ページはプロモーションが含まれています。

JavaScriptの配列とは?扱う上での注意点と配列の操作

JavaScriptの配列とは? JavaScript

プログラムにはデータをまとめて表現できる「配列」という仕組みが用意されており、配列を活用することで、データをまとめて管理しやすくなります。

JavaScriptに限ったことではありませんが、プログラミングにおいて配列は必須とも言える仕組みなので、しっかり学習してきましょう。

以下では、JavaScriptの配列の操作や扱う上での注意点など、JS初心者の方向けに解説しています。

JavaScriptの配列とはどんなもの?

配列(array)とは複数の文字列や数値をまとめて格納し、管理するためのオブジェクトのことです。配列を使用することで、配列の要素数、要素の存在確認、さらに平均値や合計値の計算なども簡単に行うことができます。

それでは実際に配列を作成してみましょう。以下のコードは配列のnamesの中に"Bob","Tom","Mary"の3つが含まれています。

let names = [ "Bob","Tom","Mary" ];

このnamesから"Bob"を取り出したい場合はこうします。

console.log(names[0]); // Bob

names[数値]とすることで配列内の要素を呼び出すことができます。配列に含まれている要素には番号が0から順番に与えられていて、この数値を指定することで呼び出すことができるのです。

そのため、Maryを呼び出したいときはこうします。

console.log(names[2]); // Mary

ちなみに呼び出す際に指定する数値のことを添え字(index)と呼びます。

JavaScriptの配列を扱う上での注意点

次に配列を扱う上での注意点について解説します。

添字は0から始まる

前述の通り、添字は1からではなく0から始まります。下記コードで"Mar"を呼び出したいときはmonth[2]とします。

let month = [ "Jan","Feb","Mar","Apr" ];

console.log(3); // Apr
console.log(2); // Mar

数字に関連する要素を配列で扱うときには添字に注意しましょう。

添字をはみ出したらエラー

配列では、指定した添字が、配列の添字の最大値をはみ出すと、その時点でエラーになってしまいます。

let month = [ "Jan","Feb","Mar","Apr" ];

console.log(3); // Apr
console.log(4); // Error

配列は0から始まるため、monthの添字の最大値は3です。

JavaScriptの配列の操作

代表的な配列の操作を解説します。

要素の追加と削除

配列の末尾に要素を追加するには.push()メソッドを使用します。

let names = [ "Bob","Tom" ];
names.push("Mary");

配列の末尾を削除するには、.pop()メソッドを使用します。

names.pop(); // Maryが削除される

配列の要素数の確認

console.log(names.length); // 3 

配列の添字の最大値ではない点にご注意ください。添字にそのまま指定するとエラーになります。

console.log(names[ names.length ]); // Error
console.log(names[ names.length - 1 ]); // Mary

最後の要素を表示させる時は値を-1させることで表示させましょう。

要素の検索

.indexOf()メソッドは指定した要素のインデックス値を返します。存在しない場合は-1を返します。条件分岐と合わせて活用することで、要素の存在チェックを行うことが可能です。

let name = "Mary";
if( names.indexOf(name) !== -1 ){ // 2が返却されTrueになる
    console.log("Exist");
}

結論

配列を使用することで、複数の文字列や数値をまとめて管理することができます。平均値や合計値の計算に関しては、配列のループ処理を兼ねることで実現可能です。

記事を書いている人

記事を書いている人Private Works

STUDY CODEの運営や記事の執筆は、Web制作やWebメディアを運営している個人事業(フリーランス)や、Web制作・プログラミングに精通したライターによって提供しています。詳しくはこちら

スポンサーリンク
JavaScript
studycode-adminをフォローする
STUDY CODE

コメント

タイトルとURLをコピーしました