[TOC] 陣列處理技巧是JavaScript 中非常重要的一塊，現在框架大亂斗的時代，框架基本上對于DOM 的處理都有屬于自己一套良好的方法。只要能夠對于陣列資料操作熟悉，配合框架就能夠將開發效率更上層樓。 本篇介紹到的方法有： ``` filter() find() forEach() map() every() some() reduce() ``` 直接點上方連結就能跳到指定區域 初始資料 本篇都是使用同一份陣列資料，當然你也可以把相關的函式直接貼在jsbin 或codepen 上就能看到結果，因為篇幅已經很長了，所以就不在另外補上范例檔。 ``` // 相同的陣列 var people = [ { name : 'Casper' , like : '鍋燒意面' , age : 18 }, { name : 'Wang' , like : '炒面' , age : 24 }, { name : 'Bobo' , like : '蘿卜泥' , age : 1 }, { name : '鹵蛋' , like : '蘿卜泥' , age : 3 } ]; ``` ## Array.prototype.filter() filter() 會回傳一個陣列，其條件是return 后方為true 的物件，很適合用在搜尋符合條件的資料。 ``` var filterEmpty = people.filter( function ( item, index, array ) { }); console .log(filterEmpty); //沒有條件，會是一個空陣列 var filterAgeThan5 = people.filter( function ( item, index, array ) { return item.age > 5 ; //取得大于五歲的 }); console .log(filterAgeThan5); // Casper, Wang這兩個物件 var filterDouble = people.filter( function ( item, index, array ) { return index % 2 === 1 ; //取得陣列中雙數的物件 }); console .log(filterDouble); // Wang,鹵蛋這兩個物件 ``` ## Array.prototype.find() find()與filter()很像，但find() 只會回傳一次值，且是第一次為true的值。 ``` var findEmpty = people.find( function ( item, index, array ) { }); console .log(findEmpty); //沒有條件，會是undefined var findAgeThan5 = people.find( function ( item, index, array ) { return item.age > 5 ; //取得大于五歲的 }); console .log(findAgeThan5); //雖然答案有兩個，但只會回傳Casper這一個物件 var findLike = people.find( function ( item, index, array ) { return item.like === '蘿卜泥' ; //取得陣列like === '蘿卜泥' }); console .log(findLike); //雖然答案有兩個，但只會回傳第一個Bobo物件 ``` ## Array.prototype.forEach() forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。 ``` var forEachIt = people.forEach( function ( item, index, array ) { console .log(item, index, array); //物件,索引,全部陣列 return item; // forEach沒在return的，所以這邊寫了也沒用 }); console .log(forEachIt); // undefined people.forEach( function ( item, index, array ) { item.age = item.age + 1 ; // forEach就如同for，不過寫法更容易 }); console .log(people); //全部age + 1 ``` ## Array.prototype.map() 使用map() 時他需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。 如果不回傳則是 undefined 回傳數量等于原始陣列的長度 這很適合將原始的變數運算后重新組合一個新的陣列。 ``` var mapEmpty = people.map( function ( item, index, array ) { }); console .log(mapEmpty); // [undefined, undefined, undefined, undefined] var mapAgeThan5 = people.map( function ( item, index, array ) { return item.age > 5 ; //比較大于五歲的 }); console .log(mapAgeThan5); // [true, true, false, false] var mapAgeThan5_2 = people.map( function ( item, index, array ) { // 錯誤示范 if (item.age > 5 ) { return item; //回傳大于五歲的 } return false ; //別以為空的或是false就不會回傳 }); console .log(mapAgeThan5_2); // [{name: 'Casper'...}, {name: 'Wang'...}, false, false] var mapEat = people.map( function ( item, index, array ) { if (item.like !== '蘿卜泥' ) { return ` ${item.like}好吃` ; } else { return ` ${item.like}不好吃` ; } }); console .log(mapEat); // ["鍋燒意面好吃", "炒面好吃", "蘿卜泥不好吃", "蘿卜泥不好吃"] ``` ## Array.prototype.every() every()可以檢查所有的陣列是否符合條件，這僅會回傳一個值trueor false，可以用來檢查陣列中的內容是否符合特定條件。 ``` var array = [ { name : 'Casper' , like : '鍋燒意面' , age : 18 }, { name : 'Wang' , like : '炒面' , age : 24 }, { name : 'Bobo' , like : '蘿卜泥' , age : 1 }, { name : '鹵蛋' , like : '蘿卜泥' , age : 3 } ]; var ans = array.every( function ( item, index, array ) { console .log(item, index, array); //物件,索引,全部陣列 return item.age > 10 //當全部age大于10才能回傳true }); console .log(ans); // false:只要有部分不符合，則為false var ans2 = array.every( function ( item, index, array ) { return item.age < 25 }); console .log(ans2); // true:全部age都小于25 ``` ## Array.prototype.some() some() 與every() 非常接近，都是回傳true or false，差異僅在every() 需完全符合，some() 僅需要部分符合。 ``` var ans = people.some( function ( item, index, array ) { return item.age > 10 //當全部age大于10才能回傳true }); console .log(ans); // true:只要有部分符合，則為true var ans2 = people.some( function ( item, index, array ) { return item.age < 25 }); console .log(ans2); // true:只要有部分符合，則為true var ans2 = people.some( function ( item, index, array ) { return item.age > 25 }); console .log(ans2); // false:全部都不符合則為false ``` ## Array.prototype.reduce() reduce() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算，參數包含以下： accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值 currentValue: 當前變數 currentIndex: 當前索引 array: 全部陣列 ``` var reduceEmpty = people.reduce( function ( accumulator, currentValue, currentIndex, array ) { }); console .log(reduceEmpty); //沒有條件，會是undefined var reducePlus = people.reduce( function ( accumulator, currentValue, currentIndex, array ) { // 分別為前一個回傳值, 目前值, 當前索引值 console .log(accumulator, currentValue, currentIndex); return accumulator + currentValue.age; //與前一個值相加 }, 0 ); //傳入初始化值為0 console .log(reducePlus); //總和為46 var reducePlus = people.reduce( function ( accumulator, currentValue, currentIndex, array ) { console .log( 'reduce' , accumulator, currentValue, currentIndex) return Math .max( accumulator, currentValue.age ); //與前一個值比較哪個大 }, 0 ); console .log(reducePlus); //最大值為24 ``` reduce()的使用方法更為豐富，想認識更詳細可參考MDN。 ## 其它 預設的陣列行為內的this是指向window (本篇中除了reduce()是傳入初始資料)，如果要改，可以在function后傳入。 ``` // arr.forEach(function callback(currentValue, index, array) { // your iterator // }[, thisArg]); var ans3 = people.forEach( function ( item, index, array ) { console .log( this ) //這邊的this就會使用后方傳入的 return item.age < 25 }, people); //傳入的物件，替代this，如果無則是window ```