一起來聊聊JavaScript的事件委託、判斷URL是否合法及全排列

本篇文章給大家帶來了關於的相關知識，其中主要介紹了事件委託、判斷URL是否合法以及全排列的相關內容，下面一起來看一下，希望對大家有幫助。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

【相關推薦：、】

1、事件委託

效果演示

在這裡插入圖片描述

要求

補全JavaScript程式碼，要求如下：

給"ul"標籤新增點選事件
當點選某"li"標籤時，該標籤內容拼接".「符號。如：某"li"標籤被點選時，該標籤內容為」.."

手撕程式碼

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委託</title></head><body>
    <ul>
        <li>.</li>
        <li>.</li>
        <li>.</li>
    </ul>

    <script type="text/javascript">
        // 補全程式碼
        const ul = document.getElementsByTagName('ul')[0]

        ul.onclick = function (e) {
            const tar = (e || window.event).target            // 如果點選的物件的名稱是li
            // localName 獲取標籤名
            if (tar.localName === 'li') {
                tar.innerHTML = tar.innerHTML + '.'
            }
        }
    </script></body></html>
登入後複製

這道題挺簡單的，事件委託的原理實際就是利用了事件冒泡的機制。

事件冒泡：在一個物件上觸發某類事件（比如單擊click事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件就會向這個物件的父級物件傳播，從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器）

在實際開發中，使用事件委託統一由父類別捕捉並處理事件，這樣可以減少子類事件的重複定義。

2、判斷URL是否合法

要求

補全JavaScript程式碼，要求以Boolean的形式返回字串引數是否為合法的URL格式。

注意：協定僅為HTTP(S)

手撕程式碼

const _isUrl = url => {
    // 補全程式碼
    let reg = /^((https|http):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]{2,6})(:\d+)?(\/.*)?(\?.*)?(#.*)?$/g;
    return reg.test(url)}
登入後複製

這題就是考察了正則的應用，運用了大量的正則知識，包括：

^代表開頭
[A-Za-z0-9]表示匹配大小寫字母和數位
\/表示匹配/，因為在正則裡/有其它含義，所以要匹配/需要在前面使用\對其進行跳脫
? 等價於{0,1}，表示出現一次或者不出現
+表示出現的次數至少為1
|（管道符），是或的意思，表示匹配|兩邊內容的其中任何之一
\.表示匹配.，與/一樣，要匹配.需要在前面使用\對其進行跳脫
{n,m} 表示出現n-m次
\d匹配數位
.就是[^\n\r\u2028\u2029]，是萬用字元，表示幾乎任意字元
*表示出現次數為0次或者多次
.*就是匹配任何多個任意字元
$代表結尾
g代表全域性匹配

合法的URL格式如下：

協定部分http(s)可選: 表示為((https|http):\/\/)?
域名部分：表示為(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+
頂級域名，如com、cn等為2-6位：表示為([a-zA-Z]{2,6})
埠部分：表示為(:\d+)?
請求路徑如/login：表示為 (\/.*)?
問號傳參及雜湊值如?age=1、#dom：表示為 (\?.*)?和(#.*)?

3、全排列

要求

補全JavaScript程式碼，要求以陣列的形式返回字串引數的所有排列組合。
注意：

字串引數中的字元無重複且僅包含小寫字母
返回的排列組合陣列不區分順序

範例：

輸入：_permute('abc')
輸出：['abc','acb','bac','bca','cab','cba']
登入後複製

手撕程式碼

全排列是比較常見的演演算法之一，解法有很多，這裡給大家提供一個很巧妙的解法：

const _permute = string => {
    // 補全代
    const res = []; // 結果陣列
    function search(str) {
    	console.log('1', 'str=' + str);
    	// 如果長度相等了就存放到結果陣列中
        if (str.length === string.length) {
            res.push(str)
        }
        // 遍歷string
        for (let char of string) {
        	console.log('2', 'str=' + str, 'char=' + char);
        	// 如果str內不含char，就使用str+char開始遞迴
            if (str.indexOf(char) < 0) {
                search(str + char)
            }
        }
    }
    search('')
    return  res;}
登入後複製

整體思路就是運用迴圈加遞迴，但這個過程中涉及到了JavaScript中迴圈的執行機制，我們以執行console.log(_permute('ab'));為例檢視控制檯列印結果：

在這裡插入圖片描述

search函數中的for迴圈執行次數與string引數的長度相等，此時傳遞的string引數為ab，長度為2，即search函數中的for迴圈會執行兩次。

這裡需要注意的就是：for迴圈中執行的遞迴（再次呼叫search函數）並不會中斷當前的for迴圈，只會將還未執行的迴圈暫且擱置，等到系統空閒時這些擱置的迴圈才會開始執行（ javascript 引擎在同一時刻只能處理一個任務，即單執行緒），具體過程見下方圖解：

在這裡插入圖片描述

【相關推薦：、】

以上就是一起來聊聊JavaScript的事件委託、判斷URL是否合法及全排列的詳細內容，更多請關注TW511.COM其它相關文章！