# front-tools-pro

**Repository Path**: xiangrui_frontend/front-tools-pro

## Basic Information

- **Project Name**: front-tools-pro
- **Description**: 希望能打造一个通用的前端工具库，欢迎加入
- **Primary Language**: TypeScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-09-25
- **Last Updated**: 2023-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: tools, front-tools-pro

## README

# front-tools-pro

#### 介绍

希望能打造一个通用的前端工具库，欢迎加入

#### 软件架构

软件架构说明

#### 安装教程

1.  yarn add front-tools-pro
2.  npm install front-tools-pro

#### 使用说明

1.  node 环境 const { sumToList } = require("front-tools-pro");
2.  浏览器 import \* as tools from "front-tools-pro";

#### 参考文档

##### Array 类型的方法

###### 判断是否不是空数组 isNotEmptyArray

- 使用场景
  - 有些时候对想访问数组第 0 的下标有奇效
- 返回值
  - true 或者 false
- 参考示例
  if(isNotEmptyArray(data)){
  // dosomething
  }

###### 处理数据，把空数组变成 null postArray

- 使用场景
  - 对于可以展开的表格，如果 children 是空数组，也会有展开的图标，通过这个方法就可以把空数组变成 null，从而解决没有数据还有展开图标的问题
- 返回值
  - Array
- 参考示例
  const data = postArray(res.data,"children")
  <table>
  <tr>
  <td>参数</td>
  <td>说明</td>
  <td>类型</td>
  <td>默认值</td>
  <td>版本</td>
  </tr>
  <tr>
  <td>第一个参数</td>
  <td>需要改变的数组</td>
  <td>Array</td>
  <td>[]</td>
  <td></td>
  </tr>
  <tr>
  <td>第二个参数</td>
  <td>children的字段名称</td>
  <td>String</td>
  <td>children</td>
  <td></td>
  </tr>
  </table>

###### 对数组的某些字段求和 sumToList

- 使用场景
  - 我们很多时候都需要对数组的一个或多个字段求和，不想一次次的写重复代码，所以这个方法就产生啦
- 返回值
  - 一个对象，key 为求和的字段名，value 是对应的和
- 参考示例
  const {a,b,c}=sumToList({
  origin:[{a:1,b:2,c:3},{a:1,b:2,c:3},{a:1,b:2,c:3}],
  fieldList:["a","b","c"]
  })
  // console.log(a,b,c) 3,6,9
  <table>
  <tr>
  <td>参数</td>
  <td>说明</td>
  <td>类型</td>
  <td>默认值</td>
  <td>版本</td>
  </tr>
  <tr>
  <td>origin</td>
  <td>求和的数组</td>
  <td>Array</td>
  <td>[]</td>
  <td></td>
  </tr>
  <tr>
  <td>fieldList</td>
  <td>求和的字段名</td>
  <td>Array[String]</td>
  <td>不传的时候是纯数字数组求和</td>
  <td></td>
  </tr>
  </table>

###### 从数组中查找返回需要的字段 listFindItemValue

- 使用场景
  - 后端返回的数据中只有 code，没有 name，但是我们页面上需要显示 name，所以需要通过 code 找到数据中的 name 来显示
- 返回值
  - 与 code 对应的你需要的字段
- 参考示例
const result = listFindItemValue({
origin:[{code:"1",name:"张三"},{code:"1",name:"李四"}],
fieldName:"code",
needFieldName:"name",
value:"1"
})
// console.log(result) "张三"
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>origin</td>
 <td>数据源，在哪里找</td>
 <td>Array</td>
 <td>[]</td>
 <td></td>
 </tr>
 <tr>
 <td>fieldName</td>
 <td>对比的字段名称</td>
 <td>String</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>needFieldName</td>
 <td>需要返回的字段名称</td>
 <td>String</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>value</td>
 <td>需要比较的值</td>
 <td>String|Number</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>equal</td>
 <td>是不是全等</td>
 <td>String</td>
 <td>默认==可选===</td>
 <td></td>
 </tr>
 </table>

###### 改变某一行某个字段 changeFieldData

- 使用场景
  - 表格数据中，有些时候只需要改变一个字段的值
- 返回值
  - 改变后的数组
- 参考示例
const result = changeFieldData({
origin:[{code:"1",name:"张三"},{code:"1",name:"李四"}],
fieldName:"code",
fieldValue:"1",
changeFieldName:"name",
changeFieldvalue:"张三丰",
childrenName:"children",
})
// console.log(result) [{code:"1",name:"张三丰"},{code:"1",name:"李四"}]
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>origin</td>
 <td>数据源，在哪里找</td>
 <td>Array</td>
 <td>[]</td>
 <td></td>
 </tr>
 <tr>
 <td>fieldName</td>
 <td>对比的字段名称</td>
 <td>String</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>fieldValue</td>
 <td>对比的字段值</td>
 <td>String|Number</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>changeFieldName</td>
 <td>需要改变的字段名称</td>
 <td>String</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>changeFieldvalue</td>
 <td>需要改变的字段值</td>
 <td>String|Number</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>childrenName</td>
 <td>children字段名称</td>
 <td>String</td>
 <td>适用于treeData</td>
 <td></td>
 </tr>
 </table>

###### 改变某一行数据 changeRowData

- 使用场景
  - 表格数据中，有些时候需要改变多个字段的值，如果用 changeFieldData 就得用好几次，所以就有了这个改变一行的方法
- 返回值
  - 改变后的数组
- 参考示例
const result = changeRowData({
origin:[{code:"1",name:"张三"},{code:"1",name:"李四"}],
fieldName:"code",
rowData:{code:"1",name:"张三丰"},
childrenName:"children",
})
// console.log(result) [{code:"1",name:"张三丰"},{code:"1",name:"李四"}]
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>origin</td>
 <td>数据源，在哪里找</td>
 <td>Array</td>
 <td>[]</td>
 <td></td>
 </tr>
 <tr>
 <td>fieldName</td>
 <td>数据中唯一的字段 比如 id</td>
 <td>String</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>rowData</td>
 <td>一行改造好的数据</td>
 <td>object</td>
 <td></td>
 <td></td>
 </tr>
 <td>childrenName</td>
 <td>children字段名称</td>
 <td>String</td>
 <td>适用于treeData</td>
 <td></td>
 </tr>
 </table>

###### 根据一个数组转换成下拉列表需的数据 listToOptions

- 使用场景
  - 许多下拉列表的数据来源于接口，
- 返回值
  - 组装好的适用于下拉的数据源
- 参考示例
const result = listToOptions({
origin:[{code:"1",name:"张三"},{code:"1",name:"李四"}],
labelVal:"name",
valueVal:"code",
labelKey:"label",
valueKey:"value",
})
// console.log(result) [{code:"1",name:"张三丰",value:"1",label:"张三丰"},{code:"1",name:"李四",value:"1",label:"李四"}]
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>origin</td>
 <td>数据源</td>
 <td>Array</td>
 <td>[]</td>
 <td></td>
 </tr>
 <tr>
 <td>labelVal</td>
 <td>label的值</td>
 <td>String|(item)=>{}</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>valueVal</td>
 <td>value的值</td>
 <td>String|(item)=>{}</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>showAll</td>
 <td>是否显示全部</td>
 <td>Boolean</td>
 <td>false</td>
 <td></td>
 </tr>
 <tr>
 <td>labelKey</td>
 <td>label</td>
 <td>String</td>
 <td>可以根据不同的UI框架调整</td>
 <td></td>
 </tr>
 <tr>
 <td>valueKey</td>
 <td>value</td>
 <td>String</td>
 <td>可以根据不同的UI框架调整</td>
 <td></td>
 </tr>
 <tr>
 <td>emptyTxt</td>
 <td>全部的文字</td>
 <td>String</td>
 <td>全部</td>
 <td></td>
 </tr>
 </table>

###### 根据一个数组转换成 ENUM 类型 listToEnum

- 使用场景
  - 许多下拉列表的数据来源于接口，适用于 antdPro，其他的 UI 没有测试过
- 返回值
  - 组装好的适用于下拉的数据源
- 参考示例
const result = listToEnum({
origin:[{code:"1",name:"张三"},{code:"1",name:"李四"}],
labelName:"name",
valueName:"code",
showAll:false,
})
// console.log(result) [{"1":{text:"张三"}},{"2":{text:"李四"}}]
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>origin</td>
 <td>数据源</td>
 <td>Array</td>
 <td>[]</td>
 <td></td>
 </tr>
 <tr>
 <td>labelName</td>
 <td>label的值</td>
 <td>String|(item)=>{}</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>valueName</td>
 <td>value的值</td>
 <td>String|(item)=>{}</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>showAll</td>
 <td>是否显示全部</td>
 <td>Boolean</td>
 <td>false</td>
 <td></td>
 </tr>

 </table>

###### 适用于对象数组和 treeData 的去重 objListUnique

- 使用场景
  - 对象数组或者 treedata 的数据有重复，但是我们需要的是不重复的时候
- 返回值
  - 处理好的数据
- 参考示例
const result = objListUnique({
origin:[{code:"1",name:"张三"},{code:"1",name:"张三"}],
fieldName:"code",
childrenName:"children",
})
// console.log(result) [{code:"1",name:"张三"}]
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>origin</td>
 <td>数据源</td>
 <td>Array</td>
 <td>[]</td>
 <td></td>
 </tr>
 <tr>
 <td>fieldName</td>
 <td>需要去重的字段</td>
 <td>String</td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>childrenName</td>
 <td>children的字段名</td>
 <td>children</td>
 <td></td>
 <td></td>
 </tr>

 </table>

###### value 数组去重 valListUnique

- 使用场景
  - 对象数组或者 treedata 的数据有重复，但是我们需要的是不重复的时候
- 返回值
  - 处理好的数据
- 参考示例
const result = valListUnique({
origin:["张三","张三","张三丰"],
fieldName:"code",
childrenName:"children",
})
// console.log(result) ["张三","张三丰"]
 <table>
 <tr>
 <td>参数</td>
 <td>说明</td>
 <td>类型</td>
 <td>默认值</td>
 <td>版本</td>
 </tr>
 <tr>
 <td>有且只有一个参数</td>
 <td>数据源</td>
 <td>Array[String|Number]</td>
 <td>[]</td>
 <td></td>
 </tr>

 </table>

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request