1. 程式人生 > >js常用函式庫總結

js常用函式庫總結

/*1.深拷貝*/
//(1)
function deepClone(obj) {
    if (!obj && typeof obj !== 'object') {
        return;
    }
    var newObj = obj.constructor === Array ? [] : {};
    for (var key in obj) {
        if (obj[key]) {
            if (obj[key] && typeof obj[key] === 'object') {
                newObj[key] = obj[key].constructor === Array
? [] : {}; //遞迴 newObj[key] = deepClone(obj[key]); } else { newObj[key] = obj[key]; } } } return newObj; } //使用方法: var _arr = [{ a: 1, b: 2 }, { c: 3, d: 4 }]; var _newArr = deepClone(_arr); //(2)比較粗魯的複製 JSON.parse(JSON
.stringify(_arr)); /*2.合併陣列*/ //(1)concat方法 var _arr1 = ["a", "b", "c"]; var _arr2 = ["1", "2", "3"]; var newArr = _arr1.concat(_arr2); // 注:使用concat方法合併陣列時,不會改變原有陣列的結構。 //(2)push.apply()方法 var _arr1 = ["a", "b", "c"]; var _arr2 = ["1", "2", "3"]; _arr1.push.apply(_arr1, _arr2); //使用此方法合併的陣列會改變合併到的陣列 /*3.判斷資料型別(準確)*/
Object.prototype.toString.call(); //使用方法: var _obj = {}; Object.prototype.toString.call(_obj) == [object Object]; /*4.將函式中的arguments引數轉成陣列*/ var _arguments = Array.prototype.slice.apply(arguments); //使用方法: function add(x, y) { var _argus = Array.prototype.slice.call(arguments); console.log(_argus); } /*5.節流函式*/ function delayFn(fn, delay, mustDelay) { var timer = null; var t_start; return function() { var context = this, args = arguments, t_cur = +new Date(); clearTimeout(timer); //清除上一次定時器 if (!t_start) { t_start = t_cur; //設定觸發事件 } if (t_cur - t_start >= mustDelay) { //判斷時間差是否大於間隔時間 fn.apply(context, args); t_start = t_cur; } else { timer = setTimeout(function() { //延遲執行函式 fn.apply(context, args); }, delay); } }; } //使用方法: var count = 0; function fn() { count++; console.log(count); } document.onmousemove = delayFn(fn, 100, 200); //100ms內連續觸發的呼叫,後一個呼叫會把前一個呼叫的等待處理掉,但每隔200ms至少執行一次 /*6累加函式*/ var arr1 = arr.reduce(function(con, info) { if (con) { return con; } return info._show; }, false) /*7手機端收起彈出鍵盤*/ var hideKeyboard = function() { document.activeElement.blur(); //ios $("input").blur(); }; /*8時間格式化*/ Date.prototype.Format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小時 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } //使用方法:(時間轉成yyyy-MM-dd hh:mm:ss) var time1 = new Date().Format("yyyy-MM-dd"); var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss"); /*9標準時間轉時間戳*/ var time1 = Date.parse(new Date()); /*10時間戳轉標準時間*/ new Date(time1).Format("yyyy-MM-dd hh:mm:ss"); /*11.JSON陣列去重*/ /* * JSON陣列去重 * @param: [array] json Array * @param: [string] 唯一的key名,根據此鍵名進行去重 */ function uniqueArray(array, key) { var result = [array[0]]; for (var i = 1; i < array.length; i++) { var item = array[i]; var repeat = false; for (var j = 0; j < result.length; j++) { if (item[key] == result[j][key]) { repeat = true; break; } } if (!repeat) { result.push(item); } } return result; } //使用方法: var _json = [{ id: 'aaa', name: 'bb' }, { id: 'bbb', name: 'xx' }, { id: 'aaa', name: 'ccc' }] uniqueArray(_json, 'id'); /*12.JSON陣列去重多欄位*/ var arr = [ { "name": "1", "value": "qqq", "age": "10" }, { "name": "1", "value": "qqq", "age": "10" }, { "name": "2", "value": "eee", "age": "20" }, { "name": "4", "value": "rrr", "age": "50" }, { "name": "5", "value": "ttt", "age": "100" } ]; for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length;) { if (arr[i].name == arr[j].name && arr[i].value == arr[j].value && arr[i].age == arr[j].age) { arr.splice(j, 1); } else j++; } } //*13.普通陣列去重*/ Array.prototype.unique = function() { var res = []; var json = {}; for (var i = 0; i < this.length; i++) { if (!json[this[i]]) { res.push(this[i]); json[this[i]] = 1; } } return res; } //使用方法: var arr = [112,112,34,'xx',112,112,34,'xx','str','str1']; unique(arr); /*14.console.log && console.dir*/ //使用方法: var obj = {name:'xx',age:18}; console.log(obj); console.dir(obj); //區別 //console.dir比log方法更易讀,資訊也更豐富。能夠輸出原始屬性 /*14.獲取當前時間的時間戳(三種方法)*/ var d1 = new Date().getTime(); var d2 = new Date().valueOf(); var d3 = +new Date(); /*15 替代arguments.callee()方法*/ //給內部函式命名 //接受引數n=5,不用for迴圈輸出陣列【1,2,3,4,5】 //(1)arguments.callee()遞迴寫法 function show(n) { var arr = []; return (function () { arr.unshift(n); n--; if (n != 0) { arguments.callee(); } return arr; })() } show(5)//[1,2,3,4,5] //(2)內部函式明明寫法 function show(n) { var arr = []; return (function fn() { arr.unshift(n); n--; if (n != 0) { fn(); } return arr; })() } show(5)//[1,2,3,4,5] /*16 預防XSS攻擊*/ //(1)使用正則替換關鍵字元 function safeStr(str){ return str.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g, "&quot;").replace(/'/g, "&#039;"); } //(2)使用正則轉碼,解碼 var HtmlUtil = { /*1.用正則表示式實現html轉碼*/ htmlEncodeByRegExp:function (str){ var s = ""; if(str.length == 0) return ""; s = str.replace(/&/g,"&amp;"); s = s.replace(/</g,"&lt;"); s = s.replace(/>/g,"&gt;"); s = s.replace(/ /g,"&nbsp;"); s = s.replace(/\'/g,"&#39;"); s = s.replace(/\"/g,"&quot;"); return s; }, /*2.用正則表示式實現html解碼*/ htmlDecodeByRegExp:function (str){ var s = ""; if(str.length == 0) return ""; s = str.replace(/&amp;/g,"&"); s = s.replace(/&lt;/g,"<"); s = s.replace(/&gt;/g,">"); s = s.replace(/&nbsp;/g," "); s = s.replace(/&#39;/g,"\'"); s = s.replace(/&quot;/g,"\""); return s; } }; /*17。多維陣列轉一維陣列*/ /*參考https://www.cnblogs.com/haoxl/p/6818657.html*/ //(1)使用陣列map()方法,對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列 var arr = [1,[2,[[3,4],5],6]]; function unid(arr){ var arr1 = (arr + '').split(',');//將陣列轉字串後再以逗號分隔轉為陣列 var arr2 = arr1.map(function(x){ return Number(x); }); return arr2; } console.log(unid(arr)); //(2)只適用於二維陣列轉一維陣列 var arr = [1,[2,3],[4,5]]; arr1 = [].concat.apply([],arr); console.log(arr1); /*18.滑鼠滑過顯示溢位的文字*/ function ellipsis(e) { var target = e.target; var containerLength = $(target).width(); var textLength = target.scrollWidth; var text = $(target).text(); if (textLength > containerLength) { $(target).attr("title", text); } } $("#xxx").on("mouseenter", ellipsis)