实用小技巧 map reduce filter

1、 列表生成，{length:100}是类数组对象，有length属性的对象都是类数组对象，(v，k)=>k 是map方法

var arr6 = Array.from({length:100}, (v,k) => k);
console.log(arr6);
//[0,1,2,3...,99]

2、返回对象的某个属性组成的数组

const data=[
    {name:"jack", weight:"50"},
    {name:"jack1", weight:"51"},
    {name:"jack2", weight:"52"},
    {name:"jack3", weight:"53"},
    {name:"jack4", weight:"54"},
]

const newWeightArr = data.map((item, index) => {
    return item.weight;
});

3、根据已有对象数组创建新对象数组，用Object.assign

const data=[
    {name:"jack", weight:"50"},
    {name:"jack1", weight:"51"},
    {name:"jack2", weight:"52"},
    {name:"jack3", weight:"53"},
    {name:"jack4", weight:"54"},
]

const newWeightArr = data.map((item, index) => {
    return Object.assign({},{name:item.name})
});

 

---

 

map方法：

大家都知道，map是用来遍历数组，生成新数组的。

 

参数 value，index，array 分别表示

• value 数组中正在处理的当前元素。
• index 表示数组中正在处理的当前元素的索引。 可选
• array 表示map 方法调用的数组

 

 输出：

 

thisArg的作用是表示回调函数中的this，要在普通函数中才有效，在箭头函数中这个参数没用，查看示例： 

箭头函数中，thisArg参数无效：

 

 普通函数中，thisArg指向this：

如果想实现大数据中的map，可以结合filter使用，加上.filter(v=>v!==undefined)

reduce方法：

reduce函数的返回值，就是最后一次回调函数的返回值

initialValue的类型有两种选择：1、=被遍历数组的元素类型  2、=回调函数的返回值类型

 试验1： 普通

  试验2：回调函数有返回值

 

 试验3：initialValue=被遍历数组的元素类型 

const a = ['a', 'b', 'c', 'd', 'e']
let n = 100

// @ts-ignore
a.reduce((previousValue, currentValue, currentIndex, array) => {
    console.log(previousValue)
    console.log(currentValue)
    console.log(currentIndex)
    console.log(array)
    return n++
}, "ABC")
/* 打印结果：
ABC
a                          
0                          
[ 'a', 'b', 'c', 'd', 'e' ]
100                        
b                          
1                          
[ 'a', 'b', 'c', 'd', 'e' ]
101                        
c                          
2                          
[ 'a', 'b', 'c', 'd', 'e' ]
102                        
d                          
3                          
[ 'a', 'b', 'c', 'd', 'e' ]
103                        
e                          
4                          
[ 'a', 'b', 'c', 'd', 'e' ]
* */

/**
 *总结：
 // a 中有5个元素， 遍历了5次
 // currentValue ： a->b->c->d->e
 // previousValue ： ABC->100->101->102->103
 // currentIndex： 0->1->2->3->4
 // array： 始终=[ 'a', 'b', 'c', 'd', 'e' ]
 */

试验4：initialValue=回调函数的返回值类型

const a = ['a', 'b', 'c', 'd', 'e']
let n = 100

// @ts-ignore
a.reduce((previousValue, currentValue, currentIndex, array) => {
    console.log(previousValue)
    console.log(currentValue)
    console.log(currentIndex)
    console.log(array)
    return n++
}, 7777777777777)
/* 打印结果：
7777777777777
a
0
[ 'a', 'b', 'c', 'd', 'e' ]
100
b
1
[ 'a', 'b', 'c', 'd', 'e' ]
101
c
2
[ 'a', 'b', 'c', 'd', 'e' ]
102
d
3
[ 'a', 'b', 'c', 'd', 'e' ]
103
e
4
[ 'a', 'b', 'c', 'd', 'e' ]
* */

/**
 *总结：
 // a 中有5个元素， 遍历了5次
 // currentValue ： a->b->c->d->e
 // previousValue ： 7777777777777->100->101->102->103
 // currentIndex： 0->1->2->3->4
 // array： 始终=[ 'a', 'b', 'c', 'd', 'e' ]
 */

 

任务：group by 分组，取每组中时间最晚的，bug需要加起来

源数据：

// 需求： 按scenarioId字段聚合，取execTime最晚的那条，并且bug需要加起来
const execRecord = [
    {
        execId: 1,
        scenarioId: 34,
        status: '未定义',
        execTime: '2022-09-20 11:20',
        bug: [
            {
                id: 232,
                status: 2
            },
            {
                id: 234,
                status: 2
            }
        ]
    },
    {
        execId: 2,
        scenarioId: 34,
        status: '成功',
        execTime: '2022-09-20 11:23',
        bug: [
            {
                id: 235,
                status: 3
            }
        ]
    },
    {
        execId: 3,
        scenarioId: 34,
        status: '失败',
        execTime: '2022-09-20 11:24',
        bug: []
    },
    {
        execId: 4,
        scenarioId: 37,
        status: '成功',
        execTime: '2022-09-20 12:14',
        bug: [
            {
                id: 236,
                status: 1
            }
        ]
    },
    {
        execId: 5,
        scenarioId: 37,
        status: '失败',
        execTime: '2022-09-20 13:23',
        bug: [
            {
                id: 237,
                status: 5
            }
        ]
    },
    {
        execId: 6,
        scenarioId: 39,
        status: '未定义',
        execTime: '2022-09-20 11:23',
        bug: [
            {
                id: 239,
                status: 3
            }
        ]
    },
]

// 聚合后，要得到如下结果
const groupByResult = {
    34: {
        execId: 3,
        scenarioId: 34,
        status: '失败',
        execTime: '2022-09-20 11:24',
        bug: [
            {
                id: 232,
                status: 2
            },
            {
                id: 234,
                status: 2
            },
            {
                id: 235,
                status: 3
            }
        ]
    },
    37: {
        execId: 5,
        scenarioId: 37,
        status: '失败',
        execTime: '2022-09-20 13:23',
        bug: [
            {
                id: 236,
                status: 1
            },
            {
                id: 237,
                status: 5
            }
        ]
    },
    39: {
        execId: 6,
        scenarioId: 39,
        status: '未定义',
        execTime: '2022-09-20 11:23',
        bug: [
            {
                id: 239,
                status: 3
            }
        ]
    }
}

export {
    execRecord
}

处理函数：

import {execRecord} from "./data";

const result = execRecord.reduce((previousItem, currentItem) => {
    if (previousItem.has(currentItem.scenarioId)) {
        const groupItem = previousItem.get(currentItem.scenarioId)
        if (currentItem.execTime > groupItem.execTime) {
            groupItem.execId = currentItem.execId
            groupItem.status = currentItem.status
            groupItem.execTime = currentItem.execTime
        }
        groupItem.bug.push(...currentItem.bug)
    } else {
        previousItem.set(currentItem.scenarioId, {
            execId: currentItem.execId,
            scenarioId: currentItem.scenarioId,
            status: currentItem.status,
            execTime: currentItem.execTime,
            bug: [...currentItem.bug]
        })
    }
    return previousItem
}, new Map())

for (const resultElement of result.values()) {
    console.log(resultElement)
}

 

 

 

filter方法：

如果只想过滤数组中的元素， 而不对元素重新组装，可以使用filter