常用的JS方法

高勝山發布于2019-08-26 10:18 / 835人閱讀

一，判斷當前元素是否是數組

1，通過 constructor 判斷

function isArray(value) {
    return value && typeof value == "object" && value.constructor === Array
}

2，通過 instanceof 判斷判斷

function isArray(value) {
    return value && typeof value == "object" && value instanceof Array
}

3，通過 toString 判斷

function isArray(value) {
    return Array.isArray(value) || (typeof value == "object" && Object.prototype.toString.call(value) === "[object Array]")
}

4，isArray 原生方法判斷

Array.isArray()

二，判斷是否是對象

function isObject(value) {
    return value != null && typeof value === "object" && Object.prototype.toString.call(value) === "[object Object]"
}

三，判斷環境

1，判斷是否安卓

function isAndroid() {
    return /Android/i.test(navigator.userAgent) || /Linux/i.test(navigator.appVersion);
}

2，判斷是否ios

function isIOS() {
    return (/ipad|iphone/i.test(navigator.userAgent));
}

3，判斷是否是Safari

function isSafari() {
    return (/msie|applewebkit.+safari/i.test(navigator.userAgent));
}

4，判斷是否在微信

function isWeixin() {
    return /MicroMessenger/i.test(navigator.userAgent);
}

5，判斷是否為移動端

function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent) ||
        screen.width < 500;
}

四，按需加載CSS與JS

/**
 * 按需加載js
 * @param {*} path
 */
function delayLoadJS(path) {
    if (!path) {
        return Promise.reject();
    }
    return new Promise((resolve, reject) => {
        let dom = null;
        const scripts = document.querySelectorAll("script");
        for (let item of scripts) {
            if (new RegExp(path).test(item.src)) {
                dom = item;
                onload(dom, () => resolve());
                return;
            }
        }
        if (!dom) {
            const script = document.createElement("script");
            script.src = path;
            script.onload = () => {
                resolve();
                script.onload = null;
            };
            script.onerror = () => reject();
            document.body.appendChild(script);
        }
    });
}

/**
 * 按需加載css
 * @param {*} path
 */
function delayLoadCSS(path) {
    if (!path) {
        return Promise.reject();
    }
    return new Promise((resolve, reject) => {
        let dom = null;
        let links = document.querySelectorAll("link");
        for (let item of links) {
            if (new RegExp(path).test(item.href)) {
                dom = item;
                onload(dom, resolve);
                return;
            }
        }
        if (!dom) {
            const link = document.createElement("link");
            link.rel = "stylesheet";
            link.href = path;
            link.onload = () => {
                resolve();
                link.onload = null;
            };
            link.onerror = () => reject();
            document.head.appendChild(link);
        }
    });
}

/**
 * 解決同時異步加載同一個文件的問題
 * @param {*} dom
 * @param {*} resolve
 */
function onload(dom, resolve) {
    const oldOnload = dom.onload;
    if (oldOnload) {
        dom.onload = () => {
            oldOnload();
            resolve();
        };
    } else {
        resolve();
    }
}

五，常用正則表達式

1，郵箱

function isEmail(email) {
    var r = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    return r.test(email);
}

2，QQ

function isQQ(qq) {
    var r = /^[1-9]d{4,10}$/;
    return r.test(qq);
}

3，網址

function isUrl(str) {
    return /^(((ht)tps?)://)?[w-]+(.[w-]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?$/.test(str);
}

4，身份證

function isCard(str) {
    return /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/.test(str);
}

5，漢字

function isChinese(str) {
    return /^[u4e00-u9fa5]+$/.test(str);
}

6，英文

function isEnglish(str) {
    return /^[a-zA-Z]*$/.test(str);
}

六，對象的深拷貝

1，對象

// 簡單粗暴，一步到位
JSON.parse(JSON.stringify(obj));

2，數組

可以用Array.slice()，Array.concat()，ES6擴展運算符...等方法來實現

七，結語

以上大概是目前來說項目中運用較多的一些公用方法，可能實現方法不是最好的，這里僅供參考。還有許多通用的方法，這里只想起這么多了，以后再慢慢補充吧。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105955.html

Webpack 常用命令總結以及常用打包壓縮方法

摘要：全局安裝初始化默認的文件下載插件到并在文件中加上的配置內容對項目進行打包自動監控文件的改變打包時顯示隱藏的模塊打包時顯示顯示詳細錯誤信息安裝并將該配置到文件中入口出口加載器插件安裝完乘后執行報錯，原因npminstall webpack -g // 全局安裝webpack npminit //初始化默認的package.json文件 npminstall webpack -...

番茄西紅柿 2019-04-23 13:10 評論0 收藏0
【underscore.js 源碼解讀】常用類型判斷以及一些有用的工具方法

摘要：最近開始看源碼，并將源碼解讀放在了我的計劃中。今天就跟大家聊一聊中一些常用類型檢查方法，以及一些工具類的判斷方法。用是否含有屬性來判斷工具類判斷方法接下來看下一些常用的工具類判斷方法。 Why underscore 最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一些著名框架類庫的源碼，就好像和一個個大師對話...

tanglijun 2019-08-19 18:22 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

nevermind 2019-08-30 15:55 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

codecook 2019-08-23 14:52 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

WalkerXu 2019-08-02 14:09 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

widuu 2019-07-01 11:14 評論0 收藏0