如何使用对象更改数组中的一个属性值

Question

我有常量选项卡，我想在其中将属性 isActive 从 boolean 更改为“开”或“关”，具体取决于它是真还是假。

   const tab = [
   {id:'0',original:{lineId:'4', isActive:false, length: '3'}},
   {id:'1',original:{lineId:'5', isActive:true, length: '4'}},
   {id:'2',original:{lineId:'6', isActive:false, length: '7'}}
  ];

我尝试使用 .map() 但我做错了什么。 你能建议问题出在哪里吗？

const newTab = tab.map(x => x.original.isActive === false ? 'off' : x.original.isActive === true ? 'on' : x);

这是 newTab 更改后的样子：

  const newTab = 
[
    {id:'0',original:{lineId:'4', isActive:'off', length: '3'}},
      {id:'1',original:{lineId:'5', isActive:'on', length: '4'}},
      {id:'2',original:{lineId:'6', isActive:'off', length: '7'}}
     ];

使用当前代码，它仅返回已更改的 isActive 属性：

const newTab = ["off", "on", "off"]

谢谢 ！

Answer 1

您可以使用扩展语法，并且可以在 map 方法中更新变量。

tab.map((e) => (
    {
        ...e,
        original: {
            ...e.original,
            isActive: e.original.isActive ? 'on' : 'off'
        }
    }
))

Answer 2

您可以使用映射并通过复制值返回 JSON。

const tab = [
    { id: '0', original: { lineId: '4', isActive: false, length: '3' } },
    { id: '1', original: { lineId: '5', isActive: true, length: '4' } },
    { id: '2', original: { lineId: '6', isActive: false, length: '7' } }
];

const tab2 = tab.map(e => {
        return {
            id: e.id,
            original: {
                lineId: e.original.lineId,
                isActive: e.original.isActive ? 'on' : 'off',
                length: e.original.length
            }
        }
    });

Output：图片Output

Answer 3

您想要返回整个 object，而不仅仅是 map 中的on或off 。您可以使用... （展开运算符）压缩它，并且只修改isActive ，同时按原样返回其他所有内容：

 const tab = [{ id: '0', original: { lineId: '4', isActive: false, length: '3' } }, { id: '1', original: { lineId: '5', isActive: true, length: '4' } }, { id: '2', original: { lineId: '6', isActive: false, length: '7' } } ]; const newTab = tab.map(item => ({...item, original: {...item.original, isActive: item.original.isActive? 'on': 'off', } })); console.log(newTab)