摘要:結果為依次為循環語句結果依次為,,代碼解讀語句看著有點像語句,但是和語句不同的是它不可以循環對象,只能循環數組。
ES5和ES6數組遍歷方法詳解 在ES5中常用的10種數組遍歷方法:
ES6中新增加了一種:1、原始的for循環語句
2、Array.prototype.forEach數組對象內置方法
3、Array.prototype.map數組對象內置方法
4、Array.prototype.filter數組對象內置方法
5、Array.prototype.reduce數組對象內置方法
6、Array.prototype.some數組對象內置方法
7、Array.prototype.every數組對象內置方法
8、Array.prototype.indexOf數組對象內置方法
9、Array.prototype.lastIndexOf數組對象內置方法
10、for...in循環語句
ES5三種數組循環示例如下: 原始for循環語句1.for...of循環語句
Example1
var a = [1,2,3]; for(var i=0;i代碼解讀:原始for循環的優點在于大家都比較熟悉,容易理解,劣勢是寫起來比較繁瑣,需要定義額外更多的變量,所以一下是針對于原始for循環的改良的兩種寫法:
Example1:寫法改良版var a = [1,2,3]; for(var i=a.length;i--;){ console.log(a[i]); //結果依次為3,2,1 }Example2:性能改良版
var a = [1,2,3]; for(i = 0,len=a.length; i < len; i++) { console.log(a[i]); //結果依次為1,2,3 }注意:以上代碼可以寫成這樣呢,如果懵逼了的話接著看原始for循環的解讀,我們都知道for循環包含三個語句塊——>for(語句1;語句2;語句3){被執行的代碼},其中,語句1一般為變量定義語句(不僅可以只定義一個變量哦),在循環開始前執行,而且只執行一次;語句2定義循環的是否繼續執行的條件,同樣也是在循環開始前執行,語句1之后執行,每次重新開始循環都會再次執行;語句3則在循環結束之后執行,并且每次結束的時候都會再次執行,這里要注意的是如果被執行的代碼中途return出來了那是不會再執行一次語句3的,所以以上代碼解釋如下:因為i--這個語句在每次循環開始前都會再次先用 i 是true和false來判斷是否繼續執行,這里同樣要注意的是由于i--和--i的區別,這里由于是i--所以會先判斷i的值再去做‘減減’的操作,所以這里最后如果打印 i 的值,會發現其實是-1。
數組內置方法Array.prototype.forEachExample
var a = [1,2,3]; a.forEach(function(value,key,arr){ console.log(value) // 結果依次為1,2,3 console.log(key) // 結尾依次為0,1,2 console.log(arr) // 三次結果都為[1,2,3],該參數貌似沒什么用 })代碼解讀:forEach方法最大的好處就是便于使用,而且不用定義額外的參數變量,但是從效率以及性能角度來說它是劣于原始for循環的,而且也不能強制return結束循環,原因如下:
**forEach循環**一看就是通過**回調函數**來提供參數的,而回調函數在JS中是**閉包**的一種,閉包的作用是用來生成**私有作用域**的,所以,每一個回調函數都是一個**獨立的作用域**,都擁有自己獨立的存儲空間,互不影響,而且內部變量還不及時釋放,這也就是為什么在能不用閉包的情況下就不要用閉包的原因,而在閉包中return的話,也只是在當前回調函數中返回了,可是forEach中的其他的回調函數(閉包)仍然存在,所以,導致return是沒辦法結束循環的。下面寫一個forEach循環實現例子供大家參考理解:Example
Array.prototype.forEachCopy = function(callback){ var arr = this; for(var i=0;i數組內置方法Array.prototype.map Example
var a = [1,2,3]; var b = a.map(function(value,key,arr){ console.log(value) // 結果依次為1,2,3 console.log(key) // 結尾依次為0,1,2 console.log(arr) // 三次結果都為[1,2,3] return value+1; }) console.log(a); // 結果為[ 1, 2, 3 ] console.log(b); // 結果為[ 2, 3, 4 ]代碼解讀:map和forEach不同,在forEach中return語句是沒有任何效果的,而map則可以改變當前循環的值,并且最終會返回一個新的被改變過值之后的數組(map如果不用return就和forEach一樣了),由于這個特性,map一般用來處理需要修改某一個數組的值。map和forEach在其他的方面都是一樣的,也不能return結束循環等特性,下面寫一個map循環實現的例子供大家參考理解:
ExampleArray.prototype.mapCopy = function(callback){ var arr = this; var arrCopy = []; for(var i=0;i數組內置方法Array.prototype.filter Example
var a = [1,2,3]; var b = a.filter(function(value,key,arr){ console.log(value) // 結果依次為1,2,3 console.log(key) // 結尾依次為0,1,2 console.log(arr) // 三次結果都為[1,2,3] if(value === 3){ return false; } return true; }) console.log(a); // 結果為[ 1, 2, 3 ] console.log(b); // 結果為[ 1,2 ]代碼解讀:filter和map不同,map目的是為了改變值,而filter目的是為了去掉不要的值,在循環的時候如果返回的是false那么就表示本次循環的不添加該值,返回true則相反是表示要添加到新建的數組中,下面寫一個filter循環實現例子供大家參考:
ExampleArray.prototype.filterCopy = function(callback){ var arr = this; var arrCopy = []; for(var i=0;i數組內置方法Array.prototype.reduce Example
var a = [1,2,3]; var b = a.reduce(function (count, value,key,arry) { console.log(count); // 結果依次為0,1,3 console.log(value); // 結果依次為1,2,3 console.log(key); // 結果依次為0,1,2 console.log(arry) // 三次結果都為[1,2,3] return count + value; },0); console.log(a); // 結果為[ 1, 2, 3 ] console.log(b) // 結果為6代碼解讀:reduce的不同之處在于累加,和其他幾個內置方法不同的地方,它的第二個參數不是this對象,而是初始累加值(如果不設置的話數組會亂掉),而且回調函數的的個數也不同,比其他的多了一個,而且還在在開始的多加了一個參數,第一個參數記錄的是上一次循環的累加值,下面寫一個reduce循環實現例子供大家參考:
ExampleArray.prototype.reduceCopy = function(callback,countInit){ var arr = this; for(var i=0;i數組內置方法Array.prototype.some Example
var a = [1,2,3]; var b = a.some(function(value,key,arry){ console.log(value); // 結果依次為1,2 console.log(key); // 結果依次為0,1 console.log(arry); // 兩次次結果都為[1,2,3] return value===2; }) console.log(a); // 結果為[ 1, 2, 3 ] console.log(b); // 結果為true代碼解讀:some的不同之處在它返回的布爾值,它的作用有點像filter,不過它的目的不是為了篩選返回數組,而是為了篩選該數組是否有滿足你要的值,而且找到符合條件的值返回了一次true之后就不會再繼續執行了,下面寫一個some循環實現例子供大家參考:
Example
Array.prototype.someCopy = function(callback,countInit){ var arr = this; var isBool = false; for(var i=0;i數組內置方法Array.prototype.every Example
var a = [1,2,3]; var b = a.every(function(value,key,arry){ console.log(value); // 結果依次為1,2 console.log(key); // 結果依次為0,1 console.log(arry); // 兩次次結果都為[1,2,3] return value===2; }) console.log(a); // 結果為[ 1, 2, 3 ] console.log(b); // 結果為false代碼解讀:其實從看例子可以看出來,some和every作用是一樣的,只不過some當找到之后返回的是true,而every找到之后返回的是false而已,下面寫一個every循環實現例子供大家參考:
Example
Array.prototype.everyCopy = function(callback){ var arr = this; var isBool = true; for(var i=0;i數組內置方法Array.prototype.indexOf Example
var a = [1,2,3]; var b = a.indexOf(2); console.log(a); // 結果為[ 1, 2, 3 ] console.log(b); // 結果為1代碼解讀:對于indexOf方法來說,在數組循環過程中會和傳入的參數比對,如果是比對成功,那么終止循環,返回對比成功的下標,下面寫一個indexOf循環實現例子供大家參考:
Example
Array.prototype.indexOfCopy = function(value){ var arr = this; var index = -1; for(var i=0;i數組內置方法Array.prototype.lastIndexOf Example
var a = [1,2,3,1]; var b = a.lastIndexOf(1); console.log(a); // 結果為[ 1, 2, 3, 1 ] console.log(b); // 結果為1代碼解讀:lastIndexOf方法和indexOf作用一致,但查找方向不同,indexOf是正向查找,lastIndexOf是你像查找,找到之后返回成功的下標,下面寫一個lastIndexOf循環實現例子供大家參考:
Example
Array.prototype.lastIndexOf = function(value){ var arr = this; var index = -1; for(var i=arr.length;i--;){ if(arr[i] === value){ index = i; return index } } return index; } var a = [1,2,3,1]; var b = a.lastIndexOf(1); console.log(a); // 結果為[ 1, 2, 3 , 1 ] console.log(b); // 結果為3循環語句for...in小結:對于以上8個數組的內置方法,forEach方法僅僅只是為了循環,并不可以幫你做額外的事情;map方法相當于在循環的時候你告訴數組當前遍歷的這個值需要改成什么樣,那么它就會最后給什么樣的數組;filter方法相當于在循環的時候數組遍歷一個個對象,并問你這個是不是你要找的值,如果你說是,他就會給你返回一個到新的數組中,不是他就會剔除;reduce方法相當于循環遍歷對象做統計(累加或者累減之類的);some和every方法相當于在遍歷的時候拿著一個個對象問你這個是不是你找的,只要你說了一遍是,那么他就會給你分別返回的是true和false;indexOf和lastIndexOf方法相當于你告訴它你要找什么值,找到之后立馬返回給你它的門牌號。
Example
var a = [1,2,3]; for(var key in a){ console.log(key); //結果為依次為0,1,2 } var b = {0:1,1:2,2:3}; for(var key in b){ console.log(key); //結果為依次為0,1,2 }代碼解讀:從結果得知,for...in遍歷數組的時候是遍歷數組的下標值,而在遍歷對象的時候遍歷的是key值,所以猜想,數組在JS中,本質上也是一個以鍵值對形式存在的對象,而為了證明這點,我們做如下一個例子的實驗:
var a = []; a["b"] = 2; console.log(a); //結果為[ b: 2 ] console.log(a[0]); //結果為undefined我們發現數組的下標不在對應相應位置的值了,由此可以證明在JS中數組其實本質上就是一個以下標為key值的對象。
當然對于for...in循環語句本身而言,它是一個淺度遍歷對象的循環語句,值遍歷第一層節點(當然對象中設置不可枚舉的屬性的除外)。
Examplevar a = {b:{c:2},d:{c:4}}; for(var key in a){ console.log(key); //結果為依次為b,d }ES6循環for...of語句Example
var a = [1,2,3]; for(var value of a){ console.log(value) // 結果依次為1,2,3 }代碼解讀:for...of語句看著有點像for...in語句,但是和for...in語句不同的是它不可以循環對象,只能循環數組。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83990.html
摘要:忍者級別的函數操作對于什么是匿名函數,這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸 遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制,如果...
摘要:很多人可能誤認為資源跨域時無法請求,實質上請求是可以正常發起的指通常情況下,部分瀏覽器存在部分特例,后端也可能正常進行了處理,中文指南調試技巧指南前端掘金作者緝熙簡介是推出的一個天挑戰。 深入 JavaScript,從對象開始 - 前端 - 掘金入坑前端開發有一段時間了,面對形形色色的JavaScript優秀框架,到底該選擇那一款呢?最近在使用Vue.js寫一款markdown編輯器插...
摘要:專題系列共計篇,主要研究日常開發中一些功能點的實現,比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等,特點是研究專題之函數組合專題系列第十六篇,講解函數組合,并且使用柯里化和函數組合實現模式需求我們需要寫一個函數,輸入,返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇,講解如何從零實現一個 jQuery 的 ext...
摘要:關于我的博客掘金專欄路易斯專欄原文鏈接深度長文數組全解密全文共字,系統講解了數組的各種特性和。構造器構造器用于創建一個新的數組。中聲明的數組,它的構造函數是中的對象。 本文首發于CSDN網站,下面的版本又經過進一步的修訂。 關于 我的博客:louis blog 掘金專欄:路易斯專欄 原文鏈接:【深度長文】JavaScript數組全解密 全文共13k+字,系統講解了JavaScrip...
摘要:桶排序與計數排序的區別桶排序中一個桶可以放一個范圍內的多個數據,在各個桶中又可以用其他方法排序,其快速之處在于只用對比同一個桶內的數字而無需與其他桶的數字作對比。與計數排序相比,桶排序需要作二次對比,但可省略桶的個數。 哈希表(Hash Table) 所有符合鍵值對即key-value的結構就是哈希。數組其實也是一種哈希。 計數排序(復雜度(n+max))無法統計負數和小數,需要一個...
閱讀 1176·2021-10-11 10:59
閱讀 1963·2021-09-29 09:44
閱讀 853·2021-09-01 10:32
閱讀 1424·2019-08-30 14:21
閱讀 1870·2019-08-29 15:39
閱讀 2973·2019-08-29 13:45
閱讀 3532·2019-08-29 13:27
閱讀 2006·2019-08-29 12:27