No4.配列について

配列について

変数がひとつしか値をセットできないのに対して、配列は複数の値をセットすることができます。
javascriptで配列を使う場合は、下記のように宣言します。testArray1は宣言と同時に値をセットしています。 (var testArray1 = []; でとりあえず宣言だけもできます)
testArray2は宣言だけです。

var testArray1 = ["aaa", "bbb", "ccc"];
var testArray2 = new Array();

値を入れるときは下記のようにします。push、もしくは値をいれる箇所を指定して、代入演算子(=)でセットします。
配列は0から数えるため、testArray1[4]は5番目の要素になります。

testArray1.push("ddd"); // 文字列"ddd"を追加。
testArray1[4] = "eee"; // 配列4番目に文字列"eee"を追加。

pushは末尾に追加されます。unshiftを使うと、先頭に追加されます。
参考URL

削除する場合は、popやshift、spliceを使います。

var testArray1 = ["aaa", "bbb", "ccc"];
// 先頭削除
testArray1.shift(); // 結果:["bbb", "ccc"]となる
// 末尾削除
testArray1.pop(); // 結果:["bbb"]となる

testArray1.push("ddd", "eeee"); // ["bbb", "ddd", "eee"]

testArray1.splice(1, 1); // 結果:["bbb", "eee"]

参考URL

使ってみよう

下記ソースをarraytest.html等の名前で保存し、開いてみましょう。

<html>
  <head>
    <title>variable test js</title>
    <meta charset="UTF-8">
    <script>
       function main(){
           let testArray1 = ["apple", "grape","orange"];
           let testArray2 = new Array();
           testArray2.push("test","hoge", "foo", "bar");

           console.log("No1.宣言時:");
           console.log(testArray1);
           console.log(testArray2);

           console.log("No2.testArray1を2回pop:");
           testArray1.pop();
           testArray1.pop();
           console.log(testArray1);

           console.log("No3.testArray2をshift:");
           testArray2.shift();
           console.log(testArray2);

           console.log("No4.testArray2をslice:");
           testArray2 = testArray2.slice(1, 2);
           console.log(testArray2);
       }
    </script>
  </head>
  <body onload="main();">
    配列使用テスト
  </body>
</html>

右クリック=>検証(google chome)=>consoleで結果を確認すると下記のようになります。

arraytest.html:11 No1.宣言時:
arraytest.html:12 (3) ["apple", "grape", "orange"]
arraytest.html:13 (4) ["test", "hoge", "foo", "bar"]
arraytest.html:15 No2.testArray1を2回pop:
arraytest.html:18 ["apple"]
arraytest.html:20 No3.testArray2をshift:
arraytest.html:22 (3) ["hoge", "foo", "bar"]
arraytest.html:24 No4.testArray2をslice:
arraytest.html:26 ["foo"]

No1では2つの宣言方法で宣言しています。どちらでも同じように使えます。
No2ではtestArray1を2回popしています。要素が二つ後ろから削除されて”apple”のみ残ります。
No3ではtestArray2をshiftしています。先頭要素が消えるので、残りは3つです。
No4ではtestArray2をsliceしています。1番目の要素から2番目の要素までを切り取るので、”foo”だけが取れてきます。