前端開發(fā)實(shí)用工具類函數(shù)

ZoomQuiet 發(fā)布于2019-08-23 11:56 / 2914人閱讀

摘要：獲取參數(shù)正則法調(diào)用參數(shù)名拆分法獲取中符后的字串調(diào)用參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)參數(shù)后續(xù)會有更多實(shí)用工具函數(shù)。。。。。

抽空整理了一下日常開發(fā)中會經(jīng)常用到的工具函數(shù)

檢測是否是數(shù)組

export default const judgeArr=(arr)=>{
    if(Array.isArray(arr)){
        return true;
    }
}

數(shù)組的”短路運(yùn)算”every和some

情況一:全部滿足
 
export const allTrueArr=(arrs)=>{
  return arr.every((arr)=>{
     return arr>20;//如果數(shù)組的每一項都滿足則返回true,如果有一項不滿足返回false,終止遍歷
  })  
}
 
情況二:有一個滿足
export default const OneTrueArr=(arrs)=>{
  return arr.some((arr)=>{
     return arr>20;//如果數(shù)組有一項滿足則返回true,終止遍歷,每一項都不滿足則返回false
  })  
}

多維數(shù)組轉(zhuǎn)一維

// 遞歸
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)
}, [])

獲取當(dāng)前的時間yyyy-MM-dd HH:mm:ss（沒有滿10就補(bǔ)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]      
}

函數(shù)防抖（debounce）和節(jié)流（throttle）

Debounce
原理:通過重復(fù)調(diào)用函數(shù)，清空定時器，在函數(shù)不再被調(diào)用的時候觸發(fā)一次

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
原理:通過判斷時間間隔、間隔一定的時間頻率調(diào)用函數(shù)

function throttle(fn,delay,duration){
    // fn 待執(zhí)行函數(shù) / 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的作用是將代碼推遲到指定時間執(zhí)行，如果指定時間為0，即setTimeout(f, 0)，那么會立刻執(zhí)行嗎？

答案是不會。因為必須要等到當(dāng)前腳本的同步任務(wù)，全部處理完以后，才會執(zhí)行setTimeout指定的回調(diào)函數(shù)f。也就是說，setTimeout(f, 0)會

在下一輪事件循環(huán)一開始就執(zhí)行。

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

上面代碼先輸出2，再輸出1。因為2是同步任務(wù)，在本輪事件循環(huán)執(zhí)行，而1是下一輪事件循環(huán)執(zhí)行。

總之，setTimeout(f, 0)這種寫法的目的是，盡可能早地執(zhí)行f（放在異步任務(wù)隊列的前面優(yōu)先執(zhí)行），但是并不能保證立刻就執(zhí)行f。

獲取url參數(shù)（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;
}
//調(diào)用
getQueryString ("參數(shù)名")；

        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();

// 調(diào)用
// var 參數(shù)1,參數(shù)2,參數(shù)3,參數(shù)N;
// 參數(shù)1 = Request["參數(shù)1"];
// 參數(shù)2 = Request["參數(shù)2"];
// 參數(shù)3 = Request["參數(shù)3"];
// 參數(shù)N = Request["參數(shù)N"];

后續(xù)會有更多實(shí)用工具函數(shù)。。。。。

云服務(wù)器 GPU云服務(wù)器前端工具函數(shù) 前端開發(fā)工具前端開發(fā)用什么工具類成員函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97716.html

發(fā)表評論

登陸后可評論

0條評論

ZoomQuiet

男|高級講師

我要關(guān)注我要私信

TA的文章

#黑五#DediPath：VPS和混合服務(wù)器永久3.5折，獨(dú)立服務(wù)器$39/月起

閱讀 1324·2021-11-24 10:24
基于Vue3最新標(biāo)準(zhǔn)，實(shí)現(xiàn)后臺前端綜合解決方案MK

閱讀 4166·2021-11-22 15:29
Issues with position fixed & scroll（移動端 fixed

閱讀 1098·2019-08-30 15:53
原生CSS+JS實(shí)現(xiàn)連續(xù)點(diǎn)擊旋轉(zhuǎn)

閱讀 2800·2019-08-30 10:54
一小波DOM騷操作：querySelectorAll和classList

閱讀 1987·2019-08-29 17:26
步步向前之Element-UI

閱讀 1292·2019-08-29 17:08
詳解 CSS 屬性 - 優(yōu)先級問題

閱讀 613·2019-08-28 17:55
Jenkins與Rainbond對接部署應(yīng)用

閱讀 1591·2019-08-26 14:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端開發(fā)實(shí)用工具類函數(shù)

相關(guān)文章

前端面試題（3）現(xiàn)代技術(shù)

前端面試題（3）現(xiàn)代技術(shù)

gitbook: 前端好書推薦

gitbook: 前端好書推薦

gitbook: 前端好書推薦

發(fā)表評論

0條評論

ZoomQuiet

男|高級講師

TA的文章

#黑五#DediPath：VPS和混合服務(wù)器永久3.5折，獨(dú)立服務(wù)器$39/月起

基于Vue3最新標(biāo)準(zhǔn)，實(shí)現(xiàn)后臺前端綜合解決方案MK

Issues with position fixed & scroll（移動端 fixed

原生CSS+JS實(shí)現(xiàn)連續(xù)點(diǎn)擊旋轉(zhuǎn)

一小波DOM騷操作：querySelectorAll和classList

步步向前之Element-UI

詳解 CSS 屬性 - 優(yōu)先級問題

Jenkins與Rainbond對接部署應(yīng)用

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端開發(fā)實(shí)用工具類函數(shù)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！