一、前言
這篇文章主要對JS中數組遍歷的方法做一個總結：
1、find() findIndex()
2、forEach
3、every
4、map
5、reduce
二、主要內容
1、find()、findIndex()
用法：用於找出第一個符合條件的數組成員，他的參數是一個回調函數，會遍歷所有元素，執行你給定的帶有條件返回值的函數，如果滿足了你給的條件函數，就返回第一個符合的元素，找不到返回undefined。
下面封裝這個find()函數：
//要遍歷的數組 var users = [ {id : 1, name: '張三'}, {id : 2, name: '張三'}, {id : 3, name: '張三'}, {id : 4, name: '張三'}, {id : 5, name: '張三'}, ] //在原型上定義一個方法，給他一個參數，這個參數的類型是一個函數 Array.prototype.myFind = function(conditionFun){ //誰調用這個方法this就是誰 for(var i=0; i< this.length; i++){ //如果滿足了傳過來的那個條件函數，就返回當前的元素 if(conditionFun(this[i], i)){ return this[i] } } } //用數組調用 var ret = users.myFind(function (item, index) { return item.id === 2 }) console.log(ret)
2、forEach()
用法： foreach()函數會將數組從頭到尾遍歷一遍，可以在回調函數中傳三個參數，
var data = [1,2,3,4,5]; //只傳一個參數，item為數組元素 data.forEach(function (item){ console.log(item) }) //傳兩個參數，item為數組元素，index為元素下標 data.forEach(function (item, index){ console.log(`${item}=========${index}`) }) //傳三個參數，item為數組元素，index為數組下標，arr為數組 data.forEach(function (item, index, arr){ console.log(`${item}=========${index}====${arr}`) })
3、every
用法：用於檢測數組中所有的元素是否都符合指定條件，這個條件通過回調函數傳遞。如果數組中有一個元素不滿足，則整個表達式返回false, 剩余的元素不再進行檢查。如果所有元素都滿足，則返回true
用法如下：
function isBigEnough(element, index, array) { return (element >= 10); } var passed1 = [12, 5, 8, 130, 44].every(isBigEnough); // passed1 is false console.log(passed1) var passed2 = [12, 54, 18, 130, 44].every(isBigEnough); // passed2 is true console.log(passed2)
4、some
用法：與every()的用法恰巧有點相反。some()方法用於檢測數組中的元素是否滿足指定條件，該條件由函數提供，會一次執行數組中的每一個元素，如果有一個滿足條件，整個表達式為true,剩余元素不在檢測。如果沒有滿足條件的，則返回false
用法如下：
function isBigEnough(element, index, array) { return (element >= 10); } var passed1 = [2, 5, 8, 6, 9].some(isBigEnough); // passed1 is false console.log(passed1) var passed2 = [12, 54, 18, 130, 44].some(isBigEnough); // passed2 is true console.log(passed2)
5、include()
用法：函數用來判斷是否包含指定的值，包含返回true,不包含返回false
例子：
let site = ['runoob', 'google', 'taobao']; site.includes('runoob'); // true site.includes('baidu'); // false
6、map
用法：map稱為映射，也是鍵值對集合，鍵不僅僅是字符串還可以是其他類型，比如對象。map()的參數是一個回調函數，會根據回調函數映射成一個新的數組
方法一：
var data = [1,2,3,4] var data2 = data.map(function (item) { return item*item //這相當於將原來數組元素變成了它的平方 //item*item 一定要給回調函數返回值，如果沒有會默認返回undefined }); console.log(data2)
用法二：map()回調中第一個參數為對象，我們可以直接拿到對象里面的某個屬性
var users = [ {name: "張三", "email": "zhang@email.com"}, {name: "小王", "email": "wang@email.com"}, {name: "小紅", "email": "hong@email.com"} ]; var emails = users.map(function (user) { return user.email; }); console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com
7、filter
用法：filter為篩選。filter() 的參數是一個過濾條件，這個條件是回調函數
var arr = [1, 2, 3, 4] arr=arr.filter(function (item) { return item%2 //這里過濾掉了偶數，只留下奇數 }) console.log(arr) arr = [1, 2]
用法二：獲得以zhang開頭的郵件
var users = [
{name: "張三", "email": "zhang@email.com"}, {name: "小王", "email": "wang@email.com"}, {name: "小紅", "email": "hong@email.com"} ];
var emailsZhang = users // 獲得郵件 .map(function (user) { return user.email; }) // 篩選出zhang開頭的郵件 .filter(function(email) { return /^zhang/.test(email); }); console.log(emailsZhang);
8、reduce() 函數可以理解為進去一堆，出來的是一個，參數接受的是一個回調函數
arr.reduce(function(prev,cur,index,arr){
...
}, init);
arr 表示將要原數組；
prev 表示上一次調用回調時的返回值，或者初始值 init;
cur 表示當前正在處理的數組元素；
index 表示當前正在處理的數組元素的索引，若提供 init 值，則索引為0，否則索引為1；
init 表示初始值。
var arr = [1, 2, 3, 4, 5] var sum = arr.reduce(function (prev, cur) { return prev + cur; },0); //這里傳入的初值為0,第一次計算0+1=1，的值作為下一輪的prev的值 1+2=3 繼續作為下一輪的orev值
reduce()方法參考：https://www.jianshu.com/p/541b84c9df90
三、總結