高阶函数、函数重载、typeScript泛型完成进阶渲染

README--文档

## @xn/Convenient/Arrar

 根据函数重载,高阶函数书写.传入对应参数.返回所需值

### 适用场景

- Arrar|object

### 使用文档 

之前前端设计理念:
    ·你需要渲染一个组件
    ·原型设计为，名字:xxx,名字2:xxxx,age:xxxx. 后端给的数据为一个对象，以上三个参数是对象其中一个键 值对,那么正常来说是不是 名字:对象.xxx 名字:对象.xxx 年龄:对象.xxx,如果数据嵌套过深，是不是还得继续链式取值?或者借助loadsh->get方法？这样显得都比较麻烦，或者设计需要你给这个组件添加一个标签，那结构是不是与之前不一致，那肯定需要if判断了对吧。所以之前的这种设计理念的话我换了一种思维，并且利用高阶函数的设计，控制权一部分交给使用者，更灵活
    ·泛型的引入、就可以拥有更多的代码提示，给开发带来了便利

参数解释:

    keyData:
        key:是根据需要取值的数据结构定义，
            列 a,那么就相当于是传入的data.a,
            列 b[0]===data.b[0]  
        name:自定义
        render:接受两个参数，第一个是取值之后的值,第二个是它取值的上一级对象,返回值会传入callback的第一个参数。
        spare:默认值,设置的key值取值后为undefined生效

    callback:回调函数，将每次取值后返回的值交给使用者,参数3,只要有满足函数签名2时才会传入
        参数1:
            根据不同函数签名参入不同值,满足第一个函数签名是当前的便利数组的item，第二个函数签名是keyData中render的 retrun后的返回值
        参数2:
            index 下标，用户可根据这个设置key值
        参数3:
            满足第二个函数签名时会返回,返回的是当前keyData的item，至于为什么返回，比如你想做到我上面说的设计理念使用场景 名字:对象.xxx ，那你直接item.name 就可以拿到你需要的值了
使用场景:

1、传参方式:类型。详见两个重载签名
2、功能一共有两个，第一个与map无异。第二个功能详见下一步步骤demo
2、demo
    2-0、准备data、data数据类型
      type data_type = { a: string, b: string, c: Array<Array<number>> }
    2-1、准备数据结构
    使用泛型后render方法就能推导参数类型了
    const keyData:Array<_DataType<data_type>> = [
  {
    key: "a",
    name: "名字1",
    render: (text, index, item, data) => {
      console.log(item);
      return <div key={index}>{text}</div>
    },
    spare: "-"
  },
  {
    key: "b",
    name: "名字2",
    render: (text, index, item, data) => {
      return <div key={index}>我的名字{text}</div>
    },
    spare: "-"
  },
  {
    key: "c[0][0]",
    name: "年龄",
    render: (text, index, item, data) => {
      return <div key={index}>我的年龄{text}</div>
    },
    spare: "-"
  },
]

    2-2、准备 callback回调函数 
      (v, index, item, data) => {
            return <div key={index}>{item.name}:{v}</div>
      },

    2-3、准备渲染数据 data
    [
      { a: "彭于晏", b: "pyy", c: [[18]] },
      { a: "张三", b: "小张", c: [[17]] }
    ]

    2-4、引入方法调用传入以上数据
    //回调函数都会根据实际情况推导类型
    data是个数组时
    data.map(item=>GetDataFunction(keyData  ,(v, index, item, data) => {
            return <div key={index}>{item.name}:{v}</div>
      },item))

index

interface _GetObjectValueType {
    (
        getData: object,
        structureString: string,
        spare?: _callbackType)
        : _DataBasicType;
};

type callback_one_type = (text: any, index: number) => any

type callback_two_type<T> = (text: any, index: number, item: _DataType<T>, data: T,) => any

export type _DataType<U> = {
    key: string;//对应data的数据结构
    name: string;
    render?: callback_two_type<U>;
    spare?: any;//默认值
    attribute?: {
        className?: string,

    }
};

type _DataBasicType = string | number | boolean | undefined;

type _callbackType = JSX.Element | _DataBasicType;

const GetObjectValue: _GetObjectValueType = (getData, structureString, spare) => structureString.match(/[$\w]+/g)?.reduce((nextValue: any, key) => nextValue?.[key], getData) ?? spare

// 传入一个数组,元素是基本数据类型。会便利数组然后调用callback返回，跟map一致
export function GetDataFunction(param: Array<_DataBasicType>, callback: callback_one_type): Array<any>;

// 传入一个数组对象,会根据数组对象属性,获取data的值,之后返回给callback回调。
export function GetDataFunction<T extends Array<_DataType<U>>, U extends object>(param: T, callback: callback_two_type<U>, data: U): Array<_callbackType>;

export function GetDataFunction<T extends Array<_DataType<U>> | Array<_DataBasicType>, U extends object>(param: T, callback: any, data?: U): Array<_callbackType> {

    if (typeof data == "undefined") return (param as Array<_DataBasicType>).map((item, index) => (callback as callback_one_type)(item, index))
    return (param as Array<_DataType<U>>).map((item, index) => {
        if (item.render) {
            return item.render(
                GetObjectValue(data, item.key, item.spare || undefined),
                index,
                item,
                data
            )
        }
        return (callback as callback_two_type<U>)(
            GetObjectValue(data, item.key, item.spare || undefined),
            index,
            item,
            data
        )
    }
    )
};

demo还有待优化，欢迎各大网友提供意见。(不好之处请指出，求轻喷!!!)另有小群->700469654。欢迎各位大佬和萌新探讨，努力打造一个技术互通的平台