JS 动态往json数据里面添加，删除，修改值

关注

转载最新推荐文章于 2026-03-12 11:22:07 发布 2.5w 阅读 AI 写同款· GEO 优化 ›

JavaScript实现HTML表格动态添加与删除行功能 Vue 的methods选项集中管理所有交互逻辑。与 React 不同，Vue 允许直接修改原始数组（如pushsplice），但仍建议遵循不可变原则以提高可预测性。methods: {// 推荐方式：生成新数组== id);这样更符合函数式编程理念，也便于测试和调试。阅读详情

var str1 = {"name": "apple", "sex": "21"};
                 
// 参数：prop = 属性，val = 值
function createJson(prop, val) {
    // 如果 val 被忽略
    if(typeof val === "undefined") {
        // 删除属性
        delete str1[prop];
    }
    else {
        // 添加 或 修改
        str1[prop] = val;
    }
}

下面为测试：

// 无改动，输出 Object {name="apple", sex="21"}
console.log(str1);
                                          
// 添加属性 color，值为 red
createJson("color", "red");
                                          
// 输出 Object {name="apple", sex="21", color="red"}
console.log(str1);
                                          
// 修改属性 name 的值为 banana
createJson("name", "banana");
                                          
// 输出 Object {name="banana", sex="21", color="red"}
console.log(str1);
                                          
// 删除属性 sex
createJson("sex");
                                          
// 输出 Object {name="banana", color="red"}
console.log(str1);

这里做下笔记，方便以后查阅。

原文地址：https://blog.youkuaiyun.com/panlingfan/article/details/45562893/

收录于