自己封裝函數(shù)時，參數(shù)最好不要超過3個，若要超過，可以用數(shù)組或者對象；
1. 利用（Math.random）寫指定范圍的隨機(jī)數(shù)
2. 補零
3. 數(shù)組去重
4. 排序
5. 敏感詞過濾
6. 判斷數(shù)組中是否存在某一條數(shù)據(jù)，結(jié)果返回布爾值
7. 商品列表
8. 格式化日期
9. 獲取行內(nèi)樣式

---

1. 利用（Math.random）寫指定范圍的隨機(jī)數(shù)；

（1）隨機(jī)數(shù)的公共方法

//Math.random()//0~1之間的隨機(jī)數(shù) //Math.round(Math.random()) 隨機(jī)數(shù)四舍五入取整； function random(a,b){return Math.round(Math.random()*(b-a) + a); }

（2）數(shù)字字母的數(shù)據(jù)驗證碼

var str = "";//用來生成一個隨機(jī)驗證碼庫for(var i=0; i<4; i++){var num = random(48,57);var sStr = random(97,122);var lStr = random(65,90);str = str + String.fromCharCode(num) + String.fromCharCode(sStr) + String.fromCharCode(lStr)}var result = "";for(var i=0; i<4; i++){var index = random(0,str.length-1);result += str[index];}console.log(result);function random(a,b){return Math.round(Math.random()*(b-a)+a);}

（3）十六進(jìn)制的隨機(jī)色

var r = random(0,255).toString(16);var g = random(0,255).toString(16);var b = random(0,255).toString(16);var str = "#"+createZero(r)+createZero(g)+createZero(b);document.body.style.backgroundColor = str;function createZero(n){if(n < 10 || n.length < 2){return "0" + n;} else {return "" + n;}}function random(a,b){return Math.round(Math.random()*(b-a)+a);}

2. 補零

function crateZero(n){if(n < 10 || n.length < 2){//數(shù)值和字符的補零return "0" + n;} else {return "" + n;} }

3. 數(shù)組去重

（1）利用 對象 添加屬性得到undefined；
優(yōu)點： 可以計算出重復(fù)的個數(shù)；
缺點： 當(dāng)數(shù)字和字符形式的數(shù)字相同時，且同時出現(xiàn)在同一個數(shù)組中，該方法不好用；

var arr = ['a','b','a','a','b','a']; var obj = {}; for(var i=0; i<arr.length; i++){if( obj[arr[i]] ){obj[arr[i]]++;} else {obj[arr[i]] = 1} } console.log(obj);//{a:4, b:2} var newArr = []; for(var key in obj){newArr.push(key); } console.log(newArr);//[a,b]

（2）用 indexOf() 方法

var arr = [3,5,6,2,1,8,5,4,2,"2"];var newArr = []; for(var i = 0;i<arr.length; i++){if(newArr.indexOf(arr[i]) == -1){newArr.push(arr[i]);} } console.log(newArr);//(8) [3, 5, 6, 2, 1, 8, 4, "2"]

（3）利用 ES6 的 Set() 方法去重（不嚴(yán)格）

function norepeat(arr){var s = new Set(arr);var newArr = [];for(var i of s){newArr.push(i);}return newArr; }

4. 排序

（1）冒泡排序

var arr = [12,9,6,8,3,4]; for(j = 0; j<arr.length-1; j++){for(var i = 0; i<arr.length-1-j; i++){if(arr[i] > arr[i+1]){var temp = arr[i];arr[i] = arr[i+1];arr[i+1] = temp; }} }

（2）比較排序

var arr = [3,1,2,4,6,9];console.log(arr);for(var i = 0;i<arr.length; i++){var min = arr[i];//假設(shè)為最小值var minIndex = i;//最小值的indexfor(var j = i+1; j<arr.length; j++){ //i與后面所有的值做比較if(min > arr[j]){min = arr[j];minIndex = j;}}arr[minIndex] = arr[i];arr[i] = min}console.log(arr);

（3）用 sort() 方法排序（解決 sort() 按位排序問題）

//升序： var arr2 = [2,101,6,58,3] arr2.sort(function(a,b){return a-b;}) console.log(arr2);//(5) [2, 3, 6, 58, 101]//降序： arr2.sort(function(a,b){return b-a;}) console.log(arr2);//(5) [101, 58, 6, 3, 2]

5. 敏感詞過濾

（1）利用字符的 replace() 方法（這種方法耗內(nèi)存，最好用正則）

var msg = ['fuck','tm','nnd','sb','sx'];//敏感詞庫 var str = "fuck，你tm真讓人無語";//要說的話 for(var i=0;i<str.length;i++){msg.forEach( function (val,index){str = str.replace(val,"**");}) } console.log(str);//**，你**真讓人無語

（2）正則

var msg = ['fuck','tm','nnd','sb','sx'];//敏感詞庫 var str = "fuck，你tm真讓人無語";//要說的話 for(var i=0; i<msg.length; i++){var reg = new RegExp(msg[i],"g");str = str.replace(reg,"**") } console.log(str);//**，你**真讓人無語

6. 判斷數(shù)組中是否存在某一條數(shù)據(jù)，結(jié)果返回布爾值；

var arr = [2,4,6,5,8,1] function has(arr,num){for(var i=0; i<arr.length; i++){if(arr[i] === num){return true;}}return false; } console.log(has(arr,"1"));//false console.log(has(arr,1));//true

7. 商品列表

（1）字符串拼接的方法

var str = "";for(var i=0; i<data.length; i++){str += '<li>'+'<img src="'+data[i].src+'" alt="暫無圖片">'+'<p>'+data[i].title+'</p>'+'<span>￥ '+data[i].price+'</span>'+'</li>'}var ul = document.querySelector('ul');ul.innerHTML = str;

8. 格式化日期

console.log(new Date()); //Tue Oct 08 2019 14:26:59 GMT+0800 (中國標(biāo)準(zhǔn)時間)

（1）將標(biāo)準(zhǔn)格式的時間改為： yyyy-mm-dd hh:mm:ss

var date = createDate("-"); console.log(date); //Tue Oct 08 2019 14:26:59 GMT+0800 (中國標(biāo)準(zhǔn)時間) function createDate(sign){var d = new Date();var y = d.getFullYear();var m = d.getMonth()+1;var mydate = d.getDate();var day = d.getDay();var h = d.getHours();var min = d.getMinutes();var s = d.getSeconds();switch(day){case 0: day = "星期日";bread;case 1: day = "星期一";bread;case 2: day = "星期二";bread;case 3: day = "星期三";bread;case 4: day = "星期四";bread;case 5: day = "星期五";bread;case 6: day = "星期六";bread;};return y +sign+ createZone(m) +sign+ createZone(mydate) +" "+ day +" "+ createZone(h) +":"+ createZone(min) +":"+ createZone(s); }function createZone(n){if(n<10 || n.length<2){return "0"+n;} else {return ""+n;} }

（2）時間戳 轉(zhuǎn) 日期格式
時間戳為10位需*1000，時間戳為13位的話不需乘1000

console.log(new Date(1570518752234)); //Tue Oct 08 2019 14:26:59 GMT+0800 (中國標(biāo)準(zhǔn)時間)

9. 獲取行內(nèi)樣式

function getStyle(ele,""){if(ele.currentStyle){//return ele.currentStyle.width;//當(dāng)對象身上的屬性是變量時，要用 [] 來訪問，而不用 .return ele.currentStyle[attr];} else {return getComputedStyle(ele,false)[attr]; } console.log( getStyle(obox,"height") )

10. 事件

（1）事件冒泡

var e = eve || window.event; function stopBubble(e){if(e.stopPropagation){e.stopPropagation();} else {e.cancelBubble = true;} }

（2）阻止默認(rèn)事件

function stopDefault(e){if(e.preventDefault){e.preventDefault();} else {e.returnValue = false;} }

（3）事件監(jiān)聽

• 添加監(jiān)聽：

function addEvent(ele,type,callback){if(ele.addEventListener){ele.addEventListener(type,callback,false);} else if(ele.attachEvent){ele.attachEvent("on"+type,callback);} else {ele["on"+type] = callback;} }addEvent(obox,"click",function(){console.log(1); })//或者 addEvent(obox,"click",function())

• 刪除事件監(jiān)聽：

function removeEvent(ele,type,callback){if(ele.removeEventListener){ele.removeEventListener(type,callback,false);} else if(ele.detachEvent){ele.detachEvent("on"+type,callback):} else {ele["on"+type] = null;} }removeEvent(obox,click,fn);

11. 封裝 cookie

（1）添加：

function setCookie(key,value,num){ //不傳num，默認(rèn)會話級別。if(num){var d = new Date();d.setDate(d.getDate()+num);document.cookie = key+"="+value+";expires="+d;} else {document.cookie = key+"="+value; } }

（2）刪除：

function removeCookie(key){setCookie(key,"suiyizhi"，-1); }

（3）獲取：

function getCookie(key){var str = document.cookie;for(var i=0; i<str.split("; ").length; i++){if(str.split("; ")[i].split("=")[0] == key){return str.split("; ")[i].split("=")[1];}}return ""; //沒有該cookie時返回""，若不寫這一句，則會顯示成undfined。 }

12. 判斷一個字符串是否以數(shù)字開頭？

var str1 = "1a3"; var str2 = "aaa"; console.log( isNaN(parseInt(str1)) ); //false 是數(shù)字開頭 console.log( isNaN(parseInt(str2)) ); //true 不是數(shù)字開頭

13. 過濾空白節(jié)點

var list = obox.childNodes; for(var i=0; i<list.length; i++){ //遍歷所有節(jié)點if(list[i].nodeType == 1){ //元素節(jié)點的nodeType=1console.log(list[i]);} }

總結(jié)

以上是生活随笔為你收集整理的js封装常用函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。