资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端开发实用工具类函数

前端开发实用工具类函数

ZoomQuiet / 2813人阅读

摘要：获取参数正则法调用参数名拆分法获取中符后的字串调用参数参数参数参数参数参数参数参数参数参数参数参数后续会有更多实用工具函数。。。。。

抽空整理了一下日常开发中会经常用到的工具函数

检测是否是数组 
export default const judgeArr=(arr)=>{
    if(Array.isArray(arr)){
        return true;
    }
}
数组的”短路运算”every和some 
情况一:全部满足
 
export const allTrueArr=(arrs)=>{
  return arr.every((arr)=>{
     return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
  })  
}
 
情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
  return arr.some((arr)=>{
     return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
  })  
}
多维数组转一维 
// 递归
let newArr = [];

function flatten(arr) {
    for(let i = 0; i < arr.length; i++) {
        if(Array.isArray(arr[i])) {
            flatten(arr[i])
        } else {
            newArr.push(arr[i])
        }
    }
}

// reduce+递归
let arr = [1, [2, [[3, 4], 5], 6]];
const flatten = arr => arr.reduce((total,current) => {
    total.concat(Array.isArray(current) ? flatten(current) : current)
}, [])
获取当前的时间yyyy-MM-dd HH:mm:ss（没有满10就补0） 
export default const obtainDate=()=>{
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day=date.getDate();
  let hours=date.getHours();
  let minu=date.getMinutes();
  let second=date.getSeconds();
  //判断是否满10
  let arr=[month,day,hours,minu,second];
  arr.forEach(item=>{
    item< 10?"0"+item:item;
  })
  return year+"-"+arr[0]+"-"+arr[1]+" "+arr[2]+":"+arr[3]+":"+arr[4]      
}
函数防抖（debounce）和节流（throttle） 
Debounce
原理:通过重复调用函数，清空定时器，在函数不再被调用的时候触发一次

function debounce(method,delay){
    var timer = null;
    return function(){
        vat _that = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(_that,args);
        },delay)
    }
}

Throttle
原理:通过判断时间间隔、间隔一定的时间频率调用函数

function throttle(fn,delay,duration){
    // fn 待执行函数 / delay 定时器延时时间 / duration 间隔时间
    var timer = null;
    var begin = +new Date();
    return function(){
        var _that = this;
        var now = +new Date();
        clearTimeout(timer);
        if(duration){
            if(now - begin >= duration){
                fn.apply(_that,arguments);
                begin = now;
            }
        } else {
            timer = setTimeout(fn,delay);
        }
    }
}
setTimeout(f, 0)

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？

答案是不会。因为必须要等到当前脚本的同步任务，全部处理完以后，才会执行setTimeout指定的回调函数f。也就是说，setTimeout(f, 0)会

在下一轮事件循环一开始就执行。

setTimeout(function () {
  console.log(1);
}, 0);
console.log(2);
// 2
// 1

上面代码先输出2，再输出1。因为2是同步任务，在本轮事件循环执行，而1是下一轮事件循环执行。

总之，setTimeout(f, 0)这种写法的目的是，尽可能早地执行f（放在异步任务队列的前面优先执行），但是并不能保证立刻就执行f。

获取url参数（QueryString） 
正则法：

function getQueryString (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
//调用
getQueryString ("参数名")；

        OR

var getParam = function (name) {
    var search = document.location.search;
    //alert(search);
    var pattern = new RegExp("[?&]" + name + "=([^&]+)", "g");
    var matcher = pattern.exec(search);
    var items = null;
    if (null != matcher) {
        try {
            items = decodeURIComponent(decodeURIComponent(matcher[1]));
        } catch (e) {
            try {
                items = decodeURIComponent(matcher[1]);
            } catch (e) {
                items = matcher[1];
            }
        }
    }
    return items;
};

split拆分法：

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();

// 调用
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request["参数1"];
// 参数2 = Request["参数2"];
// 参数3 = Request["参数3"];
// 参数N = Request["参数N"];

后续会有更多实用工具函数。。。。。

云服务器 服务器托管 前端工具函数 前端开发工具 前端开发用什么工具 类成员函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97716.html

相关文章

  • 前端面试题（3）现代技术

    摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)？ 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页 目标：旨在用为用户提供了更接近本地...

    EasonTyler 评论0 收藏0

  • 前端面试题（3）现代技术

    摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)？ 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页 目标：旨在用为用户提供了更接近本地...

    trigkit4 评论0 收藏0

  • gitbook: 前端好书推荐

    摘要：它大致概述并讨论了前端工程的实践如何学习它，以及在年实践时使用什么工具。目的是每年发布一次内容更新。前端实践第一部分广泛描述了前端工程的实践。对大多数人来说，函数式编程看起来更加自然。 1 Front-End Developer Handbook 2017 地址：https://frontendmasters.com/b... 这是任何人都可以用来了解前端开发实践的指南。它大致概述并...

    Ali_ 评论0 收藏0

  • gitbook: 前端好书推荐

    摘要：它大致概述并讨论了前端工程的实践如何学习它，以及在年实践时使用什么工具。目的是每年发布一次内容更新。前端实践第一部分广泛描述了前端工程的实践。对大多数人来说，函数式编程看起来更加自然。 1 Front-End Developer Handbook 2017 地址：https://frontendmasters.com/b... 这是任何人都可以用来了解前端开发实践的指南。它大致概述并...

    CocoaChina 评论0 收藏0

  • gitbook: 前端好书推荐

    摘要：它大致概述并讨论了前端工程的实践如何学习它，以及在年实践时使用什么工具。目的是每年发布一次内容更新。前端实践第一部分广泛描述了前端工程的实践。对大多数人来说，函数式编程看起来更加自然。 1 Front-End Developer Handbook 2017 地址：https://frontendmasters.com/b... 这是任何人都可以用来了解前端开发实践的指南。它大致概述并...

    Warren 评论0 收藏0

发表评论

登陆后可评论

0条评论

ZoomQuiet

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<