数据处理小方法

1.lodash的uniqBy方法   获得数组中多个对象里某个值并去重,返回新数组

import uniqBy from 'lodash/uniqBy';
  
const uniqList = uniqBy(planList, 'planSimpleName');
const planNameLiat = uniqList.map((item: any) => item.planSimpleName)?.join(',') || '';

2.window.location.href = 要去的地址(会刷新)
history.push或者replace也可以跳转

3.模板语法  给toolTips内的文字进行换行

<template #title>
                  <span style="white-space: pre">{{//这句是关键
                    custProfile?.portraitInfo &&
                    custProfile?.portraitInfo[item]?.reduce((sum, item) => {
                      return (sum += item.labelDesc + '\n');
                    }, '')
                  }}</span>
                </template>

4.校验是不是json字符串

 const isJson = (str: string) => {
      if (typeof str === 'string') {
        try {
          const obj = JSON.parse(str);
          if (obj && typeof obj === 'object') {
            return true;
          }
          return false;
        } catch (e) {
          return false;
        }
      } else {
        return false;
      }
    };

5.广告图的滑动

  // 获取会员福利模块中卡片的宽度
          const itemWidth = document.querySelector('.tabs__header__item')?.clientWidth;
          // 获取会员福利模块总宽度
          const itemNum = memberInfo?.userQuarterGiftDTOs?.length;
          const contentWidth = itemWidth * (itemNum - 2) + 10 * (itemNum - 1);
          // 获取会员福利模块中第一个卡片距离左边的初始距离
          const startWidth = document
            .querySelector('.za-tabs__header__item')
            .getBoundingClientRect().left;
          // 监听会员福利模块的滚动事件
          document.querySelector('.tabs__header').addEventListener('scroll', () => {
            // 获取动态的会员福利模块中第一个卡片距离左边的距离并取正数
            const firstItemToLeft = Math.abs(document.querySelector('.tabs__header__item').getBoundingClientRect().left);
            // 排除距离左侧的margin的影响
            const alreadyShowWidth = firstItemToLeft - startWidth >= 0 ? firstItemToLeft - startWidth : 0;
            // 计算会员福利模块中第一个卡片占整个福利模块宽度的百分比
            const showPercent = alreadyShowWidth / contentWidth;
            // 更新自定义scrollBar的距离左侧margin
            setScrollPercent(showPercent);//把值存起来 赋值给下方的滚动条
          });

  useEffect(() => {
    if (tabRef.current) {
      tabRef.current.style.setProperty('margin-left', `${scrollPercent * 100}%`);
    }
  }, [tabRef.current, scrollPercent]);


    <div className="scroll-bar">
            <span className="scroll-bar-item" ref={tabRef} />
          </div>

6.打开收银台

  try {
        JSON.parse(resParams);
        const res = JSON.parse(resParams);
        if (+res.code === 0) {
          props.history.push(`/h5/pay/result${window.location.search}`);
        } else {
          Toast.show(res.message);
        }
      } catch (error) {
        // form
        const form = document.createElement('div');
        form.innerHTML = `${resParams}`;
        document.body.appendChild(form);
        // @ts-ignore
        document.getElementById('cashierSubmit')?.submit();
      }

7.处理下拉框数据  使用Obiect.keys方法

     <ProFormSelect
                  disabled={readOnly}
                  width="md"
                  fieldProps={{
                    options: lastGroupPlanEnum,
                    mode: 'multiple',
                  }}
                  name="lastGroupPlan"
                  label="去年未选择以下方案需要过健告"
                />

//等同于
      const { Option } = Select;
      <ProForm.Item noStyle>
                  <Form.Item label="去年未选择以下方案需要过健告" name="lastGroupPlan">
                    <Select
                      mode="multiple"
                      disabled={readOnly}
                    >
                      {Object.keys(lastGroupPlanEnum || {})?.map((item: any) => {
                      return (
                        <Option value={item}>
                          {item}:{lastGroupPlanEnum[item]}
                        </Option>
                      );
                    })}
                    </Select>
                  </Form.Item>
                </ProForm.Item>

8.backTo转码

encodeURI是对url中的查询字符串部分进行转义

encodeURIComponent对整个url进行转义，包括空格、英文冒号、斜杠等

至于decodeURI和decodeURIComponent，只要知道decodeURI和encodeURI是互逆操作，decodeURIComponent和encodeURIComponent是互逆操作就可以了

const searchParams = getSearchParams();    
searchParams.backTo = encodeURIComponent(window.location.href);
    window.location.replace(`/h5/login?${qs.stringify(searchParams)}`);



    if (backTo) {
      const backToUrl = new URL(decodeURIComponent(backTo));
      projectNo = backToUrl.searchParams.get('projectNo') || '';
    }

9.将枚举值数组处理为键值对对象

 const data = res.reduce((memo, item) => {
        memo[item.code] = item.name;
        return memo;
      }, {});