今日の参考コード

さて今日は、配列の「中」に object をしまいます！

配列の中には、なんでも入ります！

人の情報を持ったオブジェクトを 3 つ作って配列にしまう

まず前回やった object を作っていきます。この object は、人の情報を持ちます。3 人分作ります。

そしてこの 3 つのオブジェクトを配列にしまう！

3 つのオブジェクトを配列にしまう
//オブジェクトを作る
  const nakanishi = {
    name: "nakanishi",
    age: 34,
    hobby: "music",
    alive: true
  };

  const sasaki = {
    name: "sasaki",
    age: 40,
    hobby: "flower",
    alive: true
  };

  const jimmy = {
    name: "jimmy",
    age: 27,
    hobby: "guiter",
    alive: false
  };

  // array 配列にオブジェクトをしまう
  const personArray = [nakanishi, sasaki, jimmy];

すると personArray には 3 人分のオブジェクトが入りましたね。

テストで配列に入ったオブジェクトをチェックしていく

さて、一気に書いてしまいます。

長いけれど、やっていることは、配列とオブジェクトの組み合わせでしかありません。

オブジェクトが入った配列をチェックする
import { getType } from "typechecker";

describe("object", () => {
  //オブジェクトを作る
  const nakanishi = {
    name: "nakanishi",
    age: 34,
    hobby: "music",
    alive: true
  };

  const sasaki = {
    name: "sasaki",
    age: 40,
    hobby: "flower",
    alive: true
  };

  const jimmy = {
    name: "jimmy",
    age: 27,
    hobby: "guiter",
    alive: false
  };

  // array 配列にオブジェクトをしまう
  const personArray = [nakanishi, sasaki, jimmy];

  // test の内容開始
  it("personArray の型チェック", () => {
    const res = getType(personArray);
    expect(res).toEqual("array");
  });

  describe("personArray の各 item の中身の型をチェック", () => {
    it("personArray[0] の型", () => {
      const res = getType(personArray[0]);
      expect(res).toEqual("object");
    });

    it("personArray[0] の値", () => {
      const res = personArray[0];
      const expected = {
        name: "nakanishi",
        age: 34,
        hobby: "music",
        alive: true
      };
      expect(res).toEqual(expected);
    });

    it("personArray[2] の型", () => {
      const res = getType(personArray[2]);
      expect(res).toEqual("object");
    });

    it("personArray[2] の値", () => {
      const res = personArray[2];
      const expected = {
        name: "jimmy",
        age: 27,
        hobby: "guiter",
        alive: false
      };
      expect(res).toEqual(expected);
    });
  });

  describe("personArray[2] の値をより詳しく", () => {
    const jimmy = personArray[2];

    it("jimmy is dead", () => {
      const res = jimmy.alive;
      const expected = false;
      expect(res).toEqual(expected);
    });

    it("jimmy is dead at 27", () => {
      const res = jimmy.age;
      const expected = 27;
      expect(res).toEqual(expected);
    });
  });
});

複雑？

ちょっと寺子屋も難しくなってきました。

がしかし、基本的には配列の回にやった array[0] という形でのアクセスと、オブジェクトの回にやった object.name という形組み合わせで、全ての要素にアクセスできますね。

ポイントは、とにかく配列とオブジェクトの基本を思い出すことだけです。

よくわからなかったら、戻りましょう。

宿題

  • オブジェクトを複数作る
  • そのオブジェクトを配列にしまう
  • テストを書いて、配列の各要素、それからその要素であるオブジェクトの値などなどをチェック！

今日は以上です！！