1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 相同的阵列
var people = [
{
name : 'Casper' ,
like : '锅烧意面' ,
age : 18
},
{
name : 'Wang' ,
like : '炒面' ,
age : 24
},
{
name : 'Bobo' ,
like : '萝卜泥' ,
age : 1
},
{
name : '卤蛋' ,
like : '萝卜泥' ,
age : 3
}
];

filter()

filter() 会回传一个阵列,其条件是return 后方为true 的物件,很适合用在搜寻符合条件的资料。

1
2
3
4
5
6
7
8
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这两个物件

find()

find()与filter()很像,但find() 只会回传一次值,且是第一次为true的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
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物件

forEach()

forEach 是这几个阵列函式最单纯的一个,不会额外回传值,只单纯执行每个阵列内的物件或值。

1
2
3
4
5
6
7
8
9
10
11
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

map()

使用map() 时他需要回传一个值,他会透过函式内所回传的值组合成一个阵列。
如果不回传则是 undefined
回传数量等于原始阵列的长度
这很适合将原始的变数运算后重新组合一个新的阵列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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); // ["锅烧意面好吃", "炒面好吃", "萝卜泥不好吃", "萝卜泥不好吃"]

every()

every()可以检查所有的阵列是否符合条件,这仅会回传一个值trueor false,可以用来检查阵列中的内容是否符合特定条件。

1
2
3
4
5
6
7
8
9
10
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

some()

some() 与every() 非常接近,都是回传true or false,差异仅在every() 需完全符合,some() 仅需要部分符合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

reduce()

reduce() 和其他几个差异就很大了,他可以与前一个回传的值再次作运算,参数包含以下:
accumulator: 前一个参数,如果是第一个阵列的话,值是以另外传入或初始化的值
currentValue: 当前变数
currentIndex: 当前索引
array: 全部阵列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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