Zenn
🦁

【JavaScript】配列とオブジェクトの違い

2022/07/25に公開
JavaScript
初心者
tech

はじめに

この記事は学習ノートです。
JavaScriptの配列とオブジェクトについて、調べたことをまとめました。

1. 配列とは

  • 値に順序をつけて格納するもの
  • 配列に格納したそれぞれの値のことを要素と呼ぶ
  • それぞれの要素の位置のことをインデックスと呼ぶ
  • インデックスは0から始まり、要素数は1から数えるので注意！

配列の定義方法

  • [](角括弧)の中に、要素を,(カンマ)区切りで記述する
// 空の配列
const ary = [];

// 1次元配列
const nums = [1, 2, 3];

// 2次元配列
const aryOfAry = [
    ["a", "b", "c"],
    ["d", "e"],
];
ちなみにJavaの場合(見ると混乱するかも😂)
  • {}(波括弧/初期化子)の中に、要素を,(カンマ)区切りで記述する
  • データ型か変数名のあとに[]が必要
// 空の配列
int[] = ary = {};
// 1次元配列
int[] nums = {100, 200, 300};

// 2次元配列
int aryOfAry[][] = {
    {10, 20, 30},
    {40, 50}
};

元々Javaを2年くらい勉強していた私は、ときどき混乱します…😂

配列へのアクセス方法

  • 配列名[インデックス]でアクセスする
// 1次元配列
const nums = [1, 2, 3];
console.log(nums[0]); // => 1

// 2次元配列
const aryOfAry = [
    ["a", "b", "c"],
    ["d", "e"],
];
console.log(aryOfAry[0][1]); // => "b"

2. オブジェクトとは

  • キーとバリュー(値)がペアになったもの
  • オブジェクトの中身は、配列と違って順序付けされていない

オブジェクトの定義方法

  • {}(波括弧)の中に、プロパティを,(カンマ)区切りで記述する
  • キーとバリューの間は、:(コロン)で区切る 
const user = {
    name: "kana",
    age: 10,
};

オブジェクトのプロパティへのアクセス方法

  1. ドット記法...ドット.を使う
  2. ブラケット記法...ブラケット[](角括弧)を使う
const user = {
    name: "kana",
    age: 10,
};

// ドット記法
console.log(user.name); // => kana

// ブラケット記法
console.log(user["age"]); // => 10

まとめ

配列

  • 値に順序をつけて格納できるもの
  • [](角括弧)の中に、要素を,(カンマ)区切りで記述する
  • 配列名[インデックス]でアクセスする

オブジェクト

  • キーとバリュー(値)がペアになったもの
  • {}(波括弧)の中に、プロパティを,(カンマ)区切りで記述する
  • オブジェクトの中身は、配列と違って順序付けされていない
  • オブジェクトのプロパティへのアクセス方法は、ドット記法かブラケット記法を使う
    ※変数を使用する場合は、必ずブラケット記法を使う

おわりに

配列は角括弧！
オブジェクトは波括弧！！
Javaをやっていた人間には本当にややこしいので、何回も言う…😂

参考

https://jsprimer.net/basic/array/
https://jsprimer.net/basic/object/
https://ja.javascript.info/array
https://ja.javascript.info/object

Discussion