有關js各種陣列遍歷

Mingsars發表於2019-03-01
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




複製程式碼

相關文章