javascript - 如何在javascript中更新对象中的嵌套属性(即对象也包含对象数组)?
问题描述
我有以下基于对象属性的模拟数据需要使用扩展运算符更新它们各自的值。我不能这样做,因为它是嵌套的。
我可以使用以下方法来实现,但正如您所见,代码行正在增加。但是我们绝对可以减少使用传播运算符。因为在“标题”属性中,我只更新 0 索引,而在左列中只更新标签值,其余部分是相同的。
const mockData = {
title: ["Javascript", "Selected Topic"],
leftColumn: [
{
key: "name",
label: "Javascript Topic Name",
type: "string",
},
{
key: "id",
label: "Javasctipt Topic Id",
type: "string",
},
],
};
const handleType = (val) => {
switch (val.type) {
case "Javascript":
return {
...mockData,
};
case "Angular":
return {
...mockData,
title: ["Angular", "Selected Topic"],
leftColumn: [
{
key: "name",
label: "Angular Topic Name",
type: "string",
},
{
key: "id",
label: "Angular Topic Id",
type: "string",
},
],
};
case "React":
return {
...mockData,
title: ["React", "Selected Topic"],
leftColumn: [
{
key: "name",
label: "React Topic Name",
type: "string",
},
{
key: "id",
label: "Reacr Topic Id",
type: "string",
},
],
};
}
};
我正在尝试以下方法但没有得到想要的结果
const handleType = (val) => {
const newArray = [mockData];
console.log("newArray", newArray);
// const index = mockData.findIndex((ele) => ele);
// console.log("index", index);
// newArray["title"][0] = "React";
// console.log("newArray ==>", newArray);
switch (val.type) {
case "Javascript":
return {
...mockData,
};
case "Angular":
mockData.title[0] = "Angular";
return mockData.leftColumn.map((val, index) => {
let value = { ...val, label: "Angular",};
return Object.assign({}, value);
});
case "React":
return {
...mockData,
title: ["React", "Selected Topic"],
leftColumn: [
{
key: "name",
label: "React Topic Name",
type: "string",
},
{
key: "id",
label: "Reacr Topic Id",
type: "string",
},
],
};
}
};
const type = {
type: "Angular",
};
console.log("Angular", handleType(type));
解决方案
推荐阅读
- gnuradio - 带有 RFX2400 的 USRP1:加载“未知”子板
- rational-team-concert - SCM:从加载规则文件加载
- python - Pandas - 遍历 2 列(纬度和经度)并找到每个坐标与特定地点之间的距离
- python - 将行传递给函数给出错误 Pandas Python
- java - 如何在 Android 应用程序的按钮中显示数学公式?
- javascript - ExtJS4 - 网格列未填满屏幕
- java - Java:无法找到或加载主类 Main
- javascript - 如何翻转/镜像 PIXI Graphics 实例 (drawRoundedRect)
- azure-language-understanding - LUIS Pattern.any 实体
- javascript - 衡量渲染 HTML Canvas 的性能