遍歷方法(12個) · record

**遍歷方法(12個):** js中遍歷數組并不會改變原始數組的方法總共有12個: **ES5:** `forEach`、`every` 、`some`、 `fliter`、`map`、`reduce`、`reduceRight`、 **ES6** `find`、`findIndex`、`keys`、`values`、`entries` **關于遍歷：** * 關于遍歷的效率，可以看一下這篇[詳解JS遍歷](http://louiszhai.github.io/2015/12/18/traverse/#%E6%B5%8B%E8%AF%95%E5%90%84%E6%96%B9%E6%B3%95%E6%95%88%E7%8E%87) * 盡量不要在遍歷的時候，修改后面要遍歷的值 * 盡量不要在遍歷的時候修改數組的長度（刪除/添加） forEach 定義: 按升序為數組中含有效值的每一項執行一次回調函數。語法： array.forEach(function(currentValue, index, arr), thisValue) 參數: function(必須): 數組中每個元素需要調用的函數。 >[info] 回調函數的參數 >>[success] 1. currentValue(必須),數組當前元素的值 >> 2. index(可選), 當前元素的索引值 >> 3. arr(可選),數組對象本身 hisValue(可選): 當執行回調函數時this綁定對象的值，默認值為undefined **關于forEach()你要知道：** * 無法中途退出循環，只能用return退出本次回調，進行下一次回調。 * 它總是返回 undefined值,即使你return了一個值。 **下面類似語法同樣適用這些規則** >[info] 1. 對于空數組是不會執行回調函數的 > 2. 對于已在迭代過程中刪除的元素，或者空元素會跳過回調函數 > 3. 遍歷次數再第一次循環前就會確定，再添加到數組中的元素不會被遍歷。 > 4. 如果已經存在的值被改變，則傳遞給 callback 的值是遍歷到他們那一刻的值。 eg: ~~~ let a = [1, 2, ,3]; // 最后第二個元素是空的，不會遍歷(undefined、null會遍歷) let obj = { name: 'OBKoro1' }; let result = a.forEach(function (value, index, array) { a[3] = '改變元素'; a.push('添加到尾端，不會被遍歷') console.log(value, 'forEach傳遞的第一個參數'); // 分別打印 1 ,2 ,改變元素 console.log(this.name); // OBKoro1 打印三次 this綁定在obj對象上 // break; // break會報錯 return value; // return只能結束本次回調會執行下次回調 console.log('不會執行，因為return 會執行下一次循環回調') }, obj); console.log(result); // 即使return了一個值,也還是返回undefined // 回調函數也接受接頭函數寫法 ~~~ **every 檢測數組所有元素是否都符合判斷條件** 定義: 方法用于檢測數組所有元素是否都符合函數定義的條件語法： array.every(function(currentValue, index, arr), thisValue) 參數:(這幾個方法的參數，語法都類似) function(必須): 數組中每個元素需要調用的函數。 >[info]回調函數的參數 >>[success] 1. currentValue(必須),數組當前元素的值 >> 2. index(可選), 當前元素的索引值 >> 3. arr(可選),數組對象本身 thisValue(可選): 當執行回調函數時this綁定對象的值，默認值為undefined 方法返回值規則: 1. 如果數組中檢測到有一個元素不滿足，則整個表達式返回 false，且剩余的元素不會再進行檢測。 2. 如果所有元素都滿足條件，則返回 true。 eg: ~~~ function isBigEnough(element, index, array) { return element >= 10; // 判斷數組中的所有元素是否都大于10 } let result = [12, 5, 8, 130, 44].every(isBigEnough); // false let result = [12, 54, 18, 130, 44].every(isBigEnough); // true // 接受箭頭函數寫法 [12, 5, 8, 130, 44].every(x => x >= 10); // false [12, 54, 18, 130, 44].every(x => x >= 10); // true ~~~ **some 數組中的是否有滿足判斷條件的元素** 定義：數組中的是否有滿足判斷條件的元素語法： array.some(function(currentValue, index, arr), thisValue) 參數:(這幾個方法的參數，語法都類似) function(必須): 數組中每個元素需要調用的函數。 >[info] 回調函數的參數 >>[success]1. currentValue(必須),數組當前元素的值 >>2. index(可選), 當前元素的索引值 >>3. arr(可選),數組對象本身 thisValue(可選): 當執行回調函數時this綁定對象的值，默認值為undefined 方法返回值規則： 1. 如果有一個元素滿足條件，則表達式返回true, 剩余的元素不會再執行檢測。 2. 如果沒有滿足條件的元素，則返回false。 ~~~ function isBigEnough(element, index, array) { return (element >= 10); //數組中是否有一個元素大于 10 } let result = [2, 5, 8, 1, 4].some(isBigEnough); // false let result = [12, 5, 8, 1, 4].some(isBigEnough); // true ~~~ **filter 過濾原始數組，返回新數組** 定義: 返回一個新數組, 其包含通過所提供函數實現的測試的所有元素。語法： let new_array = arr.filter(function(currentValue, index, arr), thisArg) 參數:(這幾個方法的參數，語法都類似) function(必須): 數組中每個元素需要調用的函數。 >[info]回調函數的參數 >>[success] 1. currentValue(必須),數組當前元素的值 >> 2. index(可選), 當前元素的索引值 >> 3. arr(可選),數組對象本身 thisValue(可選): 當執行回調函數時this綁定對象的值，默認值為undefined eg: ~~~ let a = [32, 33, 16, 40]; let result = a.filter(function (value, index, array) { return value >= 18; // 返回a數組中所有大于18的元素 }); console.log(result,a); // [32,33,40] [32,33,16,40] ~~~ **map 對數組中的每個元素進行處理，返回新的數組** 定義：創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。語法： let new\_array = arr.map(function(currentValue, index, arr), thisArg) 參數:(這幾個方法的參數，語法都類似) function(必須): 數組中每個元素需要調用的函數。 >[info]回調函數的參數 >>[success] 1. currentValue(必須),數組當前元素的值 >> 2. index(可選), 當前元素的索引值 >> 3. arr(可選),數組對象本身 thisValue(可選): 當執行回調函數時this綁定對象的值，默認值為undefined eg: ~~~ let a = ['1','2','3','4']; let result = a.map(function (value, index, array) { return value + '新數組的新元素' }); console.log(result, a); // ["1新數組的新元素","2新數組的新元素","3新數組的新元素","4新數組的新元素"] ["1","2","3","4 ~~~ **reduce 為數組提供累加器，合并為一個值** 定義：reduce() 方法對累加器和數組中的每個元素（從左到右）應用一個函數，最終合并為一個值。語法： array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 參數： function(必須): 數組中每個元素需要調用的函數。 >[info]回調函數的參數 >>[success] 1. total(必須)，初始值, 或者上一次調用回調返回的值 >> 2. currentValue(必須),數組當前元素的值 >> 3. index(可選), 當前元素的索引值 >> 4. arr(可選),數組對象本身 initialValue(可選): 指定第一次回調的第一個參數。回調第一次執行時: * 如果 initialValue 在調用 reduce 時被提供，那么第一個 total 將等于 initialValue，此時 currentValue 等于數組中的第一個值； * 如果 initialValue 未被提供，那么 total 等于數組中的第一個值，currentValue 等于數組中的第二個值。此時如果數組為空，那么將拋出 TypeError。 * 如果數組僅有一個元素，并且沒有提供 initialValue，或提供了 initialValue 但數組為空，那么回調不會被執行，數組的唯一值將被返回。 eg: ~~~ // 數組求和 let sum = [0, 1, 2, 3].reduce(function (a, b) { return a + b; }, 0); // 6 // 將二維數組轉化為一維將數組元素展開 let flattened = [[0, 1], [2, 3], [4, 5]].reduce( (a, b) => a.concat(b), [] ); // [0, 1, 2, 3, 4, 5] ~~~ **reduceRight 從右至左累加** 這個方法除了與reduce執行方向相反外，其他完全與其一致，請參考上述 reduce 方法介紹。 ***** **ES6：find()& findIndex() 根據條件找到數組成員** find()定義：用于找出第一個符合條件的數組成員，并返回該成員，如果沒有符合條件的成員，則返回undefined。 findIndex()定義：返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。這兩個方法語法： ~~~ let new_array = arr.find(function(currentValue, index, arr), thisArg) let new_array = arr.findIndex(function(currentValue, index, arr), thisArg) ~~~ 參數:(這幾個方法的參數，語法都類似) function(必須): 數組中每個元素需要調用的函數。 >[info] 回調函數的參數 >>[success] 1. currentValue(必須),數組當前元素的值 >> 2. index(可選), 當前元素的索引值 >> 3. arr(可選),數組對象本身 thisValue(可選): 當執行回調函數時this綁定對象的值，默認值為undefined 這兩個方法都可以識別NaN,彌補了indexOf的不足. eg: ~~~ // find let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5 let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN // findIndex let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2 let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4 ~~~ 瀏覽器兼容(MDN):Chrome 45,Firefox 25,Opera 32, Safari 8, Edge yes, **ES6 keys()&values()&entries() 遍歷鍵名、遍歷鍵值、遍歷鍵名+鍵值** 定義：三個方法都返回一個新的 Array Iterator 對象，對象根據方法不同包含不同的值。語法： ~~~ array.keys() array.values() array.entries() ~~~ 參數：無。遍歷栗子(摘自[ECMAScript 6 入門](http://es6.ruanyifeng.com/#docs/array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B%E7%9A%84-entries%EF%BC%8Ckeys-%E5%92%8C-values))： ~~~ for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b" ~~~ 在for..of中如果遍歷中途要退出，可以使用break退出循環。如果不使用for...of循環，可以手動調用遍歷器對象的next方法，進行遍歷: ~~~ let letter = ['a', 'b', 'c']; let entries = letter.entries(); console.log(entries.next().value); // [0, 'a'] console.log(entries.next().value); // [1, 'b'] console.log(entries.next().value); // [2, 'c'] ~~~ entries()瀏覽器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1 keys()瀏覽器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8, 注意:目前只有Safari 9支持,，其他瀏覽器未實現，babel轉碼器也還未實現