JS:JavaScriptの配列

JavaSciptのロゴ画像 JavaScript

はじめに

JavaScriptの配列は可変長です。C言語のように最初に要素数を設定する必要はありません。
MDNのページでも解説されている通り、JavaScriptの配列とはArrayオブジェクトです。C#などの言語で言うところのリスト構造です。

簡単に言うと、配列を宣言するとArrayクラスのプロパティやメソッドが利用できるようになります。
例えば要素数が取得できたり(C言語はできない)、配列の先頭や末尾に自由に要素を追加出来たり、などなど便利なメソッド(命令)が沢山用意されているよ、という事です。

MDNのサイトでJavaScriptの配列について簡潔な説明があります。1度ご覧になることをお勧めします。(MDNのサイトを見れば本サイトを見る必要がない気もする)

Array – MDN

JavaScript配列の宣言と代入方法

配列の宣言

let hoge = [];

配列hogeを宣言して初期化しています。

別の記述として

let hoge = new Array();

という記述方法もあります。()内には要素数の指定もできます。

let hoge = new Array(100);

ただ、前述のlet hoge = [];の方が簡潔で分かりやすいと思います。

代入

数値型の場合

hoge[0] = 10;
hoge[1] = 20;
hoge[2] = 30;
hoge[3] = 40;
hoge[4] = 50;

文字列の場合

hoge[0] = “Hello”;
hoge[1] = “こんにちは”;
hoge[2] = “你好”;
hoge[3] = “Hola”;
hoge[4] = “Bonjour”;

宣言と同時に代入(上記の代入と同じ状態)

数値

let hoge = [10, 20, 30, 40, 50];

文字列

hoge = [“Hello”, “こんにちは”, “你好”, “Hola”, “Bonjour”];

配列の中身を初期化する

配列の宣言に使ったa = [];という記述は代入済みの配列の初期化にも利用できます。
この場合、要素数は0に戻ります。

// 配列宣言
let colors = ["red", "green", "yellow", "black", "blue"];
     
// 配列を初期化する
colors = [];

JavaScript配列のプロパティとメソッドについて

JavaScriptで配列を宣言するとArrayクラスのプロパティとメソッドが利用できます。
特にメソッドは沢山あるので、ここでは少しだけ紹介するのにとどめます。

配列の要素数取得(lengthプロパティ)

let hoge = [20, 40, 80];
console.log(hoge.length);

この場合、コンソールには「3」と表示される。

配列の先頭要素を取り除く(shiftメソッド)

let hoge = [4, 5, 6];
hoge.shift();

結果はhoge = [5, 6]となる。(先頭の要素が取り除かれ、かつ要素数も減る)

プロパティ、メソッドは配列名の後に「.」を付けて利用します。

 

プロパティ
 配列名.プロパティ名

メソッド
 配列名.メソッド名()

プロパティやメソッドは沢山あります。MDNのサイトで確認してみてください。
Array – MDN

JavaScriptの配列はかなり柔軟

例えばこんなこともできます。

let a = [65, 102];
a[1000] = 300;

上記の場合、

a[0] = 65;
a[1] = 102;
a[1000] = 300;

となります。途中の要素a[2]~a[999]の中身は何もない状態で入れ物だけが作成されます。
a[2]~a[999]の内容は「undefined」としてJavaScriptでは定義されます。

JavaScript配列を使ったサンプルプログラム

数値配列と文字列配列を宣言してコンソールに表示する

js_hairetu1.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>配列</title>
</head>
 
<body>
 
<h1>配列</h1>
<script>
    // 数値配列を宣言
    let a = [10, 20, 30, 40, 50];
    // 4番目の要素を表示
    console.log(a[3]);
    // 配列aの要素数を表示
    console.log("配列aの要素数: " + a.length);
    // 配列aを全て表示
    for(let i=0; i<a.length; i++){
        console.log("a[" + i + "] = " + a[i]);
    }
     
    // 文字列の配列の場合
    let b = ["red", "green", "yellow", "black", "blue"];
    // 配列bを全て表示
    for(let i=0; i<b.length; i++){
        console.log("b[" + i + "] = " + b[i]);
    }
     
</script>
 
</body>
</html>

実行結果
※コンソールに表示されます。(Chromeなら右クリック-検証Consoleタブに表示)

40
配列aの要素数: 5
a[0] = 10
a[1] = 20
a[2] = 30
a[3] = 40
a[4] = 50
b[0] = red
b[1] = green
b[2] = yellow
b[3] = black
b[4] = blue

配列内の指定した文字列を検索してインデックス番号を表示する

js_hairetu2.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>配列内の指定した文字列を検索してインデックス番号を表示する</title>
</head>
 
<body>
 
<h1>配列内の指定した文字列を検索してインデックス番号を表示する</h1>
<script>
    // 配列宣言
    let colors = ["red", "green", "yellow", "black", "blue"];
     
    // 文字列「yellow」を検索して見つかったらインデックス番号(要素番号)を返す
    let index = colors.indexOf("yellow");
     
    // コンソールに表示
    console.log("yellowは" + index + "番目です");
 
</script>
 
</body>
</html>

実行結果
※コンソールに表示されます。(Chromeなら右クリック-検証Consoleタブに表示)

yellowは2番目です

コメント

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