一文完全學以至用js數組之循環

最近作了一個新項目，閒暇review了下代碼，發現本身用了不少for循環（簡潔明瞭），再看下別人的代碼幾乎沒有for，幾乎全是foreach和map循環，難道是我寫的太low了嗎？其實在寫碼的時候有時候也有選擇恐慌症，到底該用哪一種循環，最後發現其餘方法老是不能爲我所用，最後老是選擇了最簡單的for，怎一個好用了得，也早想花點時間好好研究比較一下數組的這些循環方法，下面就開始正文啦😄！

1. 在ES5中經常使用的10種數組遍歷方法:

1. for循環語句
2. Array.prototype.forEach
3. Array.prototype.map
4. Array.prototype.filter
5. Array.prototype.reduce
6. Array.prototype.some
7. Array.prototype.every
8. Array.prototype.indexOf
9. Array.prototype.lastIndexOf
10. for...in循環語句

1. for：簡潔明瞭，通俗易懂，可能須要多寫點代碼，多定義幾個變量，可是爲我所用，爲我所愛。

「普通版」
let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] * 2;
}
console.log(arr);  //[2, 4, 6, 8, 10]
 
「升級版」
let arr = [1, 2, 3, 4, 5];
for(let i = 0; len = arr.length,i < len; i++) {
    arr[i] = arr[i] * 2;
}
console.log(arr); //[2, 4, 6, 8, 10]
複製代碼

2. forEach：接收兩個參數，第一個參數是在每一項上運行的函數（擁有三個參數），第二個參數「可選的」是運行該函數的做用域對象（影響this的值），return不能中斷函數繼續執行，因此沒有返回值，不能改變原數組，使用方便通常用來代替for，可是沒for性能高，並且有兼容性（IE6-8）。

let arr = [1, 2, 3, 4, 5];
arr.forEach((value, index, array) => {
    return value * 2;
});
console.log(arr);  //[1, 2, 3, 4, 5]
複製代碼

3. map：基本用法和foreach相同，不一樣的是能夠return返回值,可是不改變原數組，通常用來修改數組的值從而映射爲一個新數組。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.map((value, index, array) => {
    return value * 2;
});
console.log(arrs); //[2, 4, 6, 8, 10]
複製代碼

4. filter：顧名思義是"過濾"，就是去掉不想要的值，return true爲想要的值，return false則爲去掉的值，通常用來過濾一個數組，不改變原來的數組。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.filter((value, index, array) => {
    if (value > 2) {
        return true;
    } else {
        return false;
    }
});
console.log(arrs); //[3, 4, 5]
複製代碼

5. reduce：能夠實現一個累加器的功能，將數組的每一個值（從左到右）累加起來，不一樣的是有四個參數，prev表示前兩個值的和（沒有定義初始值時爲第一個值），next爲後一個值。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.reduce((prev, next, index, array) => {
    console.log(prev);   // 1，3，6，10
    console.log(next);   // 2，3，4，5
    return prev + next;
});
console.log(arrs);  //15
複製代碼

6. some：相似於filter，不一樣的是返回值爲Boolean,不是篩選一個新的數組，而是篩選有沒符合條件的值，只要有一個值知足即馬上返回true，再也不繼續執行，不然返回false。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.some((value, index, array) => {
    return value > 3;
});
console.log(arrs); // true
複製代碼

7. every：相似於some，不一樣的是找到符合條件的值會繼續執行，若是每一個值都知足條件纔會返回true，不然就是false。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.every((value, index, array) => {
    return value > 3;
});
console.log(arrs);  //false
 
let arr = [ 4, 5];
let arrs = arr.every((value, index, array) => {
    return value > 3;
});
console.log(arrs);  //true
複製代碼

8. indexOf：數組中的這個方法和字符串中的幾乎同樣，都是找到一個知足條件的值就不繼續執行了，返回值是知足條件值的下標，不然返回-1。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.indexOf(2);
console.log(arrs);  // 1
 
let arr = [1, 2, 3, 4, 5];
let arrs = arr.indexOf(6);
console.log(arrs); // -1
複製代碼

9. lastIndexOf：相似於indexOf，不一樣的是查找方向是從後向前。

let arr = [1, 2, 3, 4, 5, 1];
let arrs = arr.lastIndexOf(1);
console.log(arrs); // 5
 
let arr = [1, 2, 3, 4, 5, 1];
let arrs = arr.lastIndexOf(6);
console.log(arrs); // -1
複製代碼

10. for...in：主要用來遍歷對象，其實數組的本質也是以key和value的鍵值對存在的，數組遍歷的是下標，對象遍歷的是key,通常用來遍歷對象。

let arr = [1, 2, 3, 4, 5];
for(let i in arr) {
    console.log(i);  // 0, 1, 2, 3, 4
}
 
let arr = {name: "lewis", age: 25};
for(let i in arr) {
    console.log(i);  // name, age
}
複製代碼

2. 在ES6中經常使用的for...of數組遍歷方法:

for...of: JavaScript原有的for...in循環，只能得到對象的鍵名，不能直接獲取鍵值。ES6 提供for...of循環，容許遍歷得到鍵值，可是不能循環對象，通常用來循環數組。

let arr = [1, 2, 3, 4, 5];
for (let i in arr) {
  console.log(i);  // 0, 1, 2, 3, 4
}
 
for (let i of arr) {
  console.log(i);  // 1, 2, 3, 4, 5
}
複製代碼

總結： 看到這裏相信你已經把基本用法和示例弄的差很少了，接下來總結一下，通常的循環用for,for...in,for...of和forEach,須要映射爲新數組的用map，須要篩選出想要的用filter，數值須要進行累加的用reduce，若是要找一些值用some和every，而且想知道值的具體位置的能夠用indexOf和lastIndexOf，接下來就是對症下藥，因地制宜了，相信你會熟練掌握並準確應用了。

3. 經常使用的通常數組循環for,for...in,for...of和forEach/map性能對比：

let arr = Array(100).fill(5);
 
console.time("for循環");
for(let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] * 2;
}
console.timeEnd("for循環");  // for循環: 0.041ms
 
console.time("for...in循環");
for(let i in arr) {
    arr[i] = arr[i] * 2;
}
console.timeEnd("for...in循環"); // for...in循環: 0.126ms
 
console.time("for...of循環");
for(let i of arr) {
    arr[i] = arr[i] * 2;
}
console.timeEnd("for...of循環");  // for...of循環: 3532.695ms
 
console.time("forEach循環");
arr.forEach((value, index, arr) => {
    arr[index] = value * 2;
});
console.timeEnd("forEach循環");  // forEach循環: 0.103ms

console.time("map循環");
arr.map((value, index, arr) => {
    arr[index] = value * 2;
});
console.timeEnd("map循環"); //map循環: 0.086ms
複製代碼

  哈哈，通過屢次對比取平均值能夠明顯的看到for循環秒殺其餘方法（這只是100個數，若是更多的數效果將會更明顯），原來本身的方法一點都不low啊，只要在正確的場合應用正確的方法並簡單有效纔是最好的，之後通常的循環你們能夠大膽的使用for循環啦！

經常使用的檢測數組的方法：

1. instanceof
2. Array.isArray()
3. Object.prototype.toString.call() 「推薦使用這個」

精彩預告：最近歷時兩個月的大需求遇到不少深坑，接下來會相繼分享出來，以此共勉😂

更多精彩內容歡迎關注個人公衆號【天道酬勤Lewis】