vue2 provide inject用法

1.Reduce函数

1.1 概述

​ reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let 结果 = 数组.reduct(累加器, 初始化值) //累加器 (累加结果, 当前值, 当前索引)=>{ return 处理结果 } 

1.2 累加和

// reduce 案例1：累加和 let arr = [1,2,3,4,5] let s = arr.reduce( (sum,current,index)=>{ 
    return sum + current } , 0) console.info(s) 

1.3 对象数组的累加和

//案例2：对象数组的累加和 let arr = [ { 
    name: 'jack', count: 10 }, { 
    name: 'rose', count: 20 } ] let s = arr.reduce((sum,current,index)=>{ 
    return sum + current.count },0); console.info(s) 

1.3 对象数组分组求和

//案例3： let arr = [ { 
   name: 'jack',course:'语文',count: 100}, { 
   name: 'jack',course:'英语',count: 100}, { 
   name: 'jack',course:'数学',count: 100}, { 
   name: 'rose',course:'语文',count: 50}, { 
   name: 'rose',course:'英语',count: 50}, { 
   name: 'rose',course:'数学',count: 50} ] //reduce let s2 = arr.reduce((obj,current,index)=>{ 
    let name = current.name let count = current.count // 获得obj对应名称值 {'jack':100} --》 100 let oldCount = obj[name] // oldCount 如果是 undefined，表示此名称第一次出现 if(oldCount){ 
    obj[name] = oldCount + count } else { 
    //第一次赋值 obj[name] = count } console.info(`之前累加值：${ 
     oldCount},当前值：${ 
     count}，最终结果：${ 
     JSON.stringify(obj)}`) return obj } , { 
   }) //结果：{'jack': 300, 'rose': 150} /*没有数据：{} {'jack': 100} {'jack': 200} {'jack': 300} {'jack': 300,'rose':50} {'jack': 300,'rose':100} {'jack': 300,'rose':150} */ console.info(s2) 

1.4 二维数组的处理

let arr = [ ['红色','黑色','白色'], ['16G','32G'], ['移动版','联通版'] ] 结果： [ [ '红色', '16G', '移动版' ], [ '红色', '16G', '联通版' ], [ '红色', '32G', '移动版' ], [ '红色', '32G', '联通版' ], [ '黑色', '16G', '移动版' ], [ '黑色', '16G', '联通版' ], [ '黑色', '32G', '移动版' ], [ '黑色', '32G', '联通版' ], [ '白色', '16G', '移动版' ], [ '白色', '16G', '联通版' ], [ '白色', '32G', '移动版' ], [ '白色', '32G', '联通版' ] ] 

• 步骤一：第一组处理

//案例3： let arr = [ ['红色','黑色','白色'], ['16G','32G'] ] //reduce let s = arr.reduce( (res,current,index)=>{ 
    //处理第一组 if(index == 0){ 
    //遍历第一组 current.forEach(item=>{ 
    res.push([item]) }) } return res } ,[]) console.info(s) 

• 步骤二：之后处理

let arr = [ ['红色','黑色','白色'], ['16G','32G'], ['移动版','联通版'] ] //reduce let s = arr.reduce( (res,current,index)=>{ 
    //处理第一组 if(index == 0){ 
    //遍历第一组 current.forEach(item=>{ 
    res.push([item]) }) } else { 
    //其他行 // res 获得第一行准备数组 let newArr = [] res.forEach(tempArr=>{ 
    // 当前行获得需要处理 current.forEach(ele=>{ 
    // console.info([...tempArr , ele]) newArr.push([...tempArr, ele ]) }) }) res = newArr } return res } ,[]) 

1.5 二维数组 处理结果为对象

let arr = [ ['红色','黑色','白色'], ['16G','32G'], ['移动版','联通版'] ] 结果： [ {'attr0': '红色', 'attr1':'16G', 'attr2':'移动版' }, {'attr0': '红色', 'attr1':'16G', 'attr2':'联通版' }, {'attr0': '红色', 'attr1':'32G', 'attr2':'移动版' }, {'attr0': '红色', 'attr1':'32G', 'attr2':'联通版' }, {'attr0': '黑色', 'attr1':'16G', 'attr2':'移动版' }, {'attr0': '黑色', 'attr1':'16G', 'attr2':'联通版' }, {'attr0': '黑色', 'attr1':'32G', 'attr2':'移动版' }, {'attr0': '黑色', 'attr1':'32G', 'attr2':'联通版' }, {'attr0': '白色', 'attr1':'16G', 'attr2':'移动版' }, {'attr0': '白色', 'attr1':'16G', 'attr2':'联通版' }, {'attr0': '白色', 'attr1':'32G', 'attr2':'移动版' }, {'attr0': '白色', 'attr1':'32G', 'attr2':'联通版' } ] 

let arr = [ ['红色','黑色','白色'], ['16G','32G'], ['移动版','联通版'] ] //reduce let s = arr.reduce( (res,current,index)=>{ 
    //第一个数组 if(index == 0) { 
    current.forEach(ele=>{ 
    res.push({ 
   ['attr' + index] : ele }) }) } else { 
    //其他数组 let newArr=[] res.forEach(obj=>{ 
    current.forEach(ele=>{ 
    // console.info({ ...obj, ['attr'+index] : ele}) newArr.push({ 
    ...obj, ['attr' +index] : ele}) }) }) res = newArr } return res } , []) console.info(s) 

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/508.html