總結js經常使用函數和經常使用技巧（持續更新）

時間 2019-11-09

原文原文鏈接

學習和工做的過程當中總結的乾貨，包括經常使用函數、經常使用js技巧、經常使用正則表達式、git筆記等。爲剛接觸前端的童鞋們提供一個簡單的查詢的途徑，也以此來緬懷個人前端學習之路。
PS：此文檔，我會持續更新。
javascript

Ajax請求

jquery ajax函數

我本身封裝了一個ajax的函數，代碼以下：html

var Ajax = function(url, type success, error) {
    $.ajax({
        url: url,
        type: type,
        dataType: 'json',
        timeout: 10000,
        success: function(d) {
            var data = d.data;
            success && success(data);
        },
        error: function(e) {
            error && error(e);
        }
    });
};
// 使用方法：
Ajax('/data.json', 'get', function(data) {
    console.log(data);
});

jsonp方式

有時候咱們爲了跨域，要使用jsonp的方法，我也封裝了一個函數：前端

function jsonp(config) {
    var options = config || {};   // 須要配置url, success, time, fail四個屬性
    var callbackName = ('jsonp_' + Math.random()).replace(".", "");
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oHead.appendChild(oScript);
    window[callbackName] = function(json) {  //建立jsonp回調函數
        oHead.removeChild(oScript);
        clearTimeout(oScript.timer);
        window[callbackName] = null;
        options.success && options.success(json);   //先刪除script標籤，實際上執行的是success函數
    };
    oScript.src = options.url + '?' + callbackName;    //發送請求
    if (options.time) {  //設置超時處理
        oScript.timer = setTimeout(function () {
            window[callbackName] = null;
            oHead.removeChild(oScript);
            options.fail && options.fail({ message: "超時" });
        }, options.time);
    }
};
// 使用方法：
jsonp({
    url: '/b.com/b.json',
    success: function(d){
        //數據處理
    },
    time: 5000,
    fail: function(){
        //錯誤處理
    }       
});

經常使用正則驗證表達式

手機號驗證

var validate = function(num) {
    var exp = /^1[3-9]\d{9}$/;
    return exp.test(num);
};

身份證號驗證

var exp = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;

ip驗證

var exp = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;

經常使用js函數

返回頂部

$(window).scroll(function() {
    var a = $(window).scrollTop();
    if(a > 100) {
        $('.go-top').fadeIn();
    }else {
        $('.go-top').fadeOut();
    }
});
$(".go-top").click(function(){
    $("html,body").animate({scrollTop:"0px"},'600');
});

阻止冒泡

function stopBubble(e){
    e = e || window.event;  
    if(e.stopPropagation){
        e.stopPropagation();  //W3C阻止冒泡方法  
    }else {  
        e.cancelBubble = true; //IE阻止冒泡方法  
    }  
}

所有替換replaceAll

var replaceAll = function(bigStr, str1, str2) {  //把bigStr中的全部str1替換爲str2
    var reg = new RegExp(str1, 'gm');
    return bigStr.replace(reg, str2);
}

獲取瀏覽器url中的參數值

var getURLParam = function(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};

深度拷貝對象

function cloneObj(obj) {
    var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
    for(var key in obj){
        if(o[key] != obj[key] ){
            if(typeof(obj[key]) == 'object' ){
                o[key] = mods.cloneObj(obj[key]);
            }else{
                o[key] = obj[key];
            }
        }
    }
    return o;
}

數組去重

var unique = function(arr) {
    var result = [], json = {};
    for (var i = 0, len = arr.length; i < len; i++){
        if (!json[arr[i]]) {
            json[arr[i]] = 1;
            result.push(arr[i]);  //返回沒被刪除的元素
        }
    }
    return result;
};

判斷數組元素是否重複

var isRepeat = function(arr) {  //arr是否有重複元素
    var hash = {};
    for (var i in arr) {
        if (hash[arr[i]]) return true;
        hash[arr[i]] = true;
    }
    return false;
};

生成隨機數

function randombetween(min, max){
    return min + (Math.random() * (max-min +1));
}

操做cookie

own.setCookie = function(cname, cvalue, exdays){
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = 'expires='+d.toUTCString();
    document.cookie = cname + '=' + cvalue + '; ' + expires;
};
own.getCookie = function(cname) {
    var name = cname + '=';
    var ca = document.cookie.split(';');
    for(var i=0; i< ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return '';
};

知識技巧總結

數據類型

underfined、null、0、false、NaN、空字符串。他們的邏輯非結果均爲true。java

閉包格式

好處：避免命名衝突（全局變量污染）。jquery

(function(a, b) {
    console.log(a+b);  //30
})(10, 20);

截取和清空數組

var arr = [12, 222, 44, 88];
arr.length = 2;   //截取，arr = [12, 222];  
arr.length = 0;   //清空，arr will be equal to [].

獲取數組的最大最小值

var numbers = [5, 45822, 120, -215];
var maxInNumbers = Math.max.apply(Math, numbers);   //45822
var minInNumbers = Math.min.apply(Math, numbers);   //-215

浮點數計算問題

0.1 + 0.2 == 0.3   //false

爲何呢？由於0.1+0.2等於0.30000000000000004。JavaScript的數字都遵循IEEE 754標準構建，在內部都是64位浮點小數表示。能夠經過使用toFixed()來解決這個問題。git

數組排序sort函數

var arr = [1, 5, 6, 3];    //數字數組
arr.sort(function(a, b) {
    return a - b;   //從小到大排
    return b - a;   //從大到小排
    return Math.random() - 0.5;   //數組洗牌
});

var arr = [{   //對象數組
    num: 1,
    text: 'num1'
}, {
    num: 5,
    text: 'num2'
}, {
    num: 6,
    text: 'num3'
}, {
    num: 3,
    text: 'num4'
}];   
arr.sort(function(a, b) {
    return a.num - b.num;   //從小到大排
    return b.num - a.num;   //從大到小排
});

對象和字符串的轉換

var obj = {a: 'aaa', b: 'bbb'};
var objStr = JSON.stringify(obj);    // "{"a":"aaa","b":"bbb"}"
var newObj = JSON.parse(objStr);     // {a: "aaa", b: "bbb"}

git筆記

git使用以前的配置

1.git config --global user.email xxx@163.com
2.git config --global user.name xxx
3.ssh-keygen -t rsa -C xxx@163.com(郵箱地址)      // 生成ssh
4.找到.ssh文件夾打開，使用cat id_rsa.pub    //打開公鑰ssh串
5.登錄github，settings － SSH keys  － add ssh keys （把上面的內容所有添加進去便可）

說明：而後這個郵箱（xxxxx@gmail.com）對應的帳號在github上就有權限對倉庫進行操做了。能夠盡情的進行下面的git命令了。github

git經常使用命令

一、git config user.name  /  user.email     //查看當前git的用戶名稱、郵箱
二、git clone https://github.com/jarson7426/javascript.git  project  //clone倉庫到本地。
三、修改本地代碼，提交到分支:  git add file   /   git commit -m 「新增文件」
四、把本地庫推送到遠程庫:  git push origin master
五、查看提交日誌：git log -5
六、返回某一個版本：git reset --hard 123
七、分支：git branch / git checkout name  / git checkout -b dev
八、合併name分支到當前分支：git merge name   /   git pull origin
九、刪除本地分支：git branch -D name
十、刪除遠程分支： git push origin  :daily/x.x.x
十一、git checkout -b mydev origin/daily/1.0.0    //把遠程daily分支映射到本地mydev分支進行開發
十二、合併遠程分支到當前分支 git pull origin daily/1.1.1
1三、發佈到線上：
    git tag publish/0.1.5
    git push origin publish/0.1.5:publish/0.1.5
1四、線上代碼覆蓋到本地：
    git checkout --theirs build/scripts/ddos
    git checkout --theirs src/app/ddos