谷粒商城26 - 前端基础 ES6 map&reduce

Bertha 。 2023-03-02 13:29 54阅读 0赞

### map ###

map() 用于接收一个函数, 将原数组中的所有元素用这个函数处理后,放入新数组返回

控制台打印如下, 可以看到arr 数组里面的元素都乘以了2  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

### reduce函数 ###

arr.reduce(callback,\[initialValue\])  
![20200729200105421.png][]  
callback 为执行数组中每个值的函数, 包含四个参数  
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））  
2、currentValue （数组中当前被处理的元素）  
3、index （当前元素在数组中的索引）  
4、array （调用 reduce 的数组）

代码示例

//定义初始的数组
            let arr = [1,10];
        let result = arr.reduce((a,b)=>{ 
    
                console.log("上一次处理后："+a);
                console.log("当前正在处理："+b);
    
                return a + b;
    
            },100); ///设置初始值为100

控制台打印如下, 第一行打印100, 为设定的初始值.  
第二行,正在处理1 , 代表遍历到1 , 101为 1+100的结果.  
之后遍历到10 , 最终返回的结果为 1+10+100= 111  
![20200729200317696.png][]  
字符串数组中, 字符串内容为数字的小坑

如下的代码定义字符串的数据, 且没有进行任何的数字运算, 进行reduce操作

let arr = ['1','10','333'];
    
     let result = arr.reduce((a,b)=>{ 
    
                console.log("上一次处理后："+a);
                console.log("当前正在处理："+b);
    
                return a + b;
    
            },100);
    
            console.log(result)

结果如下, 代表 字符串的拼接  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
如果中途有数字的运算, 代码如下

let arr = ['1','10','333'];
     
     //乘以2的数字运算 
     arr = arr.map(item =>item*2);
    
     let result = arr.reduce((a,b)=>{ 
    
                console.log("上一次处理后："+a);
                console.log("当前正在处理："+b);
    
                return a + b;
    
            },100);
    
            console.log(result)

结果如下, 说明字符串数组, 存储数字的字符串, 如果中间有数字运算, 会自动转化为数字类型, 反之没如果没有数学运算 , 则不会进行转化, 而是保持字符串类型 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/efec30f4bb6648f5a3dc667479c8a22e.png
[20200729200105421.png]: /images/20230208/9c34b223516a49739dbe9398098ce0ad.png
[20200729200317696.png]: /images/20230208/06cac8bb88b94c0a8a78a180256e5436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/38909da0c3864578bcdfca52f48f25d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/9f9f1588bb764d5c849a8e47b3bd3654.png