Javascript各種數組遍歷方法歸納總結和兼容写法

原创 Lin_Grady 教程 javascript/jQuery 329阅读 2018-04-26 22:13:03 举报

前言

一些浏览器网络层知识文章系列可以看看
Http协议系列----OSI参考模型,协议原理构成,三次握手,四次挥手,连接管理
Http协议系列—-字符编码,cookie,缓存,疑难杂症
Http协议系列—-进阶Https基础
Javascript執行機制--單線程,同異步任務,事件循環

一些布局排版知识文章系列可以看看
頁面基礎布局相關知識 --- 居中&經典布局
关于移动端基础布局概念方式和常见问题总结(不定时更新)

一些基础知识文章系列可以看看
關於javascript基本類型和引用類型小知識
Javascript中this基礎應用
javascript中關於相等符號的隱形轉換
關於Javascript中的new運算符,構造函數與原型鏈一些理解
關於創建對象的三種寫法 ---- 字面量,new構造器和Object.create()
js实现数组去重方法及效率對比
前端跨域之原因&&方案&&原理
Javascript關于異步編程的發展

一些逻辑系列文章可以看看
Javascript难点知识运用---递归,闭包,柯里化等(不定时更新)
一些有意思的逻辑算法 --- (不定时更新)
一些搞死人的基础题 --- (不定时更新)
一些前端算法詳解 --- (不定时更新)

PS: 2018/04/26 網站改版之後以前的筆記已經不太能看了,趁這次機會優化一下排版,重新梳理一下方法,補充一些信息,刪除JQuery庫用法,只講解Javascript自帶的,

原生

for in

語句用於遍曆數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。主要用於枚舉對象,數組遍歷效率最低的方法。

>注意:
1,遍曆數組時,i表示當前索引值,ary[i]對應的元素遍歷對象時,i表示key值,obj[i]表示key值對應的value值;
2,跳出循環的方式有如下幾種:return 函數執行被終止,break 循環被終止,continue 循環被跳過;

缺點:
1,遍曆所有屬性包括原型鏈;
2, 忽略 enumerable 爲 false 的屬性;

優化方案:
hasOwnProperty:是用來判斷一個對象是否有你給出名稱的屬性或對象。不過需要注意的是,此方法無法檢查該對象的原型鏈中是否具有該屬性,該屬性必須是對象本身的一個成員;

注意: 這裏依然會遍曆所有屬性,只是過濾出操作屬性而已

For

循環可以將代碼塊執行指定的次數。

>注意:
1,(如果使用var聲明的話),for循環中的i在循環結束之後依然存在於作用域中,為了避免影響作用域中的其他變量,通常使用閉包或其他方式做處理;
2,避免使用for(var i=0,len = ary.length;i < len; i++){} 的方式,數組長度每次循環都被計算,效率低。將變量聲明放在for的前面來執行;
3,跳出循環的方式有如下幾種:return 函數執行被終止,break 循環被終止,continue 循環被跳過;

有種稍高逼格寫法:

不考慮順序情況下還不錯,少一個變量並且能唬到一些新手

ES5

forEach(function(currentValue, index, arr), thisValue)

按照原始數組元素順序依次處理元素.

參數描述
function(currentValue, index, arr)匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引,第3個是數組本身
thisValue可選。對象作爲該執行回調時使用,傳遞給函數,用作 "this" 的值。如果省略了 thisValue ,"this" 的值爲 "undefined"

注意: forEach() 對于空數組是不會執行回調函數的。

簡單實現兼容寫法:

map(function(currentValue,index,arr), thisValue)

按照原始數組元素順序依次處理元素並返回一個新數組,數組中的元素爲原始數組元素調用函數處理後的值。

參數描述
function(currentValue, index, arr)匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引,第3個是數組本身
thisValue可選。對象作爲該執行回調時使用,傳遞給函數,用作 "this" 的值。如果省略了 thisValue ,"this" 的值爲 "undefined"

注意: map() 對于空數組是不會執行回調函數的。

簡單實現兼容寫法:

filter(function(currentValue,index,arr), thisValue)

使用指定的函數測試所有元素,並創建一個包含所有通過測試的元素的新數組。

參數描述
function(currentValue, index, arr)匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引,第3個是數組本身
thisValue可選。對象作爲該執行回調時使用,傳遞給函數,用作 "this" 的值。如果省略了 thisValue ,"this" 的值爲 "undefined"

注意: filter() 對于空數組是不會執行回調函數的。

簡單實現兼容寫法:

every(function(currentValue,index,arr), thisValue)

用于檢測數組所有元素是否都符合指定條件,返回布爾值.

參數描述
function(currentValue, index, arr)匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引,第3個是數組本身
thisValue可選。對象作爲該執行回調時使用,傳遞給函數,用作 "this" 的值。如果省略了 thisValue ,"this" 的值爲 "undefined"

注意: every() 對于空數組是不會執行回調函數的。

簡單實現兼容寫法:

reduce/reduceRight(function(previousValue, currentValue, currentIndex, array), initialValue)

reduce對數組中的所有元素調用指定的回調函數。該回調函數的返回值為累積結果,並且此返回值在下一次調用該回調函數時作為參數提供。
reduceRight反向操作.

參數描述
function(previousValue, currentValue, currentIndex, array)previousValue:通過上一次調用回調函數獲得的值。如果向 reduce 方法提供 initialValue,則在首次調用函數時,previousValue 為 initialValue。currentValue:當前數組元素的值。currentIndex:當前數組元素的數字索引。array:包含該元素的數組對象。
initialValue可選。傳遞給函數的初始值,

注意: reduce() 對于空數組是不會執行回調函數的。

先來打印看看裏面的傳參和沒初始值的情況:

兩者區別在於多了一層運算,文檔説明如下
在第一次調用回調函數時,作為參數提供的值取決於 reduce 方法是否具有 initialValue 參數。
1, 有:
1) previousValue 參數為 initialValue。
2) currentValue 參數是數組中的第一個元素的值。
2, 沒有:
1) previousValue 參數是數組中的第一個元素的值。
2) currentValue 參數是數組中的第二個元素的值。

簡單實現兼容寫法:

ECMA6:

entries(),keys()和values()

它們都返回一個遍歷器對象,可以用for...of循環進行遍歷,唯一的區別是keys()是對鍵名/索引值的遍歷、values()是對鍵值的遍歷,entries()是對鍵/索引值值對的遍歷


寫到這裏就差不多了,ES5還有壹些篩選方法例如find(), includes()等其實都是大同小異就不繼續寫了,ES6還會涉及到叠代器的知識點,大家有興趣自行研究吧.

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复