直接从 object 访问属性？

Question

In Javascript, if we have a scenario in which there is a large object and we need to access its properties then which approach is better?

Suppose we have this object:

let largeObj = {
  items: {
    item: [
      {
        id: "0001",
        type: "donut",
        name: "Cake",
        ppu: 0.55,
        batters: {
          batter: [
            {
              id: "1001",
              type: "Regular"
            },
            {
              id: "1002",
              type: "Chocolate"
            },
            {
              id: "1003",
              type: "Blueberry"
            },
            {
              id: "1004",
              type: "Devil's Food"
            }
          ]
        },
        topping: [
          {
            id: "5001",
            type: "None"
          },
          {
            id: "5002",
            type: "Glazed"
          },
          {
            id: "5005",
            type: "Sugar"
          },
          {
            id: "5007",
            type: "Powdered Sugar"
          },
          {
            id: "5006",
            type: "Chocolate with Sprinkles"
          },
          {
            id: "5003",
            type: "Chocolate"
          },
          {
            id: "5004",
            type: "Maple"
          }
        ]
      }
    ]
  }
}

and we want to create firstBatterAndTopping object which has first batter and first topping data. Now, if we access properties of this object in below three ways, which approach is better in terms of performance. Is there any difference in these or these will perform the same. Or is there any other scenario like this in which this will impact performance?

let firstBatterAndTopping = {
    batterId: largeObj.items.item[0].batters.batter[0].id,
    batterType: largeObj.items.item[0].batters.batter[0].type,
    toppingId: largeObj.items.item[0].topping[0].id,
    toppingType: largeObj.items.item[0].topping[0].type
}

or

let firstItem = largeObj.items.item[0];
let firstBatterAndTopping = {
    batterId: firstItem.batters.batter[0].id,
    batterType: firstItem.batters.batter[0].type,
    toppingId: firstItem.topping[0].id,
    toppingType: firstItem.topping[0].type
}

or

let firstItem = largeObj.items.item[0];
let firstBatter = firstItem.batters.batter[0];
let firstTopping = firstItem.topping[0]
let firstBatterAndTopping = {
    batterId: firstBatter.id,
    batterType: firstBatter.type,
    toppingId: firstTopping.id,
    toppingType: firstTopping.type
}

Answer 1

Try immer out. Is a javascript library very useful for managing complex objects with a lot of nests: Following a simple scenario:

import produce from "immer"

const baseState = [
    {
        title: "Learn TypeScript",
        done: true
    },
    {
        title: "Try Immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({title: "Tweet about it"})
    draftState[1].done = true
})
// the new item is only added to the next state,
// base state is unmodified
expect(baseState.length).toBe(2)
expect(nextState.length).toBe(3)

// same for the changed 'done' prop
expect(baseState[1].done).toBe(false)
expect(nextState[1].done).toBe(true)

// unchanged data is structurally shared
expect(nextState[0]).toBe(baseState[0])
// ...but changed data isn't.
expect(nextState[1]).not.toBe(baseState[1])