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

map

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

        let arr = ['1','10','333'];
        
        // 传统写法
        // arr = arr.map((item) =>{
        //     return item*2;
        // })

        //一行的写法
        //map()  用于接收一个函数, 将原数组中的所有元素用这个函数处理后,放入新数组返回
        arr = arr.map(item =>item*2);

        console.log(arr);
    

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

reduce函数

arr.reduce(callback,[initialValue]) 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 字符串数组中, 字符串内容为数字的小坑

如下的代码定义字符串的数据, 且没有进行任何的数字运算, 进行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)

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

  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)

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