isObject()等JS開發常用工具函數

1、isPrimitive()

 檢測是不是原始資料類型

JS原始資料類型：Number、String、Boolean、Null、Undefined

let isPrimitive = (value)=> {
    return (
        typeof value === 'string' ||
        typeof value === 'number' ||
        typeof value === 'boolean' ||
        typeof value === 'undefined' ||
        value === null
    )
}           

2、isObject()

判斷資料是不是引用類型

常見的引用類型：Object、Array、Function

let isObject = (value) => {
    return value != null && (typeof value == 'object' || typeof value == 'function')
}           

【注】基本類型和引用類型的差別：基本類型的變量存在棧内，引用類型的值同僚儲存在棧記憶體和堆記憶體的對象；基本類型的比較是值的比較，引用類型的比較是引用的比較；

3、getType()

擷取資料類型

let getType = (value) => {
	return Object.prototype.toString.call(value).slice(8, -1)
}           

4、capitalize()

字元串首位大寫

let capitalize = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1)
}           

5、cloneObj()

克隆對象資料，可深度克隆

let cloneObj = (value, deep) => {
    if(deep) {
        return JSON.parse(JSON.stringify(value));         
    }else {
        return Object.assign({}, value);
    }
}           

6、識别各種浏覽器及平台

let browser = {
    let versions = ()=> {
        var u = navigator.userAgent; //由客戶機發送伺服器的 user-agent 頭部的值
        var app = navigator.appVersion; //浏覽器的平台和版本資訊
        return {
            trident: u.indexOf('Trident') > -1, // IE核心
            persto: u.indexOf('Presto') > -1, //opera核心
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌核心
            gecko: u.indexOf('Gecko') > -1  && u.indexOf('KHTML') == -1, //火狐核心
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動端
            ios: !!u.match(/\i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 && u.indexOf('Linux') > -1, //android終端或UC浏覽器
            iPhone: u.indexOf('iPhone') > -1, //是否為iPhone或者QQHD浏覽器
            iPad: u.indexOf('iPad') > -1, //是否為iPad
            webAPP: u.indexOf('Safari') == -1 //是否web應用程式，沒有頭部與底部
        }
    }();
    let language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

let getBrowser = () => {
    if(browser.versions.mobile) {  //判斷是否在移動裝置打開
        let ua = navigator.userAgent.toLowserCase(); //擷取判斷用的對象
        if(ua.match(/MicroMessenger/i) == "micromessenger") {
            //在微信中打開
        }
        if(ua.match(/WeiBo/i) == "weibo") {
            //在新浪微部落格戶端打開
        }
        if(ua.match(/QQ/i) == "qq") {
            //在QQ空間打開
        }
        if(browser.versions.ios) {
            //在IOS浏覽器打開
        }
        if(browser.versions.android) {
            //在安卓浏覽器打開
        }
    }else {
        //PC浏覽器打開
    }
}           

7、unique()

數組去重，傳回一個新數組

let unique = (arr) => {
    let list = [];
    arr.forEach(el => {
        if(!list.find(i => i == el)) {
            list.push(el);
        }
    })
    return list;
}           

8、Set

類似數組，但所有的元素都是唯一的，沒有重複；

（1）利用Set進行多數組的合并去重：

let arr1 = [1,2,3,4];
let arr2 = [1,2,3,4,5,6];
let setArr = new Set([...arr1, ...arr2]);           

（2）向Set中添加元素：

let set1 = new Set();
set1.add(1);
set1.add(2);
set1.add(3);           

（3）從Set中删除元素

let set1 = new Set();
set1.add(1);
set1.add(2);
set1.add(3);
set1.delete(2);           

（4）判斷元素是否存在

let set1 = new Set();
set1.add(1);
set1.add(2);
set1.add(3);
set1.delete(2);
console.log(set1.has(1), set1.has(2))           

（5）清除所有元素

let set1 = new Set();
set1.add(1);
set1.add(2);
set1.add(3);
set1.clear();           

9、repeat()

生成一個重複的字元串

let repeat = (str, n) => {
    let res = '';
    for(i=0; i<n; i++) {
        res += str;
    }
    return res;
}           

10、dataFormater()

格式化時間

let dateFormater = (formater,t)=> {
    let date = t ? new Date(t) : new Date(),
        Y = date.getFullYear() + '',
        M = date.getMonth() + 1,
        D = date.getDate(),
        H = date.getHours(),
        m = date.getMinutes(),
        s = date.getSeconds();
    return formater.replace(/YYYY|yyyy/g, Y)
        .replace(/YY|yy/g, Y.substr(2, 2))
        .replace(/MM/g, (M < 10 ? '0': '') + M)
        .replace(/DD/g, (D < 10 ? '0': '') + D)
        .replace(/HH|hh/g, (H < 10 ? '0': '') + H)
        .replace(/mm/g, (m < 10 ? '0': '') + m)
        .replace(/ss/g, (s < 10 ? '0': '') + s)
}           

11、getUrlParams()

擷取Url參數，傳回一個對象

let getUrlParams = () => {
    let url = document.location.toString();
    let arrObj = url.split('?');
    let params = {};
    if(arrObj.length > 1) {
        arrObj = arrObj[1].split('&');
        arrObj.forEach(el => {
            el = el.split('=');
            params[el[0]] = el[1];
        })
    }
    return params;
}           

12、toFullScreen()--exitFullScreen()

全屏

let toFullScreen = ()=> {
    let elem = document.body;
    elem.webkitRequestFullScreen 
    ? elem.webkitRequestFullScreen()
    : elem.mozRequestFullScreen
    ? elem.mozRequestFullScreen()
    : elem.msRequestFullscreen
    ? elem.msRequestFullscreen()
    : elem.requestFullScreen
    ? elem.requestFullScreen()
    : alert("浏覽器不支援全屏");
}           

退出全屏

let exitFullScreen = ()=> {
    let elem = document.body;
    elem.webkitCancelFullScreen 
    ? elem.webkitCancelFullScreen()
    : elem.mozCancelFullScreen
    ? elem.mozCancelFullScreen()
    : elem.cancelFullScreen
    ? elem.cancelFullScreen()
    : elem.msExitFullscreen
    ? elem.msExitFullscreen()
    : elem.exitFullscreen
    ? elem.exitFullscreen()
    : alert("切換失敗,可嘗試Esc退出");
}           

13、random()

傳回一個min-max之間的随機數

let random = (min, max) => {
    min = +min || 0;
    max = +max || 0;
    return Math.random() * (max - min) + min;
}           

14、_isNaN()

檢查資料是否為非數值

let _isNaN = (value) => {
    return !(typeof value === 'string' || typeof value === 'number') || isNaN(value);
}           

15、getMax()--getMin()

求數組中非NaN資料的最大值和最小值

let _isNaN = (value) => {
    return !(typeof value === 'string' || typeof value === 'number') || isNaN(value);
}

let getMax = (arr) => {
    arr = arr.filter(el => !_isNaN(el));
    return arr.length ? Math.max.apply(null, arr) : undefined
}

let getMin = (arr) => {
    arr = arr.filter(el => !_isNaN(el));
    return arr.length ? Math.min.apply(null, arr) : undefined
}