wq-fe-tools v1.0.8

安装

npm i wq-fe-tools --save

引入方式

import { 
    regExp, 
    TypeChange,
    request,
    debounce,
    throttle,
    OperateTrick,
    Order,
    getDataType,  
} from 'wq-fe-tools'

regExp 的示例

import { regExp } from 'wq-fe-tools' // 正则

// 示例：正则-是否有中文
console.log(regExp.hasZh.test('hello你好'))

// 示例：正则-只能输入数字
console.log(regExp.onlyNum.test('12'))

// 示例：正则-仅字母
console.log(regExp.onlyLetter.test('aaa'))

// 示例：正则-仅大写字母
console.log(regExp.onlyUpCaseLetter.test('AAA'))

// 示例：正则-仅字母和数字
console.log(regExp.onlyLetterNum.test('AAA123'))

TypeChange 的示例

import { TypeChange } from 'wq-fe-tools' // 类型转换

// 示例：类型转换-数组转树
const X = new TypeChange()
const arr =  [
    { name: 'node', id: 0, pid: null},
    { name: 'node-1', id: 1, pid: 0},
    { name: 'node-11', id: 11, pid: 1},
    { name: 'node-12', id: 12, pid: 1},
    { name: 'node-2', id: 2, pid: 0},
    { name: 'node-21', id: 21, pid: 2},
    { name: 'node-211', id: 211, pid: 21},
    { name: 'node-22', id: 22, pid: 2}
]
console.log('a.arrToTree({arr})', X.arrToTree({arr}))

// 示例：类型转换-数组的一维转二维
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
console.log(X.arrOneToTwoDimensional(arr2,2))

// 示例：类型转换-树转数组
const tree = {
    name: 'root',
    id: 'root',
    isCheck: 0,
    children: [
        {
            name: 'child1',
            isCheck: 1,
            children: [
                { name: 'grandchild1', id: 'grandchild1',isCheck: 1, children: [] },
                { name: 'grandchild2', id: 'grandchild2', isCheck: 1, children: [] },
            ],
        },
        { name: 'child2', id: 'child2', isCheck: 1, children: [] },
    ],
}
console.log(X.treeToArr({
    tree: tree,
}))

// 示例：按 某字段 === 某值，合并数组里的多棵数
const X = new OperateTrick()
const treeList = [
    {
        name: 'root-1',
        id: 'root-1',
        pid: 0,
        isCheck: 1,
        children: [
            {
                name: 'systemA',
                id: 'systemA',
                pid: 'root-1',
                isCheck: 1,
                children: [
                    {
                        name: 'systemA-menu-1',
                        id: 'systemA-menu-1',
                        pid: 'systemA',
                        isCheck: 1,
                        children: [
                            {
                                name: 'systemA-menu-btn-1',
                                id: 'systemA-menu-btn-1',
                                pid: 'systemA-menu-1',
                                isCheck: 1,
                                children: [],
                            },
                            {
                                name: 'systemA-menu-btn-2',
                                id: 'systemA-menu-btn-2',
                                pid: 'systemA-menu-1',
                                isCheck: 1,
                                children: [],
                            },
                        ],
                    },
                    {
                        name: 'systemA-menu-2',
                        id: 'systemA-menu-2',
                        pid: 'systemA',
                        isCheck: 0,
                        children: [],
                    },
                ],
            },
            {
                name: 'systemB',
                id: 'systemB',
                pid: 'root-1',
                isCheck: 0,
                children: [],
            }
        ],
    },
    {
        name: 'root-2',
        id: 'root-2',
        pid: 0,
        isCheck: 1,
        children: [
            {
                name: 'systemA',
                id: 'systemA',
                pid: 'root-2',
                isCheck: 1,
                children: [
                    {
                        name: 'systemA-menu-3',
                        id: 'systemA-menu-3',
                        pid: 'systemA',
                        isCheck: 1,
                        children: [],
                    },
                ],
            },
            {
                name: 'systemB',
                id: 'systemB',
                pid: 'root-2',
                isCheck: 1,
                children: [
                    {
                        name: 'systemB-menu-1',
                        id: 'systemB-menu-1',
                        pid: 'systemB',
                        isCheck: 1,
                        children: [],
                    },
                    {
                        name: 'systemB-menu-2',
                        id: 'systemB-menu-2',
                        pid: 'systemB',
                        isCheck: 0,
                        children: [],
                    },
                ],
            }
        ],
    },
    {
        name: 'root-3',
        id: 'root-3',
        pid: 0,
        isCheck: 1,
        children: [
            {
                name: 'systemA',
                id: 'systemA',
                pid: 'root-3',
                isCheck: 0,
                children: [],
            },
            {
                name: 'systemB',
                id: 'systemB',
                pid: 'root-3',
                isCheck: 1,
                children: [
                    {
                        name: 'systemB-menu-1',
                        id: 'systemB-menu-1',
                        pid: 'systemB',
                        isCheck: 1,
                        children: [],
                    },
                    {
                        name: 'systemB-menu-2',
                        id: 'systemB-menu-2',
                        pid: 'systemB',
                        isCheck: 0,
                        children: [],
                    },
                ],
            },
            {
                name: 'systemC',
                id: 'systemC',
                pid: 'root-3',
                isCheck: 0,
                children: [],
            },
        ],
    },
    {
        name: 'root-4',
        id: 'root-4',
        pid: 0,
        isCheck: 1,
        children: [
            {
                name: 'systemD',
                id: 'systemD',
                pid: 'root-4',
                isCheck: 1,
                children: [
                    {
                        name: 'systemD-menu-1',
                        id: 'systemD-menu-1',
                        pid: 'systemD',
                        isCheck: 1,
                        children: [],
                    },
                    {
                        name: 'systemD-menu-2',
                        id: 'systemD-menu-2',
                        pid: 'systemD',
                        isCheck: 1,
                        children: [],
                    },
                ],
            },
        ],
    },
]
console.log(X.mergeTreeList({
    treeList: treeList,
    filedLabel: 'isCheck',
    filedValue: 0
}))

request 的示例

import { request } from 'wq-fe-tools' // 网络请求

// 示例：接口请求
async getList() {
    const resp = await request('POST', `https://xxx/xxx/xxx`, {
        pageIndex: 1,
        pageSize: 10
    })
    const end = JSON.parse(resp).data.records.map(item => {
        return {
            gitName: item.gitName,
            projectName: item.projectName,
            gitUrl: item.gitUrl
        }
    })
    console.log(JSON.stringify(end))
}

debounce 的示例

import { debounce } from 'wq-fe-tools' // 防抖

// 示例：防抖
function task() {
    console.log('run task');
}
var debounceTask = debounce(task, 1500)
window.addEventListener('scroll', debounceTask)

throttle 的示例

import { throttle } from 'wq-fe-tools' // 节流

// 示例：节流
function task() {
    console.log('run task')
}
var throttleTask = throttle(task, 1500)
window.addEventListener('scroll', throttleTask)

OperateTrick 的示例

import { OperateTrick } from 'wq-fe-tools' // 数据操作小技巧

// 示例：求数组的中心索引
const Y = new OperateTrick()
console.log(Y.getArrayMidpointIndex(['A', 'B', 'C', 'D', 'E', 'F']))

// 示例：求数组的中心索引
console.log(Y.triangle(5))

// 示例：去除字符串中的html
console.log(Y.removeHtml('<span><a>wuqian</a>hello world</span>'))

// 示例：判断给定日期是否是工作日
console.log(Y.isWeekday(new Date(2023, 8, 31)))

// 示例：判断一个字符串是不是回文数
console.log(Y.isHuiWen('abcdcba'))

// 示例：从数组中移除重复项
console.log(Y.removeRepeatItem([1, 2, 3, 4, 1, 1, 1]))

// 示例：求组数的平均数
console.log(Y.getArrAverage([4, 8, 2, 3, 1]))

// 示例：获取两个整数之间的随机整数
console.log(Y.random(4, 8))

// 示例：求数组交集
console.log(Y.arrOverlap([1, 2, 3, 4, 5], [1, 6, 7, 8, 9]))

// 示例：求数组并集
console.log(Y.arrMerge([1, 2, 3, 4, 5], [1, 6, 7, 8, 9]))

// 示例：判断数组是否有重复项
console.log(Y.arrHasRepeat([1, 2, 3]))

// 示例：求一个字符串内，不含有重复字符的最长子串
console.log(Y.getNoRepeatStr('abcddefg'))

// 示例：去除字符串中的空格
console.log(Y.replaceSpace(' abc def gh', 'HELLO'))

// 示例：反转数组
console.log(Y.reverseArr([1, 2, 3, 4, 5]))

Order 的示例

import { Order } from 'wq-fe-tools' // 排序

const Z = new Order()

// 示例：冒泡排序（每次把最大的放到右边）
console.log(Z.bubble_sort([3, 1, 2, 9, 5, 4]))

// 示例：快速排序（左中右分类、合并）
console.log(Z.quick_sort([1, 9, 2, 8, 3, 4, 2, 1, 1, 1, 9, 9]))

// 示例：选择排序（每次把最小的放到左边）
console.log(Z.selection_sort([1, 3, 2, 7, 4, 5, 6, 8, 7]))

// 示例：插入排序（依次把index插入到左侧的数组正确的位置）
console.log(Z.insertion_sort([1, 3, 2, 7, 4, 5, 6, 8, 7]))

getDataType 的示例

import { getDataType } from 'wq-fe-tools' // 获取数据类型

// 示例：number
console.log(getDataType(1))

// 示例：string
console.log(getDataType(''))

// 示例：object
console.log(getDataType({}))

// 示例：function
console.log(getDataType(()=>{}))

// 示例：date
console.log(getDataType(new Date()))

// 示例：array
console.log(getDataType([]))

// 示例：undefined
console.log(getDataType())

// 示例：null
console.log(getDataType(null))

// 示例：undefined
console.log(getDataType(undefined))