ES6 - 手摸手教你解构后台特定字段的正确姿势

前言：如果你是一名前端开发者，那么请确保下文能够一字不落的看完，因为接下来的问题你曾经100%遇到过、且高达90%的人会忽略或者处理方式不够简洁....

应用场景：在处理来自后台的数据时，字段名不匹配、掺杂了多余数据。

假设现有一个编辑功能，编辑时需要做数据回显，即根据id向后台查询该条数据的关联数据，把结果赋值给视图绑定的数据模型。

ok，一切看起来并没有什么问题，接着往下看：

数据模拟：

// 模拟后台接口返回的数据
let res = {
    id: "21432423523",
    name: "张三疯",
    age: "14",
    sex: "男",
    info: false,
    success: true,
    hobby: "小姐姐",
    location: "陕西",
    phone: '13255555555',
    email: '[email protected]',
};
let modules= {}; // 视图层绑定的数据
modules = res // 回显 直接赋值

拿到数据之后我们需要做的是把后台数据赋值给modules对象，用于回显，大多数情况下会直接赋值，那么问题浮出水面：

问题：

1. 如果编辑页面只允许修改name、phone这两个字段，那么直接赋值指针的做法在提交的时候会把所有字段传递给后台，显然是不正确的，因为后台只需要id、name、phone三个字段，而不是所有的字段。(不考虑后台是否过滤数据)

2. 假设后台查询到的包含name的字段是userName，提交保存的时候需要的字段是name，那么我们直接赋值的方式会直接把userName拷贝过去，提交的时候也是userName字段，与接口所需数据不匹配。

3. 若modules数据模型是共用的。新增功能、编辑功能视图层都是绑定的这套数据，那么编辑的时候会把新增时所不需要的字段也拷贝，这样会导致新增时由于掺杂多余字段而与后台所需字段不匹配，从而导致新增功能不能提交。

上述问题，常规的处理方式如下：

// 常规 - 提取所需的字段
modules.id = res.id;
modules.userName = res.name; //修改字段名称
modules.age = res.age;
modules.sex = res.sex;
modules.phone = res.phone;
modules.email = res.email;

对指定的字段进行单个赋值的方式很是繁琐，如果有一百个数据，需要50个字段就需要写五十行赋值的代码。

解决方式 ①：取其精华（解构）提取需要的数据，进行解构赋值。

// 取其精华
({id: modules.id,name: modules.userName, age: modules.age} = res)

解决方式 ②：去其糟粕（解构 + 剩余参数）解构出不需要的字段，剩余参数是所需字段。

// 去其糟粕
let {name,info,...arg} = res
console.log(arg)

解决方式 ③：指定需要的字段组成数组，进行遍历取值；

let wantList = ['name', 'sex', 'email'] //所需的字段组成数组
wantList.forEach(item => modules[item] = res[item])
console.log(modules)

总结：代码的灵魂在于简洁、易读。

ES6 - 手摸手教你解构后台特定字段的正确姿势

猜你喜欢