转换对象模型的最有效方法是什么？

Question

I have an initial static model on front-end side. It looks like this:

[
    {
        completed: false,
        id: 0,
        index: 0,
        isNavigationAllowed: true,
        name: 'Test1',
    },
    {
        completed: false,
        id: 1,
        index: 1,
        isNavigationAllowed: false,
        name: 'Test2',
    },
    {
        completed: false,
        id: 2,
        index: 2,
        isNavigationAllowed: false,
        name: 'Test3',
    },
]

In short, my app behave like a wizard page, so when user clicks 'Next' button, I should change the model (and don't mutate it). I use the following transform function:

function transformWizardStepsModelForNext(step, wizardStepsModel) {
    return wizardStepsModel.reduce((accumulator, currentValue) => {
        if (step === currentValue.index) {
            let newValue = { ...newValue }
            newValue.completed = true
            newValue.isNavigationAllowed = false
            return [...accumulator, newValue]
        }
        return [...accumulator, currentValue]
    }, [])
}

I should change two objects in my model (without mutation) on every user 'next' and 'previous' button clicks. So, after first click, I should change: completed = true, isNavigationAllowed = false fields from the first object, and isNavigationAllowed = true field from the second object. The same logic, but vice versa on the click 'previous' button. I've choose reduce array method for this transformation, but it looks like I can work only with one object. The question is: What is the most efficient way for transformation here on your point of view?

Answer 1

You can use map function instead of reduce

wizardStepsModel.map(currentValue => {
  if (step === currentValue.index) {
    return { 
      ...currentValue,
      completed: true,
      isNavigationAllowed: false
    }
  } else if (step + 1 === currentValue.index) {
    return { 
      ...currentValue,
      isNavigationAllowed: true
    }
  }
  else return currentValue
})