Js数组代替写循环的几个方法

简介

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

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

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

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遍历的时候得这么写

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

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

var names = list.map(item => {
    return item.name
});

console.log(names); //["Zhao", "Qian", "Sun", "Li"]

some

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

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

var hasYoungMan = list.some(item => {
    if (item.age < 18) {
        return true;
    }
    return false;
});
console.log(hasYoungMan); //true

every

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

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

var IsAllYoungMan = list.every(item => {
    if (item.age > 18) {
        return true;
    }
    return false;
});
console.log(IsAllYoungMan); //false

reduce

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

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

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

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

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

filter

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

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

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}]