JS Symbol + Proxy 实现按照后端返回字段重组展示数据

需求:根据所给定的字段,组织打印信息,不同类型(type字段的数据返回字段不同,但要求给定的字段都要有中文名称匹配。没有给定的字段,不能多余出现。
旧实现思路:靠逻辑实现判断不同type字段,给baseItem塞数据。(局限性太强,代码中有太多写死的东西)
新实现思路:使用proxy拦截get操作,没有返回这个字段,直接获取则为undefined,判断undefined,返回一个Symbol类型的值。重新组成打印信息时,再判断是否为这个Symbol字段。

 exportItem = exportItem.map(item => {
        const iteProxy = new Proxy(item, {
          get: (target, propKey) => {
            if (propKey in target) {
              return target[propKey];
            } else {
              return notReturn;
            }
          }
        });
        const baseItem = {
          姓名: item.name,
          性别: item.gender,
          年龄: item.age,
        }
        // 旧写法
        /*if(iteProxy.type === '01'){
		 baseItem['字段1'] = item.name1;
		}
        if(iteProxy.type === '02'){
		 baseItem['字段2'] = item.name2;
		}
		*/
		// 新写法
        if (iteProxy.nickname !== notReturn) {
          baseItem['外号'] = item.nickname;
        }
        return baseItem;
      });

Symbol ES6新增基本数据类型

注意用法 ,没有new

 const objSymbol = Symbol('这里可以放解释性参数')

参考: mdn Symbol

Proxy

  1. Proxy 代理,可拦截对象的一些操作
const proxy = new Proxy(obj,{
		get:..;
		set:...
	}
);

参考:阮一峰老师的proxy讲解

上一篇:实验三


下一篇:关于JavaScript Symbol类型