【JavaScript 】配列とオブジェクトを使って複数の値をまとめて管理する

配列とは

配列は[ ]で囲んだ複数の値です。この複数の値を1つの変数に代入することができます。

let numbers= [1,2,3,4,5];
console.log(numbers);

これを実行すると、配列がそのまま出力されます。

[1,2,3,4,5]

配列のある要素だけを抽出する

配列は初めの値から順に、0、1、2、3と番号が割り振られています。次のような指定をすると、番号の値だけを抽出できます。下のコードでは表示されるのは444です。

let numbers= [111,222,333,444,555];
console.log(numbers[3]);

配列の中身を書き換える

配列の中身も簡単に書き換えることができます。

let numbers= [111,222,333,444,555];
numbers[3] = "HELLO"
console.log(numbers[3]);

ちなみにconstで宣言していても、中身を書き換えることが可能です。詳しくは下の記事を参照してください。

参考 JavaScript: const の配列の値が変えられるのはなぜ？teratail

for文を使って配列の要素を表示させる

配列の要素を一気に出力するにはfor文を使うと便利です。

let numbers= [111,222,333,444,555];
for(let i =0; i < 5; i++){
 console.log(numbers[i]);
}

配列の要素の個数を取得する

配列の要素の個数は、変数名.lengthで調べることができます。下のコードでは「5」を出力します。

let numbers= [111,222,333,444,555];
console.log(numbers.length);

.lengthを使えば、先ほどのfor文も次のように書き換えることができます。

let numbers= [111,222,333,444,555];
for(let i =0; i < numbers.length; i++){
 console.log(numbers[i]);
}

オブジェクト

オブジェクトとは、複数の値にプロパティがついたものです。プロパティ名：値で表示します。また要素と要素は、（カンマ）で区切り、{ }で囲みます。

const numbers = {name:"イヌ", price: 1000 };
console.log(numbers);

出力すると次のようになります。

{
  name: "イヌ",
  price: 1000
}

出力するプロパティを選ぶ

変数名.プロパティ名で、特定のプロパティの値だけを取り扱うことができます。下のコードで出力されるのは”イヌ”です。

const numbers = {name:"イヌ", price: 1000 };
console.log(numbers.name);

別の書き方として次のようなものもあります。[ ]を使うので配列とごっちゃにならないようにしましょう。

const numbers = {name:"イヌ", price: 1000 };
console.log(numbers['name']);
//numbers.nameと全く同じ意味です。

プロパティの値を書き換える

ある特定のプロパティの値を変更することも可能です。

const numbers = {name:"イヌ", price: 1000 };
numbers.name = "ネコ"
console.log(numbers.name);

"ネコ"

次のような書き方もできます。

const numbers = {name:"イヌ", price: 1000 };
numbers['name'] = "ネコ"
console.log(numbers.name);

オブジェクトを配列として扱う

複数のオブジェクトは配列にすることが可能です。その際には[ ]で囲み、オブジェクト間には「,」（カンマ）を加えます。

const numbers = [
{name:"イヌ", price: 1000 },
{name:"ネコ", price: 2000 }
]
console.log(numbers[1]);

上のコードでは、numbers[1]の要素を出力します。

{
  name: "ネコ",
  price: 2000
}

numers[1]のある要素だけを抽出することも可能です。出力すると2000と表示されます。

const numbers = [
{name:"イヌ", price: 1000 },
{name:"ネコ", price: 2000 }
]

console.log(numbers[1].price);

forと組み合わせると、次のようなこともできます。

const numbers = [
{name:"イヌ", price: 1000 },
{name:"ネコ", price: 2000 }
]

for(let i= 0; i < numbers.length; i++){
  console.log(`私は${numbers[i].name}です。`)
  console.log(`${numbers[i].price}円です。`)
}

"私はイヌです。"
"1000円です。"
"私はネコです。"
"2000円です。"

配列を変数に入れてから、値を出力することも可能です。下のコードでは、定数displyに丸々配列numbersの値が入っていると考えることができます。

const numbers = [
  {name: "イヌ", price: 1000},
  {name: "ネコ", price: 2000},
];

for (let i = 0; i < numbers.length; i++) {
  console.log("--------------------");
  const disply = numbers[i];
  console.log(`名前は${disply.name}です`);
  console.log(`${disply.price}円です`);
  
}

オブジェクトの値に配列・オブジェクトを入れる

非常にややこしいのですが、オブジェクトのプロパティの値には配列やオブジェクトを入れることもできます。

const numbers = {
  name:"イヌ",
  price:1000,
  foods:["ドッグフード","米","肉"],
  human: {name:"太郎",age:"12"}
  }
  
console.log(numbers);
console.log(numbers.name);
console.log(numbers.foods[2]);
console.log(numbers.human.name);