摘要:獲取中傳參的值判斷變量的數據類型深度克隆對象或數組多個對象或數組嵌套節流函數生成隨機字符串判斷對象是否為空判斷是否有該改增加生成隨機整數打亂數組順序,洗牌算法深拷貝數組判斷是否為純粹的對象,由或者創建的不是掛在原型上的沒有原型對象的對象通
1. 獲取url中傳參的值
function getParam (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r=window.location.search.substr(1).replace(new RegExp(/(amp;)/g),"").match(reg); if (r != null) { return r[2]; } return null; };2. 判斷變量的數據類型
function typeOf(obj) { const toString = Object.prototype.toString; const map = { "[object Boolean]" : "boolean", "[object Number]" : "number", "[object String]" : "string", "[object Function]" : "function", "[object Array]" : "array", "[object Date]" : "date", "[object RegExp]" : "regExp", "[object Undefined]": "undefined", "[object Null]" : "null", "[object Object]" : "object" }; return map[toString.call(obj)]; },3. 深度克隆對象或數組,多個對象或數組嵌套
deepCopy(data) { const t = this.typeOf(data); let o; if (t === "array") { o = []; } else if ( t === "object") { o = {}; } else { return data; } if (t === "array") { for (let i = 0; i < data.length; i++) { o.push(this.deepCopy(data[i])); } } else if ( t === "object") { for (let i in data) { o[i] = this.deepCopy(data[i]); } } return o; },4. 節流函數
debounce(func, delay) { let timer; return function (...args) { if (timer) { clearTimeout(timer); } timer = window.setTimeout(() => { func.apply(this, args); }, delay); } },5. 生成隨機字符串
function randomStr (len) { len = len || 32; var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; var maxPos = chars.length; var pwd = ""; for (let i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; };6. 判斷對象是否為空
function isEmptyObject (obj) { var name; for (name in obj) { return false; } return true; },7. 判斷是否有該class
export function hasClass(el, className){ let reg = new RegExp("(^|S)"+className+"(s|$)"); return reg.test(el.className); }8. 改dom增加class
export function addClass(el, className){ if(hasClass(el, className)){ return; } let newClass=el.className.split(" "); newClass.push(className); el.className=newClass.join(" "); }9. 生成隨機整數
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }10. 打亂數組順序, 洗牌算法
function shuffle(arr) { let _arr = arr.slice(); //深拷貝數組 for (let i = 0; i<_arr.length; i++) { let j = getRandomInt(0, i); let t = _arr[i]; _arr[i] = _arr[j]; _arr[j] = t; } return _arr; }11. 判斷是否為純粹的對象,由 new Object 或者 {} 創建的
function isPlainObject ( obj ) { var proto, Ctor; var toString = Object.prototype.toString; var getProto = Object.getPrototypeOf; // 不是掛在原型上的 var hasOwn = Object.prototype.hasOwnProperty; var fnToString = hasOwn.toString; var ObjectFunctionString = fnToString.call(Object); if ( !obj || toString.call( obj ) !== "[object Object]" ) { return false; } proto = getProto( obj ); // 沒有原型對象的對象 (`Object.create( null )`) if ( !proto ) { return true; } // 通過 new Object 出來的對象 Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor; return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString; }12. 移動端多次點擊事件
var times = 0; // 記錄點擊次數 var timer; const CLICK_TIME = 5; // 比如連續點擊5此就觸發 document.body.onclick = function () { if (timer) { clearTimeout(timer); timer = null; } if (times >= CLICK_TIME) { // do something } times++; timer = setTimeout(function () { times = 0; }, 200) }---
const REWARD_TICKET = 100 function getRandomArray(count) { let arr = []; let remainTicket = 0; for (let i = 1; i < count; i++) { if (i === 1) { remainTicket = REWARD_TICKET; } else { remainTicket = REWARD_TICKET - arr.reduce((prev, curr) => { return prev + curr; }); } if (remainTicket < 11) { arr.push(remainTicket); break; } const randomNumber = parseInt(Math.random() * remainTicket, 10); arr.push(randomNumber > 10 ? randomNumber : 10); } // make sure every number >= 10 if (arr[arr.length - 1] < 10) { const cut = arr.splice(arr.length - 2, 2); arr.push(cut[0] + cut[1]); } return arr; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107651.html
摘要:介紹一款模塊加載工具的入門,并且重點介紹其優化工具。發布目錄項目源代碼工具目錄,例如構建工具等。另外,前端代碼發布前都會進行壓縮,使文件足夠小。原來是因為里了,所以優化工具把也合并進來了。而優化工具要用好,要多嘗試他們的配置選項。 前端變化太快,如今RequireJS已經無法吸引眼球了。介紹一款模塊加載工具:RequireJS的入門,并且重點介紹其優化工具。 一、RequireJS簡介...
摘要:什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面,后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時,將導航頁傳輸到客戶端,其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。 什么是單頁面應用(SPA)? 單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續請求都無需再離開此頁 目標:旨在用為用戶提供了更接近本地...
摘要:什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面,后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時,將導航頁傳輸到客戶端,其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。 什么是單頁面應用(SPA)? 單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續請求都無需再離開此頁 目標:旨在用為用戶提供了更接近本地...
摘要:以戰爭與和平為藍本回顧了歷史,也給出了非常贊的觀察視角,程序員應該務實,而不是教條,更重要的是保持好奇心。初版于年前發布的,作者重寫整個倉庫從到之后,最近發布了版本,新版最大變化是升級到。 showImg(https://segmentfault.com/img/remote/1460000009584813); 不知道大家是否注意到,社區中出現的 CSS 尤其是 CSS-IN-JS...
閱讀 2947·2021-09-23 11:32
閱讀 2918·2021-09-22 15:12
閱讀 1708·2019-08-30 14:07
閱讀 3448·2019-08-29 16:59
閱讀 1640·2019-08-29 11:11
閱讀 2307·2019-08-26 13:50
閱讀 2426·2019-08-26 13:49
閱讀 2621·2019-08-26 11:49