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

1 篇文章 0 订阅

需求:根据所给定的字段,组织打印信息,不同类型(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讲解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值