ユーティリティ関数: 1. デジタルオペレーション(1)指定された範囲内で乱数を生成する(2)千の位の区切りエクスポートconstフォーマット = (n) => { num = n.toString() とします。 len = num.length;とします。 長さ<= 3の場合{ 数値を返します。 } それ以外 { temp = '' とします。 残りを len % 3 とします。 if (remainder > 0) { // 3 の整数倍ではない return num.slice(0, remainder) + ',' + num.slice(remainder, len).match(/\d{3}/g).join(',') + temp; } else { // 3 の整数倍 return num.slice(0, len).match(/\d{3}/g).join(',') + temp; } } } 2. 配列操作(1)配列の順序が間違っているエクスポートconst arrScrambling = (arr) => { (i = 0 とします; i < arr.length; i++) { const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i; [arr[i], arr[ランダムインデックス]] = [arr[ランダムインデックス], arr[i]]; } arr を返します。 } (2)配列の平坦化エクスポートconstflatten = (arr) => { 結果 = [] とします。 for(let i = 0; i < arr.length; i++) { Array.isArray(arr[i]) の場合 結果 = result.concat(flatten(arr[i])); } それ以外 { 結果をpush(arr[i]); } } 結果を返します。 } (3)配列から乱数を得るエクスポート const sample = arr => arr[Math.floor(Math.random() * arr.length)]; 3. 文字列操作(1)ランダムな文字列を生成するエクスポートconst randomString = (len) => { 文字を 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789' とします。 strLen = chars.lengthとします。 randomStr = '' とします。 (i = 0; i < len; i++) の場合 { randomStr += chars.charAt(Math.floor(Math.random() * strLen)); } randomStr を返します。 }; (2)文字列の最初の文字を大文字にするエクスポートconst fistLetterUpper = (str) => { str.charAt(0).toUpperCase() + str.slice(1); を返します。 }; (3)携帯電話番号の真ん中の4桁は*エクスポートconst telFormat = (tel) => { tel = 文字列(tel); tel.substr(0,3) + "****" + tel.substr(7)を返します。 }; (4)キャメルケース名をハイフンケース名に変換するエクスポートconst getKebabCase = (str) => { str.replace(/[AZ]/g, (item) => '-' + item.toLowerCase()) を返します } (5)ハイフン名をキャメルケース名に変換するエクスポートconst getCamelCase = (str) => { str.replace( /-([az])/g, (i, item) => item.toUpperCase()) を返します } (6)全角を半角に変換するエクスポートconst toCDB = (str) => { 結果 = "" とします。 (i = 0 とします; i < str.length; i++) { コード = str.charCodeAt(i); コード >= 65281 && コード <= 65374 の場合 { 結果 += String.fromCharCode(str.charCodeAt(i) - 65248); } そうでない場合 (コード == 12288) { 結果 += String.fromCharCode(str.charCodeAt(i) - 12288 + 32); } それ以外 { 結果 += str.charAt(i); } } 結果を返します。 } (7)半角を全角に変換するエクスポートconst toDBC = (str) => { 結果 = "" とします。 (i = 0 とします; i < str.length; i++) { コード = str.charCodeAt(i); コード >= 33 && コード <= 126 の場合 { 結果 += String.fromCharCode(str.charCodeAt(i) + 65248); } そうでない場合 (コード == 32) { 結果 += String.fromCharCode(str.charCodeAt(i) + 12288 - 32); } それ以外 { 結果 += str.charAt(i); } } 結果を返します。 } 4. フォーマット変換(1)数字を大文字に変換するエクスポートconst digitUppercase = (n) => { const fraction = ['角度', '分']; 定数数字 = [ 「ゼロ」、「1」、「2」、「3」、「4」、 「5」、「6」、「7」、「8」、「9」 ]; 定数ユニット = [ ['元', '10,000', '1億'], ['', '拾', '佰', '千'] ]; n = Math.abs(n); s = '' とします。 (i = 0 とします; i < fraction.length; i++) { s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ''); } s = s || '全体'; n = Math.floor(n); (i = 0 とします; i < unit[0].length && n > 0; i++) { p = '' とします。 (j = 0; j < unit[1].length && n > 0; j++) の場合 { p = 数字[n % 10] + 単位[1][j] + p; n = Math.floor(n / 10); } s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s; } s.replace(/(零.)*零元/, '元') を返します .replace(/(零.)+/g, '零') .replace(/^whole$/, 'ゼロ元全体'); }; (2)数字を漢数字に変換するエクスポート const intToChinese = (値) => { const str = 文字列(値); 定数len = str.length-1; const idxs = ['','十','一百','千','十万','十','一百','千','亿','十','一百','千','十万','十','百','千','亿']; const num = ['0','1','2','3','4','5','6','7','8','9']; str.replace(/([1-9]|0+)/g, ( $, $1, idx, full) を返す => { pos = 0 とします。 $1[0] !== '0' の場合{ pos = 長さ-idx; if(idx == 0 && $1[0] == 1 && idxs[len-idx] == '十'){ idxs[len-idx]を返します。 } num[$1[0]] + idxs[len-idx]を返します。 } それ以外 { left = len - idx とします。 right = len - idx + $1.length とします。 (Math.floor(右 / 4) - Math.floor(左 / 4) > 0) の場合 { pos = 左 - 左 % 4; } if(pos){ idxs[pos] + num[$1[0]]を返します。 } そうでない場合(idx + $1.length >= len){ 戻る ''; }それ以外 { num[$1[0]]を返す } } }); } 5. 運用ストレージ(1) ストレージ localStorageエクスポートconst localStorageSet = (キー、値) => { if (!key) 戻り値: if (typeof value !== 'string') { 値 = JSON.stringify(値); } window.localStorage.setItem(キー、値); }; (2)localStorageを取得するエクスポートconst localStorageGet = (キー) => { if (!key) 戻り値: window.localStorage.getItem(キー) を返します。 }; (3)localStorageを削除するエクスポートconst localStorageRemove = (キー) => { if (!key) 戻り値; window.localStorage.removeItem(キー); }; (4) セッションストレージエクスポートconst sessionStorageSet = (キー、値) => { if (!key) 戻り値; if (typeof value !== 'string') { 値 = JSON.stringify(値); } window.sessionStorage.setItem(キー、値) }; (5) セッションストレージを取得するエクスポートconst sessionStorageGet = (キー) => { if (!key) 戻り値; window.sessionStorage.getItem(キー) を返します。 }; (6)セッションストレージを削除するエクスポートconst sessionStorageRemove = (キー) => { if (!key) 戻り値; window.sessionStorage.removeItem(キー) }; 6. 運用クッキー(1)クッキーの設定エクスポートconst setCookie = (キー、値、有効期限) => { 定数d = 新しいDate(); d.setDate(d.getDate() + 有効期限) document.cookie = `${key}=${value};expires=${d.toUTCString()}` }; (2)クッキーの読み取りエクスポートconst getCookie = (キー) => { クッキーをエスケープ解除します。 クッキーを分割します。 cookieValue を '' とします。 (i = 0 とします; i < arr.length; i++) { 定数temp = arr[i].split('='); if (temp[0] === キー) { クッキー値 = temp[1]; 壊す } } cookieValueを返す }; (3)クッキーの削除エクスポートconst delCookie = (キー) => { document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}` }; 7. フォーマットチェック(1)身分証明書番号の確認エクスポート const checkCardNo = (値) => { reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ とします。 reg.test(値)を返します。 }; (2)中国語が含まれているか確認するエクスポート const haveCNChars => (値) => { /[\u4e00-\u9fa5]/.test(値)を返します。 } (3)中国本土の郵便番号か確認するエクスポート const isPostCode = (値) => { /^[1-9][0-9]{5}$/.test(value.toString()); を返します。 } (4)IPv6アドレスかどうかを確認するエクスポートconst isIPv6 = (str) => { ブール値を返します(str.match(/:/g)?str.match(/:/g).length<=7:false && /::/.test(str)?/^([\da-f]{1,4}(:|::)){1,6}[\da-f]{1,4}$/i.test(str):/^([\da-f]{1,4}:){7}[\da-f]{1,4}$/i.test(str)); } (5)メールアドレスであるかどうかを確認するエクスポートconst isEmail = (値) { /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(値) を返します。 } (6)中国本土の携帯電話番号であるかどうかを確認するエクスポートconst isTel = (値) => { /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value.toString()); を返します。 } (7)絵文字表現が含まれているか確認するエクスポート const isEmojiCharacter = (値) => { 値 = 文字列(値); (i = 0 とします; i < value.length; i++) { 定数 hs = value.charCodeAt(i); 0xd800 <= hs && hs <= 0xdbffの場合{ (値の長さ>1)の場合{ 定数ls = value.charCodeAt(i + 1); 定数uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000; (0x1d000 <= uc && uc <= 0x1f77f)の場合{ true を返します。 } } } それ以外の場合 (値の長さ > 1) { 定数ls = value.charCodeAt(i + 1); (ls == 0x20e3)の場合{ true を返します。 } } それ以外 { (0x2100 <= hs && hs <= 0x27ff)の場合{ true を返します。 } そうでない場合 (0x2B05 <= hs && hs <= 0x2b07) { true を返します。 } そうでない場合 (0x2934 <= hs && hs <= 0x2935) { true を返します。 } そうでない場合 (0x3297 <= hs && hs <= 0x3299) { true を返します。 } そうでない場合 (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030 || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b || hs == 0x2b50) { true を返します。 } } } false を返します。 } 8. URLの操作(1)URLパラメータリストを取得するエクスポートconst GetRequest = () => { url = location.search; とします。 const paramsStr = /.+\?(.+)$/.exec(url)[1]; // ? の後の文字列を取得します。const paramsArr = paramsStr.split('&'); // 文字列を & で分割し、配列に格納します。let paramsObj = {}; // オブジェクトにパラメータを保存します paramsArr.forEach(param => { if (/=/.test(param)) { // 値を持つパラメータを処理する let [key, val] = param.split('='); // キーと値を分割する val = decodeURIComponent(val); // Decodeval = /^\d+$/.test(val) ? parseFloat(val) : val; // 数値に変換されるかどうかを判断しますif (paramsObj.hasOwnProperty(key)) { // オブジェクトにキーがある場合は、値を追加しますparamsObj[key] = [].concat(paramsObj[key], val); } else { // オブジェクトにこのキーがない場合は、キーを作成して値を設定します。 paramsObj[key] = val; } } else { // 値のないパラメータを処理する paramsObj[param] = true; } }) paramsObj を返します。 }; (2)URLが有効か確認するエクスポートconst getUrlState = (URL) => { xmlhttp を新しい ActiveXObject("microsoft.xmlhttp") にします。 xmlhttp.Open("GET", URL, false); 試す { xmlhttp.Send(); } キャッチ (e) { ついに 結果を xmlhttp.responseText とします。 if (結果) { xmlhttp.Status == 200 の場合 { true を返します。 } それ以外 { false を返します。 } } それ以外 { false を返します。 } } } (3)キーと値のペアはURLパラメータに連結されるエクスポートconst params2Url = (obj) => { パラメータ = [] とする for (let key in obj) { パラメータをプッシュします(`${key}=${obj[key]}`); } encodeURIComponent(params.join('&')) を返します } (4)URLのパラメータを変更するエクスポート const replaceParamVal => (paramName, replaceWith) { const oUrl = location.href.toString(); const re = eval('/('+ paramName+'=)([^&]*)/gi'); location.href = oUrl.replace(re,paramName+'='+replaceWith); location.href を返します。 } (5)URL内の指定されたパラメータを削除するエクスポートconst funcUrlDel = (名前) => { const baseUrl = location.origin + location.pathname + "?"; 定数クエリ = location.search.substr(1); クエリのインデックスが名前よりも-1の場合 定数obj = {}; クエリを分割します。 (i = 0 とします; i < arr.length; i++) { arr[i] = arr[i].split("="); obj[arr[i][0]] = arr[i][1]; } obj[名前]を削除します。 baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&"); を返します。 } } 9. 装備の判断(1)モバイルデバイスかPCデバイスかを判断するエクスポートconst isMobile = () => { if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) { 'モバイル' を返します。 } 'デスクトップ' を返します。 } (2)Apple製かAndroid製かを判断するエクスポートconst isAppleMobileDevice = () => { reg = /iphone|ipod|ipad|Macintosh/i とします。 reg.test(navigator.userAgent.toLowerCase()) を返します。 } (3)Androidモバイルデバイスであるかどうかを判断するエクスポートconst isAndroidMobileDevice = () => { /android/i.test(navigator.userAgent.toLowerCase()) を返します。 } (4)WindowsかMacかを判断するエクスポートconst osType = () => { 定数エージェント = navigator.userAgent.toLowerCase(); const isMac = /macintosh|mac os x/i.test(navigator.userAgent); const isWindows = agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0 || agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0; if (isWindows) { 「windows」を返します。 } if(isMac){ 「mac」を返します。 } } (5)WeChat/QQ内蔵ブラウザかどうか確認するエクスポートconstブラウザ=()=> { 定数 ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "マイクロメッセンジャー") { 「weixin」を返します。 } そうでない場合 (ua.match(/QQ/i) == "qq") { 「QQ」を返します。 } false を返します。 } (6)ブラウザのモデルとバージョンエクスポートconst getExplorerInfo = () => { t = navigator.userAgent.toLowerCase() とします。 0 <= t.indexOf("msie") を返す? { //ie < 11 タイプ: "IE", バージョン: Number(t.match(/msie ([\d]+)/)[1]) } : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? { // つまり 11 タイプ: "IE", バージョン: 11 } : 0 <= t.indexOf("edge") ? { タイプ:「エッジ」、 バージョン: Number(t.match(/edge\/([\d]+)/)[1]) } : 0 <= t.indexOf("firefox") ? { タイプ: "Firefox", バージョン: Number(t.match(/firefox\/([\d]+)/)[1]) } : 0 <= t.indexOf("chrome") ? { タイプ: "Chrome", バージョン: Number(t.match(/chrome\/([\d]+)/)[1]) } : 0 <= t.indexOf("opera") ? { タイプ:「オペラ」、 バージョン: Number(t.match(/opera.([\d]+)/)[1]) } : 0 <= t.indexOf("Safari") ? { タイプ:「Safari」、 バージョン: Number(t.match(/version\/([\d]+)/)[1]) } : { タイプ: t, バージョン: -1 } } 10. ブラウザ操作(1)ページの先頭までスクロールするエクスポートconst scrollToTop = () => { 定数高さ = document.documentElement.scrollTop || document.body.scrollTop; 高さ > 0 の場合 { ウィンドウのアニメーションフレームを要求します(上へスクロールします)。 window.scrollTo(0, 高さ - 高さ / 8); } } (2)ページの一番下までスクロールしますエクスポートconst scrollToBottom = () => { window.scrollTo(0, document.documentElement.clientHeight); } (3)指定された要素領域までスクロールするエクスポートconst SmoothScroll = (要素) => { document.querySelector(要素).scrollIntoView({ 動作: 'スムーズ' }); }; (4)可視ウィンドウの高さを取得するエクスポートconst getClientHeight = () => { clientHeight を 0 にします。 document.body.clientHeight と document.documentElement.clientHeight のどちらが高いかがわかります。 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } それ以外 { clientHeight は document.body.clientHeight よりも document.documentElement.clientHeight の方が大きいです。 } clientHeight を返します。 } (5)可視ウィンドウの幅を取得するエクスポートconst getPageViewWidth = () => { 戻り値 (document.compatMode == "BackCompat" ? document.body : document.documentElement).clientWidth; } (6)ブラウザを全画面で開くエクスポートconst toFullScreen = () => { 要素を document.body とします。 if (element.requestFullscreen) { 要素.requestFullscreen() } そうでない場合 (element.mozRequestFullScreen) { 要素.mozRequestFullScreen() } そうでない場合 (element.msRequestFullscreen) { 要素.msRequestFullscreen() } そうでない場合 (element.webkitRequestFullscreen) { 要素.webkitRequestFullScreen() } } (7)フルスクリーンブラウザを終了するエクスポートconst exitFullscreen = () => { ドキュメントがフルスクリーンから抜ける場合 ドキュメント.exitFullscreen() } そうでない場合 (document.msExitFullscreen) { document.msExitFullscreen() } そうでない場合 (document.mozCancelFullScreen) { document.mozCancelFullScreen() } そうでない場合 (document.webkitExitFullscreen) { document.webkitExitFullscreen() } } 11. 時間操作(1)現在の時刻エクスポートconstnowTime = () => { const now = 新しい Date(); 年 = now.getFullYear(); 月 = now.getMonth(); 定数 date = now.getDate() >= 10 ? now.getDate() : ('0' + now.getDate()); 定数 hour = now.getHours() >= 10 ? now.getHours() : ('0' + now.getHours()); const miu = now.getMinutes() >= 10 ? now.getMinutes() : ('0' + now.getMinutes()); 定数 sec = now.getSeconds() >= 10 ? now.getSeconds() : ('0' + now.getSeconds()); +year + "年" + (月 + 1) + "月" + 日 + "日" + 時間 + ":" + miu + ":" + 秒を返します。 } (2)フォーマット時間エクスポート const dateFormater = (formater, time) => { date = time ? new Date(time) : new Date(), とします。 Y = date.getFullYear() + ''、 M = date.getMonth() + 1、 D = date.getDate(), H = date.getHours(), m = date.getMinutes(), s = date.getSeconds(); 戻り値 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) } // 日付フォーマッター('YYYY-MM-DD HH:mm:ss') // 日付フォーマッター('YYYYMMDDHHmmss') 12. JavaScript操作(1)バブリング現象の防止エクスポートconst stopPropagation = (e) => { e = e || ウィンドウイベント; if(e.stopPropagation) { // W3C はバブリングを防止します method e.stopPropagation(); } それ以外 { e.cancelBubble = true; // IE はバブリング メソッドを防止します} } (2)手ぶれ補正機能エクスポートconst debounce = (fn, wait) => { タイマーを null にします。 関数()を返す{ コンテキスト = this とします。 args = 引数; if (タイマー) { タイマーをクリアします。 タイマー = null; } タイマー = setTimeout(() => { fn.apply(コンテキスト、引数); }、 待って); }; } (3)スロットリング機能エクスポートconstスロットル=(fn、遅延)=> { curTime = Date.now() とします。 関数()を返す{ コンテキスト = this とします。 args = 引数、 nowTime = Date.now(); (nowTime - curTime >= delay) の場合 { 現在の日付と時刻。 fn.apply(context, args) を返します。 } }; } (4)データタイプの決定エクスポートconst getType = (値) => { (値 === null)の場合{ 戻り値 + ""; } // データが参照型かどうかを判定します if (typeof value === "object") { valueClass = Object.prototype.toString.call(value) とします。 type = valueClass.split(" ")[1].split(""); タイプ.pop(); type.join("").toLowerCase() を返します。 } それ以外 { // データが基本データ型か関数戻り値かを判断します。typeof value; } } (5)オブジェクトのディープコピーエクスポートconst deepClone = (obj、hash = new WeakMap() => { // 日付オブジェクトは直接新しい日付オブジェクトを返します if (obj instanceof Date){ 新しいDate(obj)を返します。 } //通常のオブジェクトは直接新しい通常のオブジェクトを返します if (obj instanceof RegExp) { 新しい RegExp(obj) を返します。 } //循環参照がある場合はweakMapを使って解決します if (hash.has(obj)){ hash.get(obj) を返します。 } // オブジェクト自身のすべてのプロパティの説明を取得します。let allDesc = Object.getOwnPropertyDescriptors(obj); // パラメータに渡されたすべてのキーのプロパティを走査します。let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc) ハッシュを設定します(obj、クローンObj) Reflect.ownKeys(obj) のキーを取得します。 if(typeof obj[key] === 'object' && obj[key] !== null){ cloneObj[キー] = deepClone(obj[キー]、ハッシュ); } それ以外 { cloneObj[キー] = obj[キー]; } } cloneObjを返す } 以上で、開発効率向上に役立つ 56 個の実用的な JavaScript ツール関数についての記事は終了です。56 個の実用的な JavaScript ツール関数についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS と HTML とフロントエンド テクノロジーのレイヤー図
>>: MySQLで大きなテーブルを正常に削除する方法の詳細な説明
目次差分アルゴリズムレイヤーごとの比較同じタイプのコンポーネントを比較する同じタイプの要素の比較子ノ...
#事例: 従業員の給与水準を照会する 選択 給与、等級 から 従業員 参加する ジョブグレード g ...
1. まず、VS2019とMySQLデータベースを準備します。どちらも公式サイトからダウンロードで...
1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...
この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...
ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...
Tensorflow バージョンと Cuda および CUDNN の対応: https://tens...
React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...
Vm 内のハイパーリンク URL は、Get 要求のパラメータとして中国語と連結する必要があります。...
公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...
マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...
目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...
このチュートリアルでは、インストールに最新の MySQL コミュニティ グリーン バージョンである ...
私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私...
1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...