javascript - 如何在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 newTitle = [val, ...mockData.title.slice(1)];
const newLeftColumn = mockData.leftColumn.map((arrValue) => {
const newLabel = arrValue.label.split(" ");
newLabel[0] = val;
return {
...arrValue,
label: newLabel.join(" "),
})
return {
title: newTitle,
leftColumn: newLeftColumn,
}
}
这就是您甚至可以将内容添加到 title 或 leftColumn 数组的方式,并且仍然可以正常工作。
推荐阅读
- swift - Swift:列出所有实现了相同协议的对象
- javascript - 当第二个窗口关闭时,电子如何在主窗口上应用样式?
- javascript - 单击时将每个 div 元素的 javascript 中的背景颜色重置为透明
- git - 使用 npm 版本制作版本
- linux - 在 Linux 环境中使用 VXWorks (workspace-4) 插入 Ada 插件的问题
- microservices - 来自微服务中 API 网关的异步响应
- linux - 从文件和随机密码创建用户
- python - netmiko 连接错误 - TypeError: connect() got an unexpected keyword argument 'passphrase'
- php - 将 PHP 字符串转换为关联数组
- angularjs - Jasmine 中的单元测试 angularjs $watch