常用的JS方法

高勝山發(fā)布于2019-08-26 10:18 / 840人閱讀

一，判斷當(dāng)前元素是否是數(shù)組

1，通過(guò) constructor 判斷

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

2，通過(guò) instanceof 判斷判斷

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

3，通過(guò) toString 判斷

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

4，isArray 原生方法判斷

Array.isArray()

二，判斷是否是對(duì)象

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

三，判斷環(huán)境

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，判斷是否為移動(dòng)端

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

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

五，常用正則表達(dá)式

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，網(wǎng)址

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

六，對(duì)象的深拷貝

1，對(duì)象

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

2，數(shù)組

可以用Array.slice()，Array.concat()，ES6擴(kuò)展運(yùn)算符...等方法來(lái)實(shí)現(xiàn)

七，結(jié)語(yǔ)

以上大概是目前來(lái)說(shuō)項(xiàng)目中運(yùn)用較多的一些公用方法，可能實(shí)現(xiàn)方法不是最好的，這里僅供參考。還有許多通用的方法，這里只想起這么多了，以后再慢慢補(bǔ)充吧。

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

高勝山

男|高級(jí)講師

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

TA的文章

Linux課程適合0基礎(chǔ)學(xué)嗎？要學(xué)習(xí)哪些內(nèi)容？

閱讀 2984·2021-11-25 09:43
Tokyonline：$79.5/月/2GB內(nèi)存/60GB空間/10TB流量/200Mbps-500

閱讀 3604·2021-11-24 11:13
為什么智能硬件最重要的功能是軟件升級(jí)？

閱讀 3376·2021-10-14 09:42
Hostwinds：機(jī)房托管套餐，月付$8刀起，非托管套餐，月付$5刀起

閱讀 2583·2021-09-23 11:53
網(wǎng)站主機(jī)用什么系統(tǒng)-哪個(gè)主機(jī)管理系統(tǒng)好用？

閱讀 3625·2021-09-22 15:57
RAKsmart：註冊(cè)即送10美金新人紅包?。?！

閱讀 3240·2021-09-02 09:54
談?wù)凱ostCSS

閱讀 3513·2019-08-30 13:47
前端每日實(shí)戰(zhàn)：153# 視頻演示如何用 CSS 和原生 JS 創(chuàng)作一組 tooltip 提示框

閱讀 1652·2019-08-29 16:55

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

資訊專欄INFORMATION COLUMN

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

常用的JS方法

相關(guān)文章

Webpack 常用命令總結(jié)以及常用打包壓縮方法

【underscore.js 源碼解讀】常用類型判斷以及一些有用的工具方法

前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

發(fā)表評(píng)論

0條評(píng)論

高勝山

男|高級(jí)講師

TA的文章

Linux課程適合0基礎(chǔ)學(xué)嗎？要學(xué)習(xí)哪些內(nèi)容？

Tokyonline：$79.5/月/2GB內(nèi)存/60GB空間/10TB流量/200Mbps-500

為什么智能硬件最重要的功能是軟件升級(jí)？

Hostwinds：機(jī)房托管套餐，月付$8刀起，非托管套餐，月付$5刀起

網(wǎng)站主機(jī)用什么系統(tǒng)-哪個(gè)主機(jī)管理系統(tǒng)好用？

RAKsmart：註冊(cè)即送10美金新人紅包?。?！

談?wù)凱ostCSS

前端每日實(shí)戰(zhàn)：153# 視頻演示如何用 CSS 和原生 JS 創(chuàng)作一組 tooltip 提示框

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

常用的JS方法

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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