el's blog

A noder, FEer. use express, vue...etc

Js数组代替写循环结构的方法
上了循环的控制结构会使代码看起来变得复杂,故而这里提几个替代的函数,虽然函数内部实现肯定也用了循环,但是希望能使代码逻辑更为清晰。

简介

循环是个不可避免的结构,而且不好复用,同时循环还很难加入其他操作中。更麻烦的是,使用循环就意味着在每一个新的迭代中有更多变化需要响应。

上了循环的控制结构会使代码看起来变得复杂,故而这里提几个替代的函数,虽然函数内部实现肯定也用了循环,但是希望能使代码逻辑更为清晰。

假设有一个如下的数组我们需要对它进行一些操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var list = [
{
name: 'Zhao',
age: 22,
cash: 1000
},
{
name: 'Qian',
age: 26,
cash: 5000
},
{
name: 'Sun',
age: 17,
cash: 300
},
{
name: 'Li',
age: 30,
cash: 9000
}
];

map

让原数组通过某种计算产生一个新数组,新数组顺序对应原数组。

比如说希望得到所有人名字的数组,原先forEach遍历的时候得这么写

1
2
3
4
5
const name = [];
list.forEach((v, k) => {
name.push(v.name);
});
console.log(name);

因为for循环里的逻辑非常难拆分,为了写的逻辑更清晰些,于是改用map函数

1
2
3
4
5
var names = list.map(item => {
return item.name
});
console.log(names); //["Zhao", "Qian", "Sun", "Li"]

some

该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true。

比如说这里希望得到一个布尔值结果得知是否有人未成年.

1
2
3
4
5
6
7
var hasYoungMan = list.some(item => {
if (item.age < 18) {
return true;
}
return false;
});
console.log(hasYoungMan); //true

every

该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true。

比如说这里我们希望得知是否所有人都是成年人。

1
2
3
4
5
6
7
var IsAllYoungMan = list.every(item => {
if (item.age > 18) {
return true;
}
return false;
});
console.log(IsAllYoungMan); //false

reduce

归并方法。这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。

如果希望得到所有人的现金之和

1
2
3
4
var cashSum = list.reduce((previousValue, currentIterator, index, arr) => {
return previousValue + currentIterator.cash;
}, 0);
console.log(cashSum); //15300

或者统计所有现金超过三位数的人

1
2
3
4
var count = list.reduce((previousValue, currentIterator, index, arr) => {
return currentIterator.cash >= 1000 ? previousValue + 1 : previousValue;
}, 0);
console.log(count); //3

filter

该方法对数组中的每一项运行给定函数,返回该函数会return true 的项组成的新数组。利用这个方法可对数组元素进行过滤筛选。

如果希望筛选出年龄大于20的人数组

1
2
3
4
5
6
var adultList = list.filter((item, index, arr) => {
return item.age >= 18 ? true : false;
}, 0);
console.log(JSON.stringify(adultList));
//[{"name":"Zhao","age":22,"cash":1000},{"name":"Qian","age":26,"cash":5000},{"name":"Li","age":30,"cash":9000}]