配列は変数をずらっと並べたものです。
すでに学んでいる「変数」は数字を入れる「箱」のようなものだ、と表現されたりしますが、そのような表現だと「配列」は「箱が連続して並んだもの」と表現できるでしょう。
次のようにJavaScriptのプログラムを書くことができます。
|
1 2 3 4 |
let array1 = [10, 20, 30]; console.log(array1[0]); // 10 が表示されます console.log(array1[1]); // 20 が表示されます console.log(array1[2]); // 30 が表示されます |
0を開始とした位置を指定して値を取ることができます。この位置のことをインデックスと呼びます。
他の変数と組み合わせることで、このような合計値を求めることができます。
「+=」は、変数の値に追加するときに使うものです。
|
1 2 3 4 5 6 7 8 9 |
let array1 = [10, 20, 30]; let result = 0; let i = 0; result += array1[i]; i += 1; result += array1[i]; i += 1; result += array1[i]; console.log(result); // 60 が表示されます |
i の値を、1つずつ足していき、それに応じて、array1の中身を取り出して、result変数に入れて、加算していっているので、合計値が求まります。
配列の途中の値を書き換える
|
1 2 3 |
let array1 = [10, 20, 30]; array1[1] =40; console.log(array1); // [10, 40, 30] が表示されます |
全体の長さを知ることができる
|
1 2 |
console.log([10, 20, 30].length); // 3 が表示されます。 console.log([1, 2, 3, 4, 5].length); // 5 が表示されます。 |
長さ length を使うと、配列の長さというか、大きさを知ることができます。配列の中身は何個あるか、ということです。
他の言語では、個数という意味の count という単語が使われる場合もよくあるのですがが、JavaScriptの場合は、length と表現されます。
終端から取り出したり、追加したりする
配列は、pop という命令で、後ろから取り出すことができます。
|
1 2 3 4 |
let array1 = [3, 4, 5, 6, 7]; console.log(array1.pop()); // 7 が表示される console.log(array1.pop()); // 6 が表示される console.log(array1); // [ 3, 4, 5 ] が表示される |
また、push という命令で、後ろに追加することができます。
|
1 2 3 4 5 |
let array2 = [3, 4, 5]; array2.push(6); console.log(array2); // [ 3, 4, 5, 6 ] が表示される array2.push(7, 8); console.log(array2); // [ 3, 4, 5, 6, 7, 8 ] が表示される |
push は同時に２つの引数を与えることができます。
先頭に追加したり、削除したりする
先頭側からも同じ操作ができます。
shift という命令で、先頭から取り出すことができます。
|
1 2 3 4 |
let array1 = [3, 4, 5, 6, 7]; console.log(array1.shift()); // 3 が表示される console.log(array1.shift()); // 4 が表示される console.log(array1); // [ 5, 6, 7 ] が表示される |
unshift という命令で、先頭に追加することができます。
|
1 2 3 4 5 |
let array2 = [3, 4, 5]; array2.unshift(2); console.log(array2); // [ 2, 3, 4, 5 ] が表示される array2.unshift(0, 1); console.log(array2); // [ 0, 1, 2, 3, 4, 5 ] が表示される |
unshift も push と同様に、同時に2つの値を、先頭に追加することができます。
途中を切り取る
文字列と同じ命令、slice が 配列に対しても使えます。
|
1 2 3 |
let array1 = [0, 1, 2, 3, 4, 5, 6, 7]; console.log(array1.slice(2, 6)); // [ 2, 3, 4, 5 ] が表示される console.log(array1); // [0, 1, 2, 3, 4, 5, 6, 7]が表示される |
先頭が0から始まる位置の、2番目から6番目の1つ前の5番目まどを切り取っています。
そして、切り取ってはいますが、元のarray1の値は変化なしです。
もう一つ、切り取る命令 splice があります。
|
1 2 3 |
let array2 = [0, 1, 2, 3, 4, 5, 6, 7]; console.log(array2.splice(2, 4)); // [ 2, 3, 4, 5 ] が表示される console.log(array2); // [0, 1, 6, 7]が表示される |
こちらは、2番目の位置から、4つ分を切り取る、という命令になります。
そして、切り取ったあとの、array2の値は、切り取られた中身となります。
元の配列の中身を変化させる splice のような機能を「破壊的」と呼び、逆のものとして、元の配列の中身を変化させない slice のような機能を「非破壊的」と呼んだりします。
空配列
長さがゼロ、で、中身を入れる場所のない、空配列というものを作れます。
|
1 2 |
let array1 = []; colsole.log(array1.length); // 0 が表示される。 |
ここから push や shift の命令を使って値を増やしてったりすることができたりします。
同じ型ではなくても扱える
同じ種類(型)の値ではなくても扱うことができます。
|
1 |
let array1 = [10, 'ABC', 30]; |
しかしこれは、あまり実用的ではないかと思います。なぜなら、合計値を求めたときのようなコードをかく場合に、数値と文字列が混在してしまったら、計算しにくいというか、プログラムが書きにくくなるだけだからです。
数値をいれるときは数値のみ、文字列をいれるときは文字列のみ、を入れて使った方が便利でしょう。
また、配列の中には、さらに配列をいれたり、これから勉強していくオブジェクトをいれたり、関数をいれたりすることもできます。
配列についての基礎はこのようなものです。
for ループなどを使うとより複雑なことができるので、for を学んだときに、応用を勉強していくようにしていきます。
Array については、さらには、map/reduce/forEachなどの命令もありますので、後々、記事を書いていきます。