配列[JavaScript]

配列とは、複数のデータを1つにまとめて扱えるオブジェクトです。slot.jsを見てみましょう。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let interval;

function startSlot() {
  const slotNumber = document.getElementById('slot-number');
  interval = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlot() {
  clearInterval(interval);
}

let intervalTwo;

function startSlotTwo() {
  const slotNumber = document.getElementById('slot-number-two');
  intervalTwo = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlotTwo() {
  clearInterval(intervalTwo);
}

let intervalThree;

function startSlotThree() {
  const slotNumber = document.getElementById('slot-number-three');
  intervalThree = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlotThree() {
  clearInterval(intervalThree);
}

1行目に「const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];」とあります。これは「arrayという変数を定義(宣言)し、それに[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]を代入する」という意味です。この「[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]」の部分が配列です。

配列の作り方には、配列コンストラクタ(Array)を使う方法と配列リテラル([])を使う方法の2種類あります。

例
const animals1 = new Array('dog', 'cat', 'monkey');
const animals2 = ['dog', 'cat', 'monkey'];

上記の例では、どちらも同じ配列が作成されます。

両者が異なる振る舞いをするのは、数値を1つだけ格納した配列を作成しようとする場合です。

例
const number1 = new Array(3);
const number2 = [3];
console.log(number1); // => [empty × 3]
console.log(number2); // => [3]

「// =>」以下が実行結果です。リテラルを用いた方は、配列に3が格納されています。一方、コンストラクタを用いた方は「[empty × 3]」となっています。これは「new Array(3)」が「3つ分のデータが入る配列を作る」という意味になるためです。配列を作る際はリテラルを用いたほうが良いでしょう。

配列の要素には、インデックス(番号)が振られています。前から0、1、2、⋯⋯ と連番になっています。

配列の要素を取り出すには、インデックスを用います。

例
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(array[1]);
// => 2

「変数名[インデックス]」とすることで、要素を取り出すことができます。

例
const array = [[1, 2, 3], [4, 5, 6]];
console.log(array[0][1]);
// => 2

配列の中の配列から要素を取り出すには、「変数名[外側の配列のインデックス][内側の配列のインデックス]」とします。上の例の場合、まず[0]で配列の中の配列のうち、1番目のもの([1, 2, 3])を指定します。そして[1]で[1, 2, 3]の中から2番目の要素を指定しています。インデックスは0から始まることに注意してください。

参考記事

【JavaScript入門】配列の使い方と操作まとめ(初期化・追加・結合・検索・削除) | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
今回は、プログラミングを勉強するのに欠かせない重要な概念でもある「配列」の使い方について体系的に学習をしていきましょう! 本記事では以下のような構成で解説していきます! 【基礎】「配列」とは? 【基礎】「配列」の基本的な使い方 【基礎】「配列」の追加・削除 【基礎】「配列」の結合・分割 【実践】「配列」のループ処理 【...
配列 · JavaScript Primer #jsprimer
配列は値を順番に格納できるオブジェクトです。この配列の作成、更新、削除などの基本的な操作や実際に使い方についてを紹介します。また配列における破壊的なメソッドと非破壊的メソッドの違いについても紹介します。
JavaScriptの配列(Array)についてまとめてみた
配列(Array)は我々プログラマにとって馴染み深い要素のひとつです。配列はどんな入門書にも登場し、どんな高度なプログラムにおいても大活躍します。そしてJava…

コメント

  1. […] 配列(JavaScript)配列とは、複数のデータを1つにまとめて扱えるオブジェクトです。slot.jsを見てみましょう。const array = ;let interval;function startSlot() { const slotNu…tsushima164blog.com2019.11.26 […]

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