javascript常用实例的实现与封装（上）

1.前言

因为公司最近项目比较忙，没那么多空余的事件写文章了，所以这篇文章晚了几天发布。但是这也没什么关系，不过该来的，总是会来的。

好了，其他的不多说的，大家在开发的时候应该知道，有很多常见的实例操作。比如数组去重，关键词高亮，打乱数组等。这些操作，代码一般不会很多，实现的逻辑也不会很难，下面的代码，我解释就不解释太多了，打上注释，相信大家就会懂了。但是，用的地方会比较，如果项目有哪个地方需要用，如果重复写的话，就是代码冗余，开发效率也不高，复用基本就是复制粘贴！这样是一个很不好的习惯，大家可以考虑一下把一些常见的操作封装成函数，调用的时候，直接调用就好！

源码都放在github上了，大家想以后以后有什么修改或者增加的，欢迎大家来star一下ec-do（https://github.com/chenhuiYj/ec-do）。

2.字符串操作

2-1去除字符串空格

//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格

functiontrim(str,type){

switch(type){

case1:returnstr.replace(/s+/g,"");

case2:returnstr.replace(/(^s*)|(s*$)/g,"");

case3:returnstr.replace(/(^s*)/g,"");

case4:returnstr.replace(/(s*$)/g,"");

default:returnstr;

}

}

2-2字母大小写切换

/*type

1:首字母大写

2：首页母小写

3：大小写转换

4：全部大写

5：全部小写

* */

//changeCase('asdasd',1)

//Asdasd

functionchangeCase(str,type)

{

functionToggleCase(str){

varitemText= ""

str.split("").forEach(

function(item){

if(/^([a-z]+)/.test(item)){

itemText+= item.toUpperCase();

}

elseif(/^([A-Z]+)/.test(item)){

itemText+= item.toLowerCase();

}

else{

itemText+= item;

}

});

returnitemText;

}

switch(type){

case1:

returnstr.replace(/^(w)(w+)/,function(v,v1,v2){

returnv1.toUpperCase()+ v2.toLowerCase();

});

case2:

returnstr.replace(/^(w)(w+)/,function(v,v1,v2){

returnv1.toLowerCase()+ v2.toUpperCase();

});

case3:

returnToggleCase(str);

case4:

returnstr.toUpperCase();

case5:

returnstr.toLowerCase();

default:

returnstr;

}

}

2-3字符串循环复制

//repeatStr(str->字符串, count->次数)

//repeatStr('123',3)

//"123123123"

functionrepeatStr(str,count){

vartext= '';

for(vari= 0;i< count;i++){

text+= str;

}

returntext;

}

2-4字符串替换

//字符串替换(字符串,要替换的字符,替换成什么)

functionreplaceAll(str,AFindText,ARepText){

raRegExp= newRegExp(AFindText,"g");

returnstr.replace(raRegExp,ARepText);

}

2-5替换*

//replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)

functionreplaceStr(str,regArr,type,ARepText){

varregtext= '',Reg= null,replaceText=ARepText||'*';

//replaceStr('18819322663',[3,5,3],0)

//188*****663

//repeatStr是在上面定义过的（字符串循环复制），大家注意哦

if(regArr.length=== 3&& type=== 0){

regtext= '(w{'+ regArr[0]+ '})w{'+ regArr[1]+ '}(w{'+ regArr[2]+ '})'

Reg= newRegExp(regtext);

varreplaceCount= repeatStr(replaceText,regArr[1]);

returnstr.replace(Reg,'$1'+ replaceCount+ '$2')

}

//replaceStr('asdasdasdaa',[3,5,3],1)

//***asdas***

elseif(regArr.length=== 3&& type=== 1){

regtext= 'w{'+ regArr[0]+ '}(w{'+ regArr[1]+ '})w{'+ regArr[2]+ '}'

Reg= newRegExp(regtext);

varreplaceCount1= repeatSte(replaceText,regArr[0]);

varreplaceCount2= repeatSte(replaceText,regArr[2]);

returnstr.replace(Reg,replaceCount1+ '$1'+ replaceCount2)

}

//replaceStr('1asd88465asdwqe3',[5],0)

//*****8465asdwqe3

elseif(regArr.length=== 1&& type== 0){

regtext= '(^w{'+ regArr[0]+ '})'

Reg= newRegExp(regtext);

varreplaceCount= repeatSte(replaceText,regArr[0]);

returnstr.replace(Reg,replaceCount)

}

//replaceStr('1asd88465asdwqe3',[5],1,'+')

//"1asd88465as+++++"

elseif(regArr.length=== 1&& type== 1){

regtext= '(w{'+ regArr[0]+ '}$)'

Reg= newRegExp(regtext);

varreplaceCount= repeatSte(replaceText,regArr[0]);

returnstr.replace(Reg,replaceCount)

}

}

2-6检测字符串

//checkType('165226226326','phone')

//false

//大家可以根据需要扩展

functioncheckType(str,type){

switch(type){

case'email':

return/^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/.test(str);

case'phone':

return/^1[3|4|5|7|8][0-9]{9}$/.test(str);

case'tel':

return/^(0d{2,3}-d{7,8})(-d{1,4})?$/.test(str);

case'number':

return/^[0-9]$/.test(str);

case'english':

return/^[a-zA-Z]+$/.test(str);

case'chinese':

return/^[u4E00-u9FA5]+$/.test(str);

case'lower':

return/^[a-z]+$/.test(str);

case'upper':

return/^[A-Z]+$/.test(str);

default:

returntrue;

}

}

2-7检测密码强度

//checkPwd('12asdASAD')

//3(强度等级为3)

functioncheckPwd(str){

varnowLv= 0;

if(str.length< 6){

returnnowLv

}

if(/[0-9]/.test(str)){

nowLv++

}

if(/[a-z]/.test(str)){

nowLv++

}

if(/[A-Z]/.test(str)){

nowLv++

}

if(/[.|-|_]/.test(str)){

nowLv++

}

returnnowLv;

}

2-8随机码

//count取值范围0-36

//randomNumber(10)

//"2584316588472575"

//randomNumber(14)

//"9b405070dd00122640c192caab84537"

//Math.random().toString(36).substring(2);

//"83vhdx10rmjkyb9"

functionrandomNumber(count){

returnMath.random().toString(count).substring(2);

}

2-9查找字符串

可能标题会有点误导，下面我就简单说明一个需求，在字符串'sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'中找出’blog’的出现次数。代码如下

functioncountStr(str,strSplit){

returnstr.split(strSplit).length-1

}

varstrTest='sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'

//countStr(strTest,'blog')

//6

3.数组操作

3-1数组去重

这个方法是在太多了，我之前写的文章也有提到，我今天这里就写一种之前没用过的方法。

//ES6新增的Set数据结构，类似于数组，但是里面的元素都是唯一的 ，其构造函数可以接受一个数组作为参数

//let arr=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]

//let set = new Set(array);

//{1,2,6,3,5,69,66,7,4,8,9663}

//ES6中Array新增了一个静态方法from，可以把类似数组的对象转换为数组

//Array.from(set)

//[1,2,6,3,5,69,66,7,4,8,9663]

functionremoveRepeatArray(arr){

returnArray.from(newSet(arr))

}

3-2数组顺序打乱

functionupsetArr(arr){

returnarr.sort(function(){returnMath.random()- 0.5});

}

3-3数组最大值最小值

//这一块的封装，主要是针对数字类型的数组

functionmaxArr(arr){

returnMath.max.apply(null,arr);

}

functionminArr(arr){

returnMath.min.apply(null,arr);

}

3-4数组求和，平均值

//这一块的封装，主要是针对数字类型的数组

//求和

functionsumArr(arr){

varsumText=0;

for(vari=0,len=arr.length;i<len;i++){

sumText+=arr[i];

}

returnsumText

}

//平均值,小数点可能会有很多位，这里不做处理，处理了使用就不灵活了！

functioncovArr(arr){

varsumText=sumArr(arr);

varcovText=sumText/length;

returncovText

}

3-5从数组中随机获取元素

//randomOne([1,2,3,6,8,5,4,2,6])

//2

//randomOne([1,2,3,6,8,5,4,2,6])

//8

//randomOne([1,2,3,6,8,5,4,2,6])

//8

//randomOne([1,2,3,6,8,5,4,2,6])

//1

functionrandomOne(arr){

returnarr[Math.floor(Math.random()* arr.length)];

}

3-6返回数组（字符串）一个元素出现的次数

//getEleCount('asd56+asdasdwqe','a')

//3

//getEleCount([1,2,3,4,5,66,77,22,55,22],22)

//2

functiongetEleCount(obj,ele){

varnum= 0;

for(vari= 0,len= obj.length;i< len;i++){

if(ele== obj[i]){

num++;

}

}

returnnum;

}

3-7返回数组（字符串）出现最多的几次元素和出现次数

//arr, rank->长度，默认为数组长度，ranktype，排序方式，默认降序

functiongetCount(arr,rank，ranktype){

varobj= {},k,arr1= []

//记录每一元素出现的次数

for(vari= 0,len= arr.length;i< len;i++){

k= arr[i];

if(obj[k]){

obj[k]++;

}

else{

obj[k]= 1;

}

}

//保存结果{el-'元素'，count-出现次数}

for(varoinobj){

arr1.push({el: o,count: obj[o]});

}

//排序（降序）

arr1.sort(function(n1,n2){

returnn2.count- n1.count

});

//如果ranktype为1，则为升序，反转数组

if(ranktype===1){

arr1=arr1.reverse();

}

varrank1= rank|| arr1.length;

returnarr1.slice(0,rank1);

}

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])

默认情况，返回所有元素出现的次数

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)

传参（rank=3），只返回出现次数排序前三的

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)

传参（ranktype=1,rank=null），升序返回所有元素出现次数

getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)

传参（rank=3，ranktype=1），只返回出现次数排序（升序）前三的

3-8得到n1-n2下标的数组

//getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9)

//[5, 6, 7, 8, 9]

//getArrayNum([0,1,2,3,4,5,6,7,8,9],2) 不传第二个参数,默认返回从n1到数组结束的元素

//[2, 3, 4, 5, 6, 7, 8, 9]

function getArrayNum(arr,n1,n2){

var arr1=[],len=n2||arr.length-1;

for(var i=n1;i<=len;i++){

arr1.push(arr[i])

}

return arr1;

}

3-9筛选数组

/删除值为'val'的数组元素

//removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')

//["aaa"] 带有'test'的都删除

//removeArrayForValue(['test','test1','test2','test','aaa'],'test')

//["test1", "test2", "aaa"] //数组元素的值全等于'test'才被删除

functionremoveArrayForValue(arr,val,type){

arr.filter(function(item){returntype==='%'?item.indexOf(val)!==-1:item!==val})

}