配列、オブジェクトによるデータの操作 Javascript初学者講座

前回の記事では変数に単一の値を代入して説明をしていましたが、配列やオブジェクトを使用することで複数の値を１つの変数に代入することができます。

配列
多次元配列
連想配列
オブジェクト
連想配列とオブジェクトの違い
配列内のオブジェクト
終わりに

配列

配列は [ ]（角括弧）内でCSVのように。カンマ区切りで複数の値を変数へ代入していきます。

const ary = ['アイウエオ', 'カキクケコ', 'サシスセソ', 'タチツテト'];

console.log(ary);
// ['アイウエオ', 'カキクケコ', 'サシスセソ', 'タチツテト']

const num_ary = [1,2,3,4,5]
// 数値は「’（シングルクォーテーション）」や「”（ダブルクォーテーション）」をつけずに記述します。

配列の値はデータの順番を指定することで参照することができます。

変数名[番号]

JavaScriptに限りませんが、プログラムの値は初期値が0から始まります。3番目のデータを参照したい場合には、下記のように2を指定します。

const ary = ['アイウエオ', 'カキクケコ', 'サシスセソ', 'タチツテト'];

console.log(ary[2]);
// サシスセソ

多次元配列

配列は入れ子にすることでより多くのデータを効率よく扱うことができます。値の参照は

変数名[番号][番号]

のように角括弧を連続して記載し、中に参照したい番号を入れます。

const ary = [
  [0,1,2,3,4,5,6,7,8,9],
  [10,11,12,13,14,15,16,17,18,19],
  [20,21,22,23,24,25,26,27,28,29]
]

console.log(ary[1]); // [10,11,12,13,14,15,16,17,18,19]
console.log(ary[2][5]); // 25

連想配列

配列に添え字をつけて値を扱うことができます。

const ary = [];
ary["id"] = 1;
ary["name"] = "taro";

console.log(ary); // [id: 1, name: 'taro']
console.log(ary["name"]); // taro

オブジェクト

オブジェクトは配列のように番号のみで管理するのではなく、値ごとにkeyをつけて管理します。keyは値を指定する名前のようなもので、keyを扱うことでデータの可視性が向上するので扱いやすくなります。
記述の方法は { }（波括弧）内にkey: 値のように記述していきます。

データの参照は

変数名.key

のように行います。

const obj = { id: 'a001', name: 'taro' }

console.log(obj.id); // a001
console.log(obj.name); // taro

連想配列とオブジェクトの違い

私が勉強する中でオブジェクトと連想配列はどう違うのか気になり調べたところ、JavaScriptには連想配列という用語が無いようです。
連想配列は値を代入するものらしいのですが、JavaScriptは値だけではなく関数も代入できるため連想配列であってもオブジェクトとしているようです。

const obj = {
  func01: {
    id: 1,
    firstname: "taro",
    lastname: "yamada",
    getFullName: function(){console.log(this.firstname + " " + this.lastname)}
  }
}

obj.func01.getFullName(); // taro yamada

JavaScriptの話をするときならオブジェクトと呼んでいれば大丈夫そうですが、他言語のエンジニアと話すときもあるかもしれないので、この概念を知っていておいた方がいいかと思いました。

配列内のオブジェクト

APIを使うときに一番多いデータの形式になるのが、配列内にオブジェクトが代入されているデータです。記述方法は配列の [ ]（角括弧）内にオブジェクトの { }（波括弧）を羅列していくようになります。
データの参照方法は両方の記述を合わせて

変数名[番号].key

のようにして使います。

const newsList = [
  {
    id:1,
    date: "2022/08/12",
    title: "JavaScript講座",
    author: "トオリノ"
  },
  {
    id:2,
    date: "2022/08/11",
    title: "ブログ開設のお知らせ",
    author: "トオリノ"
  }
]

console.log(newsList[1].title); // ブログ開設前のお知らせ

実際にこちらのデータを使ってお知らせリストをHTMLで記載するプログラムを作るとなると、ループ処理を行うことになります。
参考にコンソールに表示するまでのプログラムを書きます。

const newsList = [
  {
    id:1,
    date: "2022/08/12",
    title: "JavaScript講座",
    author: "トオリノ"
  },
  {
    id:2,
    date: "2022/08/11",
    title: "ブログ開設のお知らせ",
    author: "トオリノ"
  }
]

newsList.forEach(item => {
  console.log(item.date + " " + item.title + " 記載者：" + item.author)
});
// 2022/08/12 ブログ開設のお知らせ 記載者：トオリノ
// 2022/08/11 ブログ開設前のお知らせ 記載者：トオリノ

こちらで使っているループ処理については、また別の記事で説明させていただきます。