js常用方法整理

1.原生编写一个方法,通过className获取元素

        例:<div class="list"></div>
            var $={
                    byId:function(id){
                      return typeof id==='string'document.getElementsById(id):id;
                    },
                    byClass:function(cls,parent){
                      parent=parent?this.byId(parent):document;
                      var eles=document.getElementsByTagName("*");
                      var arr=[];
                      for(var i=0,len=eles.length;i<len;i++){
                       if(eles[i].className.match(new RegExp('(^| )'+cls+'( |$)'))){  //匹配空格list  list  list空格
                       arr.push(eles[i])   //当正则表达式中包含变量时,必须使用new   RegExp  不能用//定界符 
                      }
                 }
                 return arr;
            }
       }
       console.log($.byClass("list"))

2.对一个数组进行去除重复项

    例:var arr=[1,2,4,5,6,3,46,3,2,88];
           function isInarray(val,arr){    //检测值是否存在于数组中
                for(var i in arr){
                    if(arr[i]==val){
                      return true
                     }
            }
            return false
       }
           function removeItem(arr){
                var newArr=[];
                for(var i in arr){
                     if(!isInarray(arr[i],newArr)){
                      newArr.push(arr[i])     //push()向数组追加一个元素 放在最后
                 }
            }
            return newArr
       }
           console.log(removeItem(arr))

3.执行顺序

    function global(){
            var  a=b=55;    //从右往左执行
    }
    global()  
    console.log(a)    //报错  a is not define
    console.log(b)   //55
    例:var glo="aa";
    function fun(){
        console.log(glo);     //在函数内,先找出所有的变量,这时的glo变量被声明但并未赋值,所以为undefined
        var glo="bb";
        console.log(glo)
    }
    fun()
        执行结果:第一个:undefined   第二个  bb   所有的变量声明当被悬置到函数的顶部了
        原因:代码执行两个阶段:1.变量,函数声明,参数创建。先解析再执行
                                            2.代码执行,函数表达式和不合格的标识符被创建

4.求一个数组中重复的值放在一个新的数组中

       var arr=[1,2,,5,4,2,5,4,7,9,10];
       function isInarray(val,arr){
            var num=0;
            for(var j=0;j<arr.length;j++){
            if(arr[j]==val){
                  num+=1;
             }
            }
            return num
           }
           function getItem(arr){
                var newArr=[];
            for(var i=0;i<arr.length;i++){
                 if(isInarray(arr[i],arr)>1 && isInarray(arr[i],newArr)===0){
                  newArr.push(arr[i])
             }
            }
            return newArr
           }
               console.log(getItem(arr))

5.将字符串“border-top-color”转换成“BorderTopColor”

        方法一:function fn(str){
                        var arr=str.split("-"),newStr="";
                        console.log(arr)
                        for(var i=0;i<arr.length;i++){
                             newStr+=arr[i].charAt(0).toUpperCase()+arr[i].substr(1);
                        }
                        console.log(newStr)
                       }
                       fn(str)
    方法二:var str="border-bottom-color"        //正则表达式匹配
                   function strFn(str){
                        str=str.replace(/\b\w+\b/g,function(s){
                             return s.charAt(0).toUpperCase()+s.substr(1);
                        }).replace(/-/g,"")
                        console.log(str)
                           }
                       strFn(str)

6、给数字加千分符

var num="1234567890.23";
               var reg=/(\d{1,3})(?=(\d{3})+($|\.))/g;
               num=num.replace(reg,"$1,")
               console.log(num)

7、查找字符串中出现最多的字符和个数

    例:function getMaxChar(str){
                var strs=str.split(""),
                 obj={},
                 maxStr="",
                 count=0;
                for(var i=0;i<strs.length;i++){
                     var item=strs[i],c=0;                              c=(obj[item]||0)+1
                     if(obj[item]){                                          c>count&& (maxstr=item,c=count)
                          c=obj[item]+1;                                  obj[item]=c
                     }else{
                      c=1;
                     }
                     if(c>count){
                          maxStr=item;
                          count=c;
                         }
                         obj[item]=c;
                        }     
                        var num=[];
                        for(var m in obj){
                             num.push(obj[item])
                        }
                        var maxNum=Math.max.apply(null,num);
                        for(var n in obj){
                             if(obj[n]==maxNum){
                                      maxStr=n
                                }
                            }
                                return obj
                                //return ("出现最多的是"+maxStr+",出现了"+c+"次")
                       }
   console.log(getMaxChar(str))

8.实现b数组拷贝a数组,实现每个元素的拷贝

    var a=[1,"aa",3];
    方法一:  var  b=new Array();  for(var i=0;i<3;i++){b.push(a[i])}
    方法二:  var b=[].concat(a)
    方法三:  var b=a.slice(0,a.length)

9.函数实现参数后的后缀名 如abc.jpg 返回 .jpg

        function getSuf(name){
             var dotLast=name.lastIndexOf(".");
         if(dotLast==-1){
              return "文件名格式不正确"
         }else{
              return name.substr(dotLast)
         }
        }
        console.log(getSuf("a.jpg"))

10.求平均数

        function fun(){
            var sum=0forvar i=0;i<arguments.length;i++){
                sum+=arguments[i]
        }
        return  sum/arguments.length
    }

11.js实现循环1-100的奇数

        function  getNumber(){
            for(var i=0;i<100;i++){
                if(i%2==1){console.log(i)}      //i%2==0   偶数
            }
    }

12.实现字符串反转

    方法一:function(str){
            var newStr=""
            for(var i=str.length;i>0;i--){
                newStr+=str.substring(i-1,i)            //substring()截取字符串,下标如果是n,则截取n-1位
            }
            return newStr;
    }
    方法二:function(str){
               var newstr="";
                for(var i=str.length-1;i>=0;i--){
                       newstr+=str.charAt(i)
                }
                return  newstr;
            }
    方法三:var arr=str.split("");
                   var newStr=arr.reverse().join().replace(/,/g,"")

13.实现数组反转

            var arr=[1,2,3,5]
                  function setArray(arr){
                         var newArr=[];
                         /*for(var i=arr.length-1;i>=0;i--){     //方法一
                              newArr.push(arr[i])
                         }*/
                         for(var i=0;i<arr.length;i++){       //方法二
                              newArr.unshift(arr[i])
                         }
                         return newArr
                    }
                    console.log(setArray(arr))    

14.求素数

        function getItem(begin,end){
             var arr=[];
             for(var i = begin; i < end ;i++){
                  if(isPrimeNum(i)){
                       arr.push(i)
                    }
               }
                 return arr
            }
        function isPrimeNum(num){
                 for(var i=2;i<num;i++){
                          if(num%i==0){
                       return false
                      }
                 }
                 return true
            }
            console.log(getItem(1,100))

15.为元素绑定多个事件(同时支持IE和火狐)

        var  addHandler=function(element,type,handler){
                if(element.addEventListener){
                       element.addEventLister(type,handler,false);       //removeEventLister(type,handler,false)  删除事件
                }else if(element.attachEvent){
                        element.attachEvent("on"+type,handler);        //detachEvent("on"+type,handler)  删除事件
                }else{
                        element["on"+tyoe]=handler
                }
        }

16.求二维数组所有数的和

        function sum(arr){
            var total=0;
            for(var i=0;i<arr.length;i++){
                for(var j=0;j<arr[i].length;j++){
                    total+=arr[i][j]
                }
            }
            return  total
        }

17.js实现随机选取10–100之间的10个数字,存入一个数组

        function  select(start,end){
            var o=end-start+1;
            return  Math.floor(Math.randow()*o+start)
        }
        var arr=[];
        for(var i=0;i<10;i++){
            arr.push(select(10,100))
        }

18.位数组扩展indexof、remove、removeat方法

        var oldArrayIndexof=Array.indexof;
        Array.prototype.indexof=function(obj){
            if(!oldArrayIndexof){
                for(var i=0,len=this.length;i<len;i++){
                    if(this[i]==obj){return i}
                }
                 return  -1
            }else{
                 return oldArrayIndexof(obj)
            }
        }
        Array.prototype.remove=function(idx){
            if(isNaN(idx) || idx>this.length){
                return  false
            }
            for(var i=idx;i<this.length;i--){
                this[i]=this[i+1]
            }
            this.length-=1;
        }
        Array.prototype.removeAt=function(index){
            this.splice(index,1)             //splice(m,n) 用于删除数组中索引从m开始的n个字符
        }                                                     // 返回值:仍然是一个数组,存放了被数组删除的值

19.实现兼容的getElementByClassName()方法

var $ = {
        getEleByClass: function( cls, parent, tag ){
            var parent = parent || document;
            var tag = tag || "*";
            if( parent.getElementsByClassName ){
                return parent.getElementsByClassName( cls );
            } else {
        var aClass = [];
        var reg = new RegExp( "(^| )" + cls + "( |$)" );
        var aEle = this.getEleByTag( tag, parent );
            for( var i = 0, len = aEle.length; i < len; i++ ){
                reg.test( aEle[i].className ) && aClass.push( aEle[i] );
            }
        return aClass;
        }
    },
        getEleByTag: function( ele, obj ){
            return ( obj || document ).getElementsByTagName( ele );
        },
        hasClass: function( ele, cls ){
            return ele.className.match( new RegExp( "(^|\\s)" + cls + "(\\s|$)" ));
        },
        addClass: function( ele, cls ){
            if( !$.hasClass( ele, cls ) ){
            ele.className += " " + cls;
            }
        },
        removeClass: function( ele, cls ){
            if( $.hasClass( ele, cls ) ){
                var reg = new RegExp( "(^|\\s)" + cls + "(\\s|$)" );
                ele.className = ele.className.replace( reg, " " );
            }
        }
    };

20,实现isArray inArray功能

  function isArray(obj){
            return  Object.prototype.toString.call(obj)=='[object Array]'
        }
        function inArray(val,arr){
            arr=isArray(arr)?arr:arr.split("|");
            if(type val=='string' || type val=='number'){
                for(var i in arr){
                    if(arr[i])==val{
                        return true
                    }
                }
            }
                return false
        }

21.实现点击li打印对应的索引值

方法一:for(var i=0, len = lis.length; i<len; i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                alert( this.index );
            }
        }
方法二:
for(var i=0, len = lis.length; i<len; i++){
            (function(i){
                lis[i].onclick = function(){
                 alert( lis[i] );
            }
            })(i);
        }
方法三:
for(var i=0, len = lis.length; i<len; i++){
            lis[i].setAttribute("data-num",i);
        }
        for(var i=0, len = lis.length; i<len; i++){
            lis[i].onclick = function(){
                alert( this.getAttribute("data-num") );
            }
        }

21.给定一个数组实现反转,要求原地实现

 function reversal( arr ){
        for (var i = 0; i < arr.length / 2; i++) {
            var temp = arr[i];
            arr[i] = arr[arr.length - i - 1];
            arr[arr.length - i - 1] = temp;
        }
    }
    var array = [1,"abc",3,4,5];
    reversal(array);
    alert(array);

22.数组冒泡排序

    function sortArr(arr){
        for(var j=0;j<arr.length;j++){
            for(var i=arr.length-1;i>j;i--){
                if(arr[i]<arr[i-1]){
                    var temp=arr[i];
                    arr[i]=arr[i-1];
                    arr[i-1]=temp;
                }
            }
        }
        return arr;
    }

23.实现兼容的getElementsByClassName()方法

 var $={
        getEleByClass:function(cls,parent,tag){
            var parent=parent||document;
            var tag=tag||"*";
            if(parent.getElementsByClassName){
                return parent.getElementsByClassName(cls)
            }else{
                var aClass=[];
                var reg=new RegExp("(^| )"+cls+"( |$)");
                var aEle=this.getEleByTag(tag,parent);
                for(var i=0,len=aEle.length;i<len;i++){
                    reg.test(aEle[i].className)&& aClass.push(aEle[i])
                }
                return aClass
            }
        },
        getEleByTag:function(ele,obj){
            return (obj||document).getElementsByTagName(ele);
        },
        hasClass:function(ele,cls){
            return ele.className.match(new RegExp("(^|\\s)"+cls+"(\\s|$)"))
        },
        addClass:function(ele,cls){
            if(!$.hasClass(ele,cls)){
                ele.className+=""+cls;
            }
        },
        removeClass:function(ele,cls){
            if($.hasClass(ele,cls)){
                var reg=new RegExp("(^|\\s)"+cls+"(\\s|$)");
                ele.className=ele.className.replace(reg,"")
            }
        }
    }    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值