Javascript 使用spread运算符返回修改了某个键的突变对象

在下面的对象中，我想将数据[1]的val值增加1，并保持所有内容不变，如何实现它

const state = 
    {
        "data": [{
                "val": 1,
                "other": 10
            },
            {
                "val": 11,
                "other": 100
            },
            {
                "val": 100,
                "other": 1000
            }
        ]
    }

我希望变异的物体是这样的-

{
    "data": [{
            "val": 1,
            "other": 10
        },
        {
            "val": 10,
            "other": 100
        },
        {
            "val": 100,
            "other": 1000
        }
    ]
}

我知道我可以像这样直接更改值-state.data[1].val=state.data[1].val+1，但我想使用扩展运算符实现相同的值，可以使用扩展运算符实现吗？ 像这样的事情-

const mutatedState = {
        ...state,
        data: [...state.data]
}

从对象中获取数据。像这样使用

const state={data:[{val:1，other:10}，{val:11，other:100}，{val:100，other:1000}]} const{data}=状态； 设res={ 状态 数据：[ 数据[0]， {…数据[1]，val:data[1].val+1}， …数据.2 ] } console.logresult从对象中获取数据。像这样使用

const state={data:[{val:1，other:10}，{val:11，other:100}，{val:100，other:1000}]} const{data}=状态； 设res={ 状态 数据：[ 数据[0]， {…数据[1]，val:data[1].val+1}， …数据.2 ] }

---

logresult您可以分配部分数组/对象

var对象={data:[{val:1，other:10}，{val:10，other:100}，{val:100，other:1000}]}， 结果={ 对象 数据：Object.assign […object.data]， { 1:Object.assign {}, object.data[1]， {val:object.data[1].val+1} } }; console.logresult；

---

.as console wrapper{max height:100%！important；top:0；}您可以分配数组/对象的部分

var对象={data:[{val:1，other:10}，{val:10，other:100}，{val:100，other:1000}]}， 结果={ 对象 数据：Object.assign […object.data]， { 1:Object.assign {}, object.data[1]， {val:object.data[1].val+1} } }; console.logresult；

---

.as console wrapper{max height:100%！important；top:0；}在一些功能帮助程序的帮助下，实际上非常优雅：

 const mapOne = (index, mapper) => array => array.map((it, i) => i === index ? mapper(it) : it);
 const lens = (key, mapper) => obj => ({ ...obj, [key]: mapper(obj[key]) });

 // somewhere
 this.setState(mapOne(1, lens("val", it => it + 1)));

---

在一些功能助手的帮助下，实际上非常优雅：

 const mapOne = (index, mapper) => array => array.map((it, i) => i === index ? mapper(it) : it);
 const lens = (key, mapper) => obj => ({ ...obj, [key]: mapper(obj[key]) });

 // somewhere
 this.setState(mapOne(1, lens("val", it => it + 1)));

---

使用深层对象和不变性可能是一件非常痛苦的事情，因此像lodash的函数式编程助手这样的东西可以让您的生活变得更加轻松。查找：lodash/fp/setworkingdeepobjects和不变性可能是一个真正的难题，因此像lodash的函数式编程助手这样的东西可以让您的生活变得更加轻松。查找：lodash/fp/set