你能想到的前端遍歷都在這里了！
前端遍歷的存在，極大地簡化了我們處理業(yè)務(wù)數(shù)據(jù)的繁瑣程度。所以熟悉并靈活運用他們可大大地提高我們的效率。下面就一一熟悉他們吧！
01
遍歷方法目錄
for循環(huán)?-?稍許繁瑣，可中斷（break），可跳過（conttinue）
for-of -?簡化for循環(huán)，更加靈活，無需索引
for-in -?對象遍歷，一般不用于數(shù)組遍歷
while -?當(dāng)循環(huán)次數(shù)不限制、不確定一時使用
forEach -?適合對每個元素執(zhí)行操作；沒有返回值，會改變原數(shù)組
some -?返回值為true或者false；只要一個元素滿足條件，則返回true
every -?返回值為true或者false；所有元素都滿足條件，返回true
filter -?根據(jù)指定的條件篩選出數(shù)組中滿足條件的元素，返回數(shù)組或[]
find -?查找滿足指定條件的第一個元素，返回元素或undefined
findLast -?查找滿足指定條件的最后一個元素，返回元素或undefined
findIndex -?查找滿足指定條件的第一個元素索引，返回索引或者-1
findLastIndex -?查找滿足指定條件的最后一個元素索引，返回索引或者-1
map -?每個元素的映射，可以為每個元素根據(jù)展示要求進(jìn)行處理
reduce -?求和，求平均數(shù)，字符串返轉(zhuǎn)，數(shù)組扁平化
reduceRight -?跟上面方法區(qū)別就是從后往前遍歷
sort -?降序排序，升序排序列；會改變原數(shù)組
02
一一拆解
1.for循環(huán)
for循環(huán)是最早也是最常見的一種遍歷。因其寫起來稍顯繁瑣，逐漸被其它遍歷方法所取代。但其有一個地位是不可撼動的-可中斷循環(huán)，這是其它遍歷所不不能實現(xiàn)的。所以某些情境五，我們不得不乖乖地來啟用這個古老的語法。
示例：
最后一個console是否顯示，取決環(huán)境前一個{}里的關(guān)鍵記是break還是continue：
break:?跳出循環(huán)，可以執(zhí)行循環(huán)體外的代碼；輸出：2,3,5,大于5不顯示,這里顯示嗎？
continue:?跳出本次循環(huán)，繼續(xù)循環(huán)。如此例return換做continue，則輸出：2,3,5,大于5不顯示,1,這里顯示嗎？
2.for-of
for-of語句，略過索引，寫起來更加簡便。使用它可以將每一項元素依次循環(huán)出來，還可以將迭代對象循環(huán)出來。
迭代對象包括：Array、Set、Map、Arguments、String、Typed Array、Generators這7類。而Object類型不是可迭代對象。
示例：
3.for-in
for in 循環(huán)是一種特殊類型的循環(huán)，主要用來遍歷對象也可以遍歷數(shù)組（但是不推薦），使用它可以將對象中的屬性依次循環(huán)出來。
示例：
4.while
在while和do/while里，記得一定要自加或自減，否則會無限循環(huán)下去...
while只有當(dāng)循環(huán)條件成立時，才會執(zhí)行{}里的代碼。
語法如下：
示例：
do/while是while的變體。它與 while 循環(huán)的不同在于，在檢查條件是否為真之前，該循環(huán)將會執(zhí)行一次代碼塊，然后只要條件為真，它就將重復(fù)該循環(huán)。
語法如下：
示例：
5.forEach
返回值：undefined;
是否改變原數(shù)組：改變原數(shù)組。
語法：
數(shù)組名.forEach((item, index, array) => { /* … */ }, thisValue)
item：指數(shù)組中的每一個元素；
index：指各個元素相對應(yīng)的索引；
array：指數(shù)組本身，一般可以不寫。
thisValue :?可選, 對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined";
示例：
6.some
數(shù)組中只要有一個元素符合條件就返回true，否則就返回false。
返回值：true | false;
是否改變原數(shù)組：不改變原數(shù)組。
語法：
數(shù)組名.some( (item, index, array) => { /* … */ }, thisValue)
同上...
示例：
7.every
數(shù)組中所有元素都符合條件才返回true，否則就返回false。
返回值：true | false;
是否改變原數(shù)組：不改變原數(shù)組。
語法：
數(shù)組名.every( (item, index, array) => { /* … */ }, thisValue)
同上...
示例：
8.filter
查找數(shù)組中符合條件的所有元素。
返回值：[] | 符合條件的數(shù)組;
是否改變原數(shù)組：不改變原數(shù)組。
語法：
數(shù)組名.filter( (item, index, array) => { /* … */ }, thisValue)
同上...
示例：
9.find
返回符合條件的第一個元素。
返回值：undefined | 符合條件的元素;
是否改變原數(shù)組：不改變原數(shù)組。
語法：
數(shù)組名.find( (item, index, array) => { /* … */ }, thisValue)
同上...
示例：
filter：返回[]或者數(shù)組;
find：返回undefined或者查找到的第一個元素
10.findLast
findLast與find類似，惟一區(qū)別就是查找順序-findLast是從右側(cè)往左側(cè)查找，找到最后一個（從前往后數(shù)是最后一個，從后往前數(shù)是第一個）符合條件的元素。
返回值：undefined | 符合條件的元素;
示例：
11.findIndex
返回符合條件的索引，沒有查到則返回-1。
返回值：-1 | 符合條件的元素索引;
示例：
12.findLastIndex
findLastIndex與findIndex類似，唯一區(qū)別是篩查順序。查到到最后一個符合條件的元素的索引。這個索引可是從前往后數(shù)的噢！
返回值：-1 | 符合條件的元素索引;
示例：
findLast 和 findLastIndex
是最新提案，目前在微信小程序中不支持，會報錯。不知道把小程序升級到最高版是否還會報錯。
13.map
map是一種映射。在需要為每一項元素按照指定規(guī)則變化時使用。返回新數(shù)組。
返回值：undefined | 符合條件的元素;
是否改變原數(shù)組：不改變原數(shù)組。
語法：
數(shù)組名.map( (item, index, array) => { /* … */ }, thisValue)
同上...
示例：
14.reduce
返回值:?最終累積結(jié)果：reduce方法返回最終的累積結(jié)果，可以是任意數(shù)據(jù)類型，如數(shù)字、字符串、對象或數(shù)組。
是否改變原數(shù)組: ?不改變原數(shù)組
語法：
數(shù)組名.reduce((prev, cur, index, arr) => { /* … */ }, init)
prev：表示上一次調(diào)用回調(diào)時的返回值，或者初始值 init;
cur：表示當(dāng)前正在處理的數(shù)組元素；
index：表示當(dāng)前正在處理的數(shù)組元素的索引，若提供 init 值，則索引為0，否則索引為1；
arr :?表示原數(shù)組，可不寫;
init：初始值，可選項。
當(dāng)沒有傳入初始值時，prev是從數(shù)組中第一個元素開始的，cur 是數(shù)組第二個元素。
但是當(dāng)傳入初始值（init）后,第一個 prev 將是初始值 init，cur 將是數(shù)組中的第一個元素。
reduce有多種應(yīng)用：
應(yīng)用1-求和：
示例：
應(yīng)用2-求平均：
求和與求平均類似，求和之后天的返回值再求平均就OK。
示例：
應(yīng)用3-數(shù)組無素最大值和最小值：
求數(shù)組中的最大值和最小值，簡直不要太簡單。直接使用只適合于一維數(shù)組。
示例：
應(yīng)用4-數(shù)組扁平化：
只適合一維或二維數(shù)組，多維不適合
示例：
15.reduceRight
reduceRight與reduce惟一區(qū)別就是迭代方向是從右側(cè)往前。
主要有以下兩種應(yīng)用：
應(yīng)用1-字符串返轉(zhuǎn)：
首先需要先將字符串轉(zhuǎn)化成數(shù)組-reduceRight是對數(shù)組的操作。
示例：
應(yīng)用1-扁平化樹結(jié)構(gòu)：
這個應(yīng)用是某大老發(fā)出的，不是很懂。留個記號，以備后用。
16.sort
sort的功能是排序。
返回值:?返回排序后的新數(shù)組；
是否改變原數(shù)組:?改變原數(shù)組
語法：
數(shù)組名.sort( (a, b) => { /* … */ })
a, b為前后兩個連續(xù)的元素。
如果返回值結(jié)果小于0，則a和b的順序不變;
如果返回值結(jié)果等于0，則a和b的順序不變;
如果返回值的結(jié)果大于0，a和b會交換位置。
就是根據(jù)以上規(guī)則進(jìn)行升序或者是降序排序的。
a - b：升序；
b - a：降序。
示例：
