原生JS 一定要學會自己封裝函式，不然還怎麼‘原生’？

Jy1215534590發表於2019-08-19
JS封裝函式

對於一些程式設計新手來說，他們最煩惱的事情莫過於自己封裝函式了，既要實現該它的原本功能，還能封裝成函式，為了方便以後書寫程式碼時候更加便利，所以大家每次在封裝一個函式之後，使用的時候直接呼叫就可以了。接下來就讓小編帶你走進我的程式碼世界吧。

封裝一個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,'+'); 複製程式碼

相關文章