前端數據操作過程中，少不免要對數組進行處理。那數組裏面提供的方法常用到的簡單的做個整理，主要是數組的過濾、遍歷和迭代。
- 遍歷：按一定順序查看數組裏面的每一個元素值，可以處理得到相應的值或者得到最終值。
- 過濾：將滿足條件的元素篩選出來，返回數組filter。
- 迭代：指依次計算元素，元素前後相互影響計算值，最後返回一個結果值。
1.遍歷
for循環：遍歷數組最常用的方法，適用於數組已知，知道其具體值、具體長度的情況。
var arr = [1,2,3,4,5,6,7,8]
for(var a=0;a<arr.length;a++){
// console.log(typeof a) //number//索引是數字類型,藍色字體
console.log(a+""+arr[a])
}
for in:遍歷的是數組的屬性名稱，可以用來遍歷對象。一個數組實際上也是一個對象，它的每個元素的索引被視爲一個屬性。
var arr = [1,2,3,4,5,6,7,8]
for(var i in arr){
// console.log(typeof i) //string//索引是字符串類型
console.log(i+arr[i])
}
arr.value = "val";
for(var i in arr){
console.log(i+' '+arr[i])
}
console.log(arr) //[1,2,3,4,5,6,7,8,value:'val']
alert(arr) //1,2,3,4,5,6,7,8
for和for in的區別：
- for循環需要知道數組的長度，循環的是一個已知的數組；而for in可以循環未知的數組，並不需要知道其長度；
- for in遍歷的是數組的屬性名稱，可以用來遍歷對象；而for遍歷的是數組的每一項，遍歷的是個值，不能用來遍歷對象；
- for in可以遍歷到數組添加的自定義屬性，而for不能；
- for和for in的索引值類型不同：for索引是number類型，而for in索引是string類型。
forEach:這個方法是有ES5提供的
var arr = [1,2,3,4,5,6,7,8]
arr.value = "val";
arr.forEach(function(item,index){
console.log(""+index+item)
})
var arr1 = [1,2,3,4,,5,6,7,8]
arr1.forEach(function(item,index){
console.log(""+index+item)
})
對於forEach,未賦值的值是不會在foreach循環迭代的，但是手動賦值爲undefined的元素是會被列出的，01 12 23 34 55 66 77 88
如果是空“”，則結果是01 12 23 34 4 55 66 77 88，位置還是在的。foreach是數組的方法，不能用來遍歷對象。添加自定義屬性無效，不會遍歷到。
for of:該方法是有ES6提供的
var arr = [1,2,3,4,5,6,7,8]
var arr1 = [1,2,3,,5,6,7,8]
var obj = {one:1,two:2,three:3}
arr.value = "val";
for(var value of arr){
console.log(value)
}
for(var value of arr1){
console.log(value)
}
forEach和for of比較
- 不同點：
- 提出的時間不同，for each是ES5提出，for of是ES6提出；
- for of遍歷得到的是數組的項，沒得到數組的索引；
- 未賦值的值（數組項的位置上什麼都沒有），forEach得到的是空不展示，二for of得到的是undefined。
- 相同點：
- 都是數組的方法，不能用來遍歷對象；
- 自定義屬性不能遍歷到；
- 不能用來遍歷屬性名。
for in和for of比較，區別（此處參考另一篇博文）：
- 循環對象屬性用for in,遍歷數組用for of
- for in循環出來的是key，for of循環出來的是value
- for in 是ES5標準，for of 是ES6標準，兼容可能存在問題慎用
- for of不能遍歷普通的對象，需要和和Object.keys()搭配使用
- for...in 循環除了遍歷數組元素外，還會遍歷自定義屬性，for...of只可以循環可迭代的可迭代屬性，不可迭代屬性在循環中被忽略了。
map：遍歷數組，得到的結果還是一個數組。可以通過callback對數組元素進行操作，將操作結果放入數組中並返回該數組。
var arr = [1,2,3,4,,5,6,7,8]
var a = arr.map(function(item,i,array){
return item+''+i
})
console.log(a)
注：map是數組的方法，不用來遍歷對象，未賦值的值也不會迭代，只是位置存在，如上面代碼顯示結果：Array(9)展示就是
[0:"10",1:"21",2:"32",3:"43",5:"55",6:"66",7:"77",8:"88"]。遍歷的也是數組的項而不是屬性名。
every:當數組中的每一個元素在callback上被返回true時就返回true
var arr2 = ["hello",1,2,3,4,5]
var bol = arr2.every(function(item,i,array){
if(typeof item == "string"){
return item;
}
})
console.log(bol) //false
some：當數組中的某一元素在callback上被返回true時返回true
var arr2 = ["hello",1,2,3,4,5]
var bol1 = arr2.some(function(item,i,array){
if(typeof item == "string"){
return item;
}
})
console.log(bol1)
every()與some()對比
區別是：前者要求所有元素都符合條件才返回true,後者要求只要有符合條件的就返回true
相同點：對數組中元素每一項進行布爾運算，返回false和true。
2.過濾
filter：返回一個包含所有在回調函數上返回爲true的元素新數組，回調函數在此擔任的是過濾器的角色。
var arr = [1,2,3,4,,5,6,7,8]
var obj = {one:1,two:2,three:3}
arr.value = "val";
var b = arr.filter(function(item,i,array){
if(typeof item == "number"){
return item+""+i+""+array;
}
})
console.log(b)
注：1、filter不支持索引，回調不支持第二個參數；
2、當元素符和條件，過濾器就返回true,而filter則會返回所有符合過濾條件的元素；
3、屬性名無效，不支持對象遍歷的方法。
every()與filter()的區別：
- 後者會返回所有符合過濾條件的元素；
- 前者會判斷是不是數組中的所有元素都符合條件，並且返回的是布爾值
3.迭代
reduce：從前向後迭代。迭代從第二項開始，prev初始值爲第一項，cur初始值爲第二項。計算值自動傳給下一函數的prev，返回最後一次迭代產生的值。結果是1+2+3+4+5+6+7+8，如果是prev+cur，結果會是36。
var arr = [1,2,3,4,,5,6,7,8]
var ccc = arr.reduce(function(prev,cur,index,arry){
return prev+"+"+cur
})
console.log(ccc)
reduceRight：從後向前迭代。迭代從倒數第二項開始，prev初始值爲最後一項，cur初始值爲倒數第二項。計算值自動傳給下一函數的prev，返回最後一次迭代產生的值。結果是8+7+6+5+4+3+2+1，如果是prev+cur結果是36。
var arr = [1,2,3,4,,5,6,7,8]
var ccc = arr.reduceRight(function(prev,cur,index,arry){
return prev+"+"+cur
})
console.log(ccc)