• 数组方法的封装/代码的复用加强


    前言

    在编写JavaScript代码的时候存在一些对于数组的方法,可能涉及的页面会很多,然后每次去写一堆代码。长期下去代码会特别的繁多,是时候进行一波封装了,话不多说开始书写优美的代码

    代码已上传github,需要的欢迎star(https://github.com/Xieguoiang...)。


    关于数组一些方法的封装

    1.数组去重

    
    `上文提到的Set的封装`
    //ES6新增的Set数据结构,类似于数组,但是里面的元素都是唯一的 ,其构造函数可以接受一个数组作为参数
    //ES6中Array新增了一个静态方法from,可以把类似数组的对象转换为数组
    //方法二  new 
    function removeRepeatArray(arr){
        return Array.from(new Set(arr))
    }
    
    
    

    2. 数组顺序打乱

    
    function upsetArr(arr){
        return arr.sort(function(){ return Math.random() - 0.5});
    }
    
    
    

    3. 数组最值最

    //这一块的封装,主要是针对数字类型的数组

    
    function maxArr(arr){
        return Math.max.apply(null,arr);
    }
    function minArr(arr){
        return Math.min.apply(null,arr);
    }
    
    
    

    4 数组求和平均值
    这一块的封装,主要是针对数字类型的数组 求商品总价了 求总数了 很常用
    求和

    
    function sumArr(arr){
        var sumText=0;
        for(var i=0,len=arr.length;i<len;i++){
            sumText+=arr[i];
        }
        return sumText
    }
    
    

    平均值,小数点可能会有很多位,这里不做处理 可能你需要保留多少位 自己处理一下吧 ~~

    
    function covArr(arr){
        var sumText=sumArr(arr);
        var covText=sumText/length;
        return covText
    }
    
    

    5从数组中随机获取元素

    
    //类似抽奖了什么的 适应场合很多
    function randomOne(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }
    //randomOne([1,2,3,6,8,5,4,2,6])
    //2
    //randomOne([1,2,3,6,8,5,4,2,6])
    //1
    
    
    

    6返回数组(字符串)一个元素出现的次数

    
    function getEleCount (obj, ele) {
        var num = 0;
        for (var i = 0, len = obj.length; i < len; i++) {
            if (ele == obj[i]) {
                num++;
            }
        }
        return num;
    }
    //getEleCount('asd56+asdasdwqe','a')
    //3
    //getEleCount([1,2,3,4,5,66,77,22,55,22],22)
    //2
    

    ... 就不一一列举 如有需要详情 请移步我的github~~

    字符串以及date日期的封装

    列举3-4个//
    1 去除字符串空格 四种情况
    去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格

    
    function trim(str,type){
        switch (type){
            case 1:return str.replace(/s+/g,"");
            case 2:return str.replace(/(^s*)|(s*$)/g, "");
            case 3:return str.replace(/(^s*)/g, "");
            case 4:return str.replace(/(s*$)/g, "");
            default:return str;
        }
    }
    
    

    2 查找字符串 字段所出现的次数 ~

    
    function countStr (str,strSplit){
        return str.split(strSplit).length-1
    }
    
    
    

    3. 日期的5-7日期日期时间部分到某一个时间的倒计时

    
       function getEndTime(endTime){
        var startDate=new Date();  //开始时间,当前时间
        var endDate=new Date(endTime); //结束时间,需传入时间参数
        var t=endDate.getTime()-startDate.getTime();  //时间差的毫秒数
        var d=0,h=0,m=0,s=0;
        if(t>=0){
          d=Math.floor(t/1000/3600/24);
          h=Math.floor(t/1000/60/60%24);
          m=Math.floor(t/1000/60%60);
          s=Math.floor(t/1000%60);
        } 
        return "剩余时间"+d+"天 "+h+"小时 "+m+" 分钟"+s+" 秒";
    } 
    
    如需更多觉得`用的多的功能的封装`  欢迎留言/ 大家一起`进步`
    
    

    结语

    本文列举了一些常用JS方法的封装,代码拢杂是前端一大弊端,希望大家也可以学习思路,一起封装,一起进步

    goTo--

    欢迎加群Q 614569041 前端方向

    原文地址:https://segmentfault.com/a/1190000012427137#articleHeader4

  • 相关阅读:
    理解SQL查询的底层原理
    Android手机里的垃圾文件和文件夹清理
    从树莓派开始玩电脑
    Oracle 游标使用全解
    oracle获得当前时间,精确到毫秒并指定精确位数
    Oracle存储过程创建及调用
    windows命令行(DOS批处理)添加任务计划
    JS计算字符串的长度
    皮肤和DLL和图片等项目文件完全整合到exe中
    C#中使用Socket实现简单Web服务器
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9962025.html
Copyright © 2020-2023  润新知