[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 ```