Javascript之高級數組API的使用實例

時間 2019-12-14

標籤 javascript 高級數組 api 使用實例欄目 JavaScript 简体版

原文原文鏈接

JS代碼中咱們能夠根據需求新建新的對象解決問題的同時，也有一些經常使用的內置對象供咱們使用，咱們稱之爲API，本篇文章只是對數組部分進行了練習。json

例一：僞數組，不能修改長短的數組（因此沒辦法清零），能夠修改元素，代碼實現以下：數組

     ? 
   
         <script> 
        
         fn(1,2); 
        
         fn(1,2,3,4,5,6); 
        
         fn(1,2,4,5,7,9,4); 
        
         function 
         fn(a,b){ 
        
         arguments[0]=0; 
        
         console.log(arguments); 
        
         arguments.push(1); 
        
         console.log(arguments  
         instanceof 
         Array); 
        
         console.log(arguments.length); 
         //實參個數 
        
         console.log(fn.length); 
         //形參個數 
        
         console.log(arguments.callee); 
         //整個函數,包括註釋 
        
         } 
        
         </script>

僞數組打印的是實參，而普通函數調用打印的是形參，而且打印它的函數類型，咱們發現它的類型顯示並非數組。函數

例二：將一個字符串數組輸出爲|分割的形式，好比「劉備|張飛|關羽」。使用兩種方式實現spa

方法一：不利用內置對象，進行字符串拼接，因爲第一個元素前沒有特殊符號，首先將其賦值後，循環從下一個元素開始遍歷code

     ? 
   
         <script> 
        
         var 
         arr=[ 
         "劉備" 
         , 
         "張飛" 
         , 
         "關羽" 
         ]; 
        
         var 
         str=arr[0]; 
        
         for 
         ( 
         var 
         i=1;i<arr.length;i++){ 
        
         str+= 
         "|" 
         +arr[i]; 
        
         } 
        
         console.log(str); 
        
         </script>

方法二：使用內置對象直接改變間隔符號對象

     ? 
   
         <script> 
        
         var 
         arr=[ 
         "劉備" 
         , 
         "張飛" 
         , 
         "關羽" 
         ]; 
        
         var 
         str=arr.join( 
         "|" 
         ); 
        
         console.log(str); 
        
         </script>

兩種方法進行對比，咱們發現第一種方法使之產生了大量內存，致使內存浪費狀況，今後看出對咱們來講內置對象的使用幫咱們解決了內存浪費的缺點。ip

例三：將一個字符串js數組的元素的順序進行反轉。["a","b","c","d"] ->["d","c","b","a"]。使用兩種種方式實現。內存

方法一：以前文章介紹過的方法ci

     ? 
   
         <script> 
        
         var 
         str1=[ 
         "a" 
         , 
         "b" 
         , 
         "c" 
         , 
         "d" 
         ]; 
        
         var 
         str2=[]; 
        
         for 
         ( 
         var 
         i=0;i<str1.length;i++){ 
        
         str2[str1.length-i-1]=str1[i]; 
        
         } 
        
         console.log(str2); 
        
         </script>

方法二：直接使用內置對象reverse()解決element

     ? 
   
         <script> 
        
         var 
         str1=[ 
         "a" 
         , 
         "b" 
         , 
         "c" 
         , 
         "d" 
         ]; 
        
         console.log(str1.reverse()); 
        
         </script>

例四：工資的數組[1500,1200,2000,2100,1800],把工資超過2000的刪除

使用內置對象filter()實現題目需求。

     ? 
   
         <script> 
        
         var 
         arr=[1500,1200,2000,2100,1800]; 
        
         var 
         arr1=arr.filter( 
         function 
         (element,index,array){ 
        
         if 
         (element<=2000){ 
        
         return 
         true 
         ; 
        
         } 
        
         return 
         false 
         ; 
        
         }) 
        
         console.log(arr1); 
        
         </script>

例五：["c","a","z","a","x","a"]找到數組中每個元素出現的次數

因爲題目給出字符形式，讓咱們求出的相應字符的個數爲數字形式，這讓咱們應用json更方便問題解決，將題目給出的字符做爲「鍵」，將次數做爲「鍵值」，來判斷數組中的元素，在json中是否存在屬性值，若是存在，在原有基礎上加上1；若是不存在直接賦值爲1。

     ? 
   
         <script> 
        
         var 
         arr=[ 
         "c" 
         , 
         "a" 
         , 
         "z" 
         , 
         "a" 
         , 
         "x" 
         , 
         "a" 
         ]; 
        
         var 
         json={}; 
        
         for 
         ( 
         var 
         i=0;i<arr.length;i++){ 
        
         if 
         (json[arr[i]]!==undefined){ 
        
         json[arr[i]]+=1; 
        
         } 
         else 
         { 
        
         json[arr[i]]=1; 
        
         } 
        
         } 
        
         console.log(json); 
        
         </script>

例六：編寫一個方法去掉一個數組的重複元素

方法一：新建數組，將原數組第一個元素push進入新數組。遍歷原數組的每個元素使之在新數組每個元素中都不存在（嵌套兩層for循環），就push進入原數組，不然就跳出新數組循環，進入原數組的下一個元素循環。

     ? 
   
         <script> 
        
         var 
         arr=[3,2,4,5,5,3,5,568,4,21,7]; 
        
         var 
         arr1=fn(arr); 
        
         function 
         fn(array){ 
        
         var 
         arr2=[]; 
        
         arr2.push(array[0]); 
        
         abc: 
         for 
         ( 
         var 
         i=0;i<array.length;i++){ 
        
         for 
         ( 
         var 
         j=0;j<arr2.length;j++){ 
        
         if 
         (arr2[j]==array[i]){ 
        
         continue 
         abc; 
        
         } 
        
         } 
        
         arr2.push(array[i]); 
        
         } 
        
         return 
         arr2; 
        
         } 
        
         console.log(arr1); 
        
         </script>

方法二：建立一個新數組，循環遍歷，只要新數組中有舊數組的值，就不要在添加。每次都要判斷新數組中是否有舊數組的值，保證舊數組的元素和新數組中每個都不相等，則賦值給新數組的下一元素的值。

     ? 
   
         <script> 
        
         var 
         arr=[1,2,3,4,5,2,3,4]; 
        
         console.log(arr); 
        
         console.log(fn(arr)); 
        
         function 
         fn(array){ 
        
         var 
         newArr=[]; 
        
         for 
         ( 
         var 
         i=0;i<array.length;i++){ 
        
         var 
         bool= 
         true 
         ; 
        
         for 
         ( 
         var 
         j=0;j<newArr.length;j++){ 
        
         if 
         (array[i]===newArr[j]){ 
        
         bool= 
         false 
         ; 
        
         } 
        
         } 
        
         if 
         (bool){ 
        
         newArr[newArr.length]=array[i]; 
        
         } 
        
         } 
        
         return 
         newArr; 
        
         } 
        
         </script>