有關js各類數組遍歷

js數組遍歷是在數組操做中常常用到的，前段時間學習vue視頻，上邊順帶講解了js數組的遍歷方法，當時沒有留下筆記，到今天來回想，果真仍是忘記了一些，因而仍是選擇開始在這裏記錄下來。廢話很少說，下面開始。

1.for循環

這個方法應該是js學習者最早接觸到的js遍歷方法，反正我是第一個接觸到的，也許是我水平低，我常常用的就是這個方法。

//假設存在一個數組arr
let arr = [1,2,3,4,5];

//for循環
for(let i = 0; i < arr.length; i++){
    //do someing……

    console.log(arr[i]);
}

//console.log
1
2
3
4
5複製代碼

2.forEach循環

這個方法使用次數是僅次於上面的for循環的（我的觀點），可是，實際效率其實並無for循環高。forEach循環的參數有兩個，第一個爲參數爲實際操做的函數function，第二個參數that是改變this指向的，通常也不多用。forEach參數的函數中也有兩個參數，第一個是循環的每一項item，第二個參數是每一項對應的下標index。注意，使用中，that和index都可不寫不用,並且forEach循環不支持return

//假設存在一個數組arr
let arr = [1,2,3,4,5];

//forEach循環
arr.forEach(function(item,index){
    //do someing……

    console.log(arr[i]);
},that);

//console.log
1
2
3
4
5
複製代碼

3.for in循環

這確實也是一個循環，可是平時基本不會用這個去遍歷一個數組，由於他的「弊端」很明顯，數組的私有屬性也會遍歷。默認遍歷的是數組的key值，因此會是string類型

//假設存在一個數組arr
let arr = [1,2,3,4,5];
//給數組添加一個私有屬性
arr.a = "key"

//for in循環
for(let key in arr){
    //do someing……

    console.log(typeof(key));
}

//console.log
//注意這裏打印出來6個，for in循環會將數組的私有屬性也遍歷
string
string
string
string
string
string複製代碼

4.for of循環(ES6)

for of循環是es6的方法，他彌補了forEach和for in循環的弊端。既有return，並且不會遍歷數組的私有屬性。注意：for of循環不能遍歷對象

//假設存在一個數組arr
let arr = [1,2,3,4,5];
//給數組添加一個私有屬性
arr.a = "key"

//for of循環
for(let val of arr){
    //do someing……

    console.log(val);
}

//console.log
//注意這裏打印出來5個，for of循環不會將數組的私有屬性遍歷
1
2
3
4
5複製代碼

5.filter過濾器

filter過濾器就我的而言，也是一個比較經常使用的方法。他會去遍歷一個數組並返回一個新的數組，因此並不會影響原數組。遍歷數組每一項，回調函數返回了true，就把這一項添加到新數組。其中回調函數有兩個參數(item,index)，item是每一項，index是下標。index能夠不寫不用

//假設存在一個數組arr
let arr = [1,2,3,4,5];
//聲明一個新的空數組
let newArr = [];
//給數組添加一個私有屬性
arr.a = "key"

//filter過濾器
//這裏使用的是es6箭頭函數
newArr = arr.filter(item=>item>3);
//這裏使用的是es5語法,和上面的操做相等
newArr = arr.filter(function(item){
    return item > 3;
})
console.log(newArr)

//console.log
[4,5]複製代碼

6.map映射

map映射會去遍歷數組的每一項，可是不會操做改變原數組，同filter同樣會返回一個新的數組。回調函數返回的是什麼，對應的新數組的那一項就會是什麼

//假設存在一個數組arr
let arr = [1,2,3,4,5];
//聲明一個新的空數組
let newArr = [];
//給數組添加一個私有屬性
arr.a = "key"

//map映射
//這裏使用的是es6語法
newArr = arr.map(item=>`<div>${item}</div>`);
//這裏是通常語法
newArr = arr.map(function(item){
    return "<div>" + item + "</div>";
})
console.log(newArr)

//console.log
[
    "<div>1</div>",
    "<div>2</div>",
    "<div>3</div>",
    "<div>4</div>",
    "<div>5</div>"
]複製代碼

7.include和find

include和find都是es6的的方法。include有一個參數，它會遍歷數組的每一項與參數對比，若是存在該參數，則返回true。而find的參數是一個回調函數，函數的參數是每一項以及對應下標，find會返回匹配的那一項，一旦匹配就不會繼續往下匹配,find返回一個新的數組

//假設存在一個數組arr
let arr = [1,2,3,4,5,55];

//include
console.log(arr.include(5));

//include console
true

//find
let res = arr.find(function(item,index){
    //若是這一項包含了5則返回true
    return item.toString().indexOf(5) > -1;
})
console.log(res);

//find console
5複製代碼

8.some和every

some和every是兩個做用截然相反的方法。some遍歷數組，找到true，即返回true，不然返回false；every則是找到false返回false，不然返回true

//假設存在一個數組arr
let arr = [1,2,3,4,5,55];

//some
let someResult = arr.some(item=>item > 4);
console.log(someResult);

//some console
true

//every
let evevyResult = arr.every(item=>item > 0);
console.log(everyResult);

//every console
true複製代碼

9.reduce

說實話，這個方法我到如今都不太明白，沒法在這裏說明，但願你們本身查閱

2018.5.30 更新~

社區仍是一個好地方，取長補短。原本覺得一篇拙見不會有人來注意，就沒有管理這篇文章，理解了reduce以後再來更新筆記，發現就有一些大牛來爲我指點迷津了。在此感謝各位大牛的指正與指教~

正文：

reduce是es5的方法，從數組的第一項開始逐步迭代至最後一項。reduce的參數能夠有兩個，第一個是一個回調函數（必需），函數參數可包括四個：prev，cur，index，arr。其中，prev是前一個迭代的值，cur是當前迭代的一項，index是當前一項的下標，arr則是迭代的原數組；reduce的第二個參數是傳入的基礎值，可不用。若是不用，迭代將從數組的第一項開始

//假設存在一個數組arr
let arr = [1,2,3,4,5];

//reduce
//不傳入第二個參數
let result = arr.reduce((prev,cur,index,arr)=>prev+cur);

console.log(result);

//console
15

//傳入第二個參數
let result = arr.reduce((prev,cur,index,arr)=>{return prev+cur;},100);

console.log(result);

//console
115




複製代碼