// 相同的阵列
var people = [
{
name : 'Casper' ,
like : '锅烧意面' ,
age : 18
},
{
name : 'Wang' ,
like : '炒面' ,
age : 24
},
{
name : 'Bobo' ,
like : '萝卜泥' ,
age : 1
},
{
name : '卤蛋' ,
like : '萝卜泥' ,
age : 3
}
];
1.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 ; //取得大于五岁的 如果这边符合条件 只要为ture即可
});
console .log(filterAgeThan5); // Casper, Wang这两个物件
2.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物件
3.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
4.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); // ["锅烧意面好吃", "炒面好吃", "萝卜泥不好吃", "萝卜泥不好吃"]
5.Array.prototype.every()
every()可以检查所有的阵列是否符合条件,这仅会回传一个值trueor false,可以用来检查阵列中的内容是否符合特定条件。
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
6.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
7.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
转载于 https://wcc723.github.io/javascript/2017/06/29/es6-native-array/