简易js函数库

    更新时间: 2022-10-20 12:04:16
    点击量: 654
    标签: uni-appjs前端

    简介:常用的简单js函数封装、简单克隆、节流、防抖、字母数字汉字排序、随机数、数字范围判断、随机字符串、传参生成&解析、数组数组、数组取值、数组去重。 纯js包,无依赖, 也可适用于非uni-app项目,环境满足es6标准即可

    文章均为个人原创, 搬运请附上原文地址感谢, 原文来自MasterYi博客
    常用的简单js函数封装、简单克隆、节流、防抖、字母数字汉字排序、随机数、数字范围判断、随机字符串、传参生成&解析、数组数组、数组取值、数组去重。 纯js包,无依赖, 也可适用于非uni-app项目,环境满足es6标准即可
    下载地址

    如何引用

    可以采用下方方式全局引入,也可以使用时再引用

    // #ifdef VUE2
    import Vue from 'vue'
    import App from './App'
    import yi from './js_sdk/yi-util/yi.js'
    Vue.prototype.yi = yi;
    const app = new Vue({ ...App })
    app.$mount()
    // #endif
    
    // #ifdef VUE3
    import App from './App'
    import {createSSRApp } from 'vue'
    import yi from './js_sdk/yi-util/yi.js'
    export function createApp() {
        const app = createSSRApp(App)
        app.config.globalProperties.yi = yi;
        return { app }
    }
    // #endif

    简单克隆

    简单克隆支持number, string, array, json (无法克隆buffer, 方法)

    函数名称: clone(data)
    添加版本: v1.0.0
    参数:

    • [data] : 支持number, string, array, json (无法克隆buffer, 方法, 对象)

    返回值:data

    let arr = {a: 1, b: 2};
    let arr_clone = this.yi.clone(arr);
    arr_clone.b = 4;
    console.log(arr, arr_clone); // {a: 1, b: 2}, {a: 1, b: 4}

    防抖函数

    调用函数后延迟设定时间再触发函数, 若在延迟时间未到达时再次调用函数则时间重置, 用户无动作超过设定时间后才执行被包裹的fn

    函数名称: debounce(fn, wait)
    添加版本: v1.0.0
    参数

    • [fn] : 需要被设定防抖的函数
    • [wait] : 单位毫秒,延迟触发的时间

    返回值:函数

    <template>
        <view>
            <input placeholder="查询" @input="(e) => change(e)"/>
        </view>
    </template>
    
    <script>
        export default {
            onLoad() {
                this.change = this.yi.debounce(this.change, 500);
            },
            methods: {
                change(e){
                    console.log(e.detail.value);
                }
            }
        };
    </script>
    
    <style>
        input {
            width: 500rpx;
            height: 80rpx;
            line-height: 80rpx;
            border: 1px solid #000;
            border-radius: 12rpx;
            margin: 100rpx auto;
        }
    </style>

    节流函数

    节流表示在设定时间最多执行一次fn

    函数名称: throttle(fn, wait)
    添加版本: v1.0.0
    参数

    • [fn] : 需要被设定节流的函数
    • [wait] : 需要节流的毫秒

    返回值:函数

    let func = this.yi.throttle((n) => {
        console.log(n)
    }, 500);
    let n = 0;
    setInterval(() => {
        n++;
        func(n);
    }, 100)

    组成GET字符串

    组成GET传参字符串, 会进行encodeURIComponent

    函数名称: composeQueryString(obj, encode = true)
    添加版本: v1.0.0
    参数

    • [obj] : 键值对
    • [encode] : 默认true, 是否进行encodeURIComponent

    返回值:string

    console.log(this.yi.composeQueryString({a: 1, b: 2, c: 'xx'})); // a=1&b=2&c=xx
    console.log(this.yi.composeQueryString({name: '老刘', age: 25})); // name=%E8%80%81%E5%88%98&age=25
    console.log(this.yi.composeQueryString({name: '老刘', age: 25}, false)); // name=老刘&age=25

    解析GET字符串

    解析GET传参,会decodeUrl

    函数名称: parseQueryString(str)
    添加版本: v1.0.0
    参数

    • [str] : 键值对

    返回值:object

    console.log(this.yi.parseQueryString('https://www.example.com/api?key1=value1&key2=value2')) // {key1: "value1", key2: "value2"}
    console.log(this.yi.parseQueryString('name=%E8%80%81%E5%88%98&age=25')) // {name: "老刘", age: "25"}

    随机字符串

    生成随机字符串,使用大小写字母和数字生成一个随机的字符串

    函数名称: randomString(len = 20, special = false)
    添加版本: v1.0.0
    参数

    • [len] : 字符串长度
    • [special] : 字符串的随机内容是否加上特殊字符 !$%&*@#_~

    返回值:string

    console.log(this.yi.randomString(20)); // 在大小写字母&数字中取值生成长度为20的随机字符串
    console.log(this.yi.randomString(10)); // 在大小写字母&数字中取值生成长度为10的随机字符串
    console.log(this.yi.randomString(20, true)); // 在大小写字母&数字&特殊符号中取值生成长度为20的随机字符串

    随机整数

    生成随机的整数, 支持负数

    函数名称: random(min, max)
    添加版本: v1.0.0
    参数

    • [min] : number 最小值
    • [max] : number 最大值

    返回值:number

    console.log(this.yi.random(0, 10)) // 生成0~10之间的整数 包含0和10
    console.log(this.yi.random(10, 30)) // 生成10~30之间的整数 包含10和30
    console.log(this.yi.random(-10, 0)) // 生成-10~0之间的整数 包含-10和0

    判断数值范围

    判断n的值是否在min~max之间,不包含min和max,判断公式为 n > min && n < max

    函数名称: inRange(n, min, max)
    添加版本: v1.0.0
    参数

    • [n] : number 需要判断的参数
    • [min] : number 最小值
    • [max] : number 最大值

    返回值:bool

     console.log(this.yi.inRange(5, 0, 10)) // true
     console.log(this.yi.inRange(0, 0, 10)) // false
     console.log(this.yi.inRange(-1, 0, 10)) // false

    生成数字数组

    生成一个纯数字数组,从start开始递增len次的数组

    函数名称: numberArray(len, start = 0)
    添加版本: v1.0.0
    参数

    • [len] : number 数组的长度
    • [start] : number 开始值, 默认0

    返回值:array

    console.log(this.yi.numberArray(10, 0)) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(this.yi.numberArray(5, 0)) // [0, 1, 2, 3, 4]
    console.log(this.yi.numberArray(10, 5)) // [5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

    数组去重

    只支持一维数组,不支持二维

    函数名称: uniqueArray(arr)
    添加版本: v1.0.0
    参数

    • [arr] : 需要去重的数组

    返回值:array

    console.log(this.yi.uniqueArray([1, 2, 3, 3, 4, 1, 5])) // [1, 2, 3, 4, 5]
    console.log(this.yi.uniqueArray(['你好', '打工', '打工', '不想打工', '命苦', '命苦', '命苦'])) // ["你好", "打工", "不想打工", "命苦"]

    取最后一个值

    取最后一个值, 支持(数组、对象、数字、字符串)

    函数名称: last(input)
    添加版本: v1.0.0
    参数

    • [input] : 数组、对象、数字、字符串

    返回值:string

    console.log(this.yi.last([{name: '小红'}, {name: '小明'}])) // {name: '小明'}

    排序函数

    支持字符串和一维数组

    函数名称: sort(input, order = 'asc')
    添加版本: v1.0.0
    参数

    • [input] : 字符串、一维数组
    • [order] : asc | desc

    返回值:input

    console.log(this.yi.sort(['apple', 'orange', 'banana', 'pear'])) // ["apple", "banana", "orange", "pear"]
    console.log(this.yi.sort(['apple', 'orange', 'banana', 'pear'], 'desc')) // ["pear", "orange", "banana", "apple"]
    console.log(this.yi.sort([ '苹果', '霸气', '啊', '香蕉', '橘子', '梨'])) // ["啊", "霸气", "橘子", "梨", "苹果", "香蕉"]
    console.log(this.yi.sort([ '苹果', '霸气', '啊', '香蕉', '橘子', '梨'], 'desc')) // ["香蕉", "苹果", "梨", "橘子", "霸气", "啊"]
    console.log(this.yi.sort([1, 8, 5, 7, 9])) // [1, 5, 7, 8, 9]
    console.log(this.yi.sort([1, 8, 5, 7, 9], 'desc')) // [9, 8, 7, 5, 1]
    console.log(this.yi.sort('18579', 'desc')) // 98751
    console.log(this.yi.sort('acxabdc212', 'desc')) // xdccbaa221