Javascript之高階陣列API的使用例項
JS中我們可以根據需求新建新的物件解決問題的同時,也有一些常用的內建物件供我們使用,我們稱之為API,本篇文章只是對陣列部分進行了練習。
例一:偽陣列,不能修改長短的陣列(所以沒辦法清零),可以修改元素,程式碼實現如下:
<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>
偽陣列列印的是實參,而普通函式呼叫列印的是形參,並且列印它的函式型別,我們發現它的型別顯示並不是陣列。
例二:將一個字串陣列輸出為|分割的形式,比如“劉備|張飛|關羽”。使用兩種方式實現
方法一:不利用內建物件,進行字串拼接,由於第一個元素前沒有特殊符號,首先將其賦值後,迴圈從下一個元素開始遍歷
<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>
兩種方法進行對比,我們發現第一種方法使之產生了大量記憶體,導致記憶體浪費情況,從此看出對我們來說內建物件的使用幫我們解決了記憶體浪費的缺點。
例三:將一個字串陣列的元素的順序進行反轉。["a","b","c","d"] ->["d","c","b","a"]。使用兩種種方式實現。
方法一:之前文章介紹過的方法
<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()解決
<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>
最後
為了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成為全棧工程師,乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈::point_right::point_right::point_right: 866109386 .歡迎大家進群交流討論,學習交流,共同進步。
當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們,祝福大家在往後的工作與面試中一切順利。