原生JS 一定要学会自己封装函数,不然还怎么‘原生’?

3,169 阅读3分钟

对于一些编程新手来说,他们最烦恼的事情莫过于自己封装函数了,既要实现该它的原本功能,还能封装成函数,为了方便以后书写代码时候更加便利,所以大家每次在封装一个函数之后,使用的时候直接调用就可以了。接下来就让小编带你走进我的代码世界吧。

封装一个isNaN函数

思想: 把处理好的数字,转成字符串,再去和isNaN作比较

function myIsNaN(n) {
    var num = Number(n);
    if (num + '' === 'NaN') {
        // 把处理出来的数字转化成字符串,在去和NaN做比较
        return true
    }
    return false //打断函数的执行
}

封装一个myPush方法

 function myPush(ary,n){
    ary[ary.length] =n;
}
var ary=[1,2];
myPush(ary,222);
console.log(ary);  

封装一个方法,可以获取某个元素下的所有元素子节点

function getChildren(ele){
    // 从childNodes中筛选出元素子节点即可
    var ary=[];
    for(var i=0;i<ele.childNodes.length;i++){
        if(ele.childNodes[i].nodeType == 1 ){
            ary.push(ele.childNodes[i])
        }
    }
    return ary;
}    

封装一个函数,使用splice 实现 push pop unshift shift

function mypush2(arr,...abc){   //剩余运算符...在函数中
    //abc是个数组,存储的是除了第一项之后的所有项   
    <!-- var ary=arguments[0];  我们要操作的数组   -->
    arr.splice(arr.length,0,...abc)
    //在数学中,就叫扩展运算符(解构),把abc数组拆开  
    return arr.length;
}
var ary=[1,2]
mypush2(ary,4,5,[6,7,8],9)

function mypop(arr){
    return arr.splice(arr.length-1,1)[0]
}
mypop2=ary

封装一个函数,mypush,返回值是改变后的数组长度

function mypush(arr){
    var ary=arguments[0]; // 我们要操作的数组
    for(var i=1;i<arguments.length;i++){
        arr[arr.length]=arguments[i]
    }
return arr.length
}   
var ary=[1,2]
mypush(ary,4,5,[6,7,8],9)
console.log(ary); //[1,2,4,5,[6,7,8,],9]

封装一个自己的pop

function mypop(arr) {
        var a=arr[arr.length-1]
        arr.length--
        return a
    }
    var ary = [1, 2, 3];
    var res=mypop(ary);
    console.log(ary,res)

数组的排序和反转 sort

  • 排序 sort(function(a,b)){ //支持任意数 这是一个升序 } sort(function(a,b){ return b-a; //降序 })

封装一个myReverse方法(翻转函数)

  • 原理: 循环传进来的数组arr,把数组中的每一项通过unshift添加到一个新数组中,然后把新数组返回。

          function myReverse(arr) {        
          var a = [];
          for (var i = 0; i < arr.length; i++) {
              var temp = arr[i];
              a.unshift(temp)
          }
          return a;
      }
      var ary = [1,2,3,4];
      var res2 = myReverse(ary);
      console.log(res2, ary);
      //这个方法不改变原来数组,新数组是倒叙输出。    
    

重新封装一个新的myRevers2

  • 原理:第一项和最后一项换位置,第二项和倒数第二项换位置....以此类推,若为基数,中间值保持不动 function myRevers2(arr){ for(var i=0; i<arr.length/2; i++>){ var temp = arr[i]; arr[i] = arr[arr.length-1-i]; //arr[i]带表前边的项,arr[arr.length-1-i]代表后面的项 arr[arr.length-1-i] = temp; } return arr;
    }
    var res3=myRevers2(arr1) consloe.log(res3,arr1)

封装一个方法,和join()用法一样,按照指定字符拼接成字符串,不穿餐厨,默认逗号拼接。

var res2=ary.join('+')
var ary = [1,2,3,4];
function myjoin(arr,str){
    var s='';
    //把数组中的每一项拿出来,跟指定字符拼接即可
    for(var i=0;i<arr.length-1;i++){
        s += arr[i] +str
    }
    return s
}   
var res=myjoin(ary,'+');