【JavaScript】「配列」と「オブジェクト」のデータ型について学ぶ - データの操作編

前回に引き続き、「配列」と「オブジェクト」の違いについてまとめていく。

「ノンプログラマのためのJavaScript はじめの一歩」 第2章 JavaScriptの文法 より

値の取得

配列

• 変数名[インデックス] で取得できる
• インデックスとは、要素に対して 0 から順番に振られた番号みたいなもの

var dog = [
  'Chihuahua',
  'Shiba',
  'Pug'
];

console.log(dog[1]); //-> Shiba

オブジェクト

• 変数名.プロパティ名 で取得できる
  • 基本的にはこの記法を使用する
• 配列のように [] を使って、 変数名['プロパティ名'] でも取得できる
  • プロパティ名を変数にして呼び出したい場合 は [] で指定しなければいけない

var dog = {
  'name': 'Doc',
  'profile': {
    'breed': 'Chihuahua',
    'sex': 'Male',
    'age': 7
  }
};

console.log(dog.name); //-> Doc
console.log(dog['name']); //-> Doc
console.log(dog.profile.age); //-> 7

var key = 'name';
console.log(dog[key]); //-> Doc

入れ子になっているデータの値を取得する場合は

どちらも [インデックス] や .プロパティ名 をつないで指定することで取得できる。

値の更新

配列もオブジェクトも「値の取得方法」で変更したい値を指定して代入する。

【配列のみ】要素数の取得

オブジェクトのプロパティ数を取得する方法は記載されていなかった。

配列の変数名.length で取得できる。

var a = [
  [
    1, 2, 3, 4, 5
  ],
  [
    1, 2, 3
  ]
]

console.log(a.length) //-> 2
console.log(a[0].length) //-> 5

【オブジェクトのみ】プロパティの追加

この章では配列の更新方法は記載されていなかったので、オブジェクトのみ。

var dog = {
  'name': 'Doc'
};

dog.coat = 'smooth';
console.log(dog); //-> {name: "Doc", coat: "smooth"}

まとめ

理解はできたけど書いてあるコードを読み解くには、値の取得方法からデータがどのような構造になっているかイメージしなければ難しそう。

• [インデックス] になっているところは配列
• .プロパティ名 になっているところはオブジェクト