表单回填各种方法汇总

开发中经常遇到表单回填的情况，表单回填就是给已有form对象的某些字段赋值，数据源可能来自接口返回，也可能来自页面上已有数据。常见于点击某一行数据的编辑按钮，弹出对这一行的编辑表单。问题很简单，大佬略过即可。

列举几个简单的情况和对应的方法：

1、form字段较少时，直接赋值

let form = {
    age: '',
    name: ''
}
let res = {
    age: '15',
    name: 'xiaoming',
    xxx: 'xxx'
}
// 直接赋值
form = {
    age: res.age,
    name: res.name
}
// 或者
form.age = res.age;
form.name = res.name;
console.log(form);

2、form字段多一点，字段名和数据源字段名一致

使用对象解构的写法

let form = {
    a: '',
    b: '',
    c: '',
    d: '',
    e: '',
    f: '',
    g: ''
}
let res = {
    a: '11',
    b: '22',
    c: '33',
    d: '44',
    e: '55',
    f: '66',
    g: '77',
    xxx: 'xxx',
    yyy: 'yyy',
    zzz: 'zzz',
}
// 对象解构
const { a, b, c, d, e, f, g } = res;
form = { a, b, c, d, e, f, g };

console.log(form)

3、form字段多一点，字段名和数据源字段名不一致

使用对象解构的写法，搭配起别名

let form = {
    aaa: '',
    b: '',
    c: '',
    dddd: '',
    e: '',
    f: '',
    g: ''
}
let res = {
    a: '11',
    b: '22',
    c: '33',
    d: '44',
    e: '55',
    f: '66',
    g: '77',
    xxx: 'xxx',
    yyy: 'yyy',
    zzz: 'zzz',
}
// 对象结构
const {a: aaa, b, c, d: ddd, e, f, g} = res;
form = {aaa, b, c, ddd, e, f, g};

console.log(form)

4、form字段极多

字段较多时，也可以使用2、3里的解构方法，但是为了避免解构时需要一个字段名一个字段名的复制到大括号里，可以采用下面的方法：

对象遍历配合hasOwnProperty来进行赋值

let form = {
    aaa: '',
    b: '',
    c: '',
    d: '',
    e: '',
    f: '',
    g: '',
    h: '',
    i: '',
    j: '',
    k: '',
    l: '',
    m: ''
}
let res = {
    a: '11',
    b: '22',
    c: '33',
    d: '44',
    e: '55',
    f: '66',
    g: '77',
    h: '88',
    i: '99',
    j: '100',
    k: '101',
    l: '102',
    m: '103',
    xxx: 'xxx',
    yyy: 'yyy',
    zzz: 'zzz',
}
// 对象遍历
for (const key in form) {
    if (res.hasOwnProperty(key)) {
       form[key] = res[key];
    }
    // 特殊字段的处理，加个if
    if(key==='aaa'){
        form.aaa = res.a;
    }
}

console.log(form)

5、其他方法

// 对象合并的方法
Object.assign(form, res);
// 也可以用展开符
form = { ...form, ...res };

这两种方法的弊端就是res里面字段名如果和form里不一致，无法覆盖成功，还有就是res里面如果字段较多（后端接口一般返回很多用不到的字段），合并后的form会有很多冗余字段。

自己的一些小总结，作为笔记记录下来，也供网友批评指正，互相学习。