ES6 - 手摸手教你解构后台特定字段的正确姿势
前言：如果你是一名前端开发者，那么请确保下文能够一字不落的看完，因为接下来的问题你曾经100%遇到过、且高达90%的人会忽略或者处理方式不够简洁....
应用场景：在处理来自后台的数据时，字段名不匹配、掺杂了多余数据。
假设现有一个编辑功能，编辑时需要做数据回显，即根据id向后台查询该条数据的关联数据，把结果赋值给视图绑定的数据模型。
ok，一切看起来并没有什么问题，接着往下看：
数据模拟：
// 模拟后台接口返回的数据
let res = {
id: "21432423523",
name: "张三疯",
age: "14",
sex: "男",
info: false,
success: true,
hobby: "小姐姐",
location: "陕西",
phone: '13255555555',
email: 'webcmh@163.com',
};
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)
总结：代码的灵魂在于简洁、易读。
本文地址：https://blog.csdn.net/qq_43471802/article/details/107480266