记录一个算法题,表单有多个数据[单个数组形式],但是要把这堆数据数组赋值给相同多个数组对象的二维数组并且,二维数组里面最后的键值对中的key值是表单数据的key名,解决办法

解决思想,1,将对应的表单数组转为和二维数组一样的数据结构,并使用Object.keys(item).map(()=>{})方法,将请求回来的数组内的表单数转化为数组对象的形式;2并且储存到一个大数组中保存,之后去除不必要的键值对,并对需要的数据进行截取,储存为和要赋值的二维数组形同结构;3,循环+判断赋值

接下来看假数据结构代码:

需求,现在要把Aarr里面的值,赋值给Barr里面的相同key值和Arr中key名相同的val作为默认值展示

let Aarr = [
             {a:'a1',b:'b1',c:'c1'},
             {a:'a2',b:'b2',c:'c2'}
            ]; // 这个是from表单的数据
let Barr = [
            [
             {val:'',key:'a'},
             {val:'',key:'b'},
             {val:'',key:'c'}
            ],
            [
             {val:'',key:'a'},
             {val:'',key:'b'},
             {val:'',key:'c'}
            ]
           ]; // 这是二维数组数据

第一步,将对应的表单数组转为和二维数组一样的数据结构

// 第一步将from转化为和Barr一样的数组对象的结构
        const textArr = ['a','b','c']; // 声明常量数组,用于判断筛选出需要的键值对;毕竟有时候返回的数据有很多不是我们想要的
        let arr = [],Aarr1 = [];
        Aarr.forEach((item) => { // 遍历
            // Object.keys()可以把对象转化为数组形式,此时是[{0:'a'},{1:'b'},{2,"c"}],再map遍历筛选符合条件的key,找到返回需要的对象结构值,不符合返回false,然后储存到数组中,这样就等到一个Barr一样结构的数据
          arr = Object.keys(item).map((key) => { 
                if (textArr.indexOf(key) > -1) { //符合条件的返回对象形式,其实这里用filter过滤器也可以
                    return { [key]: item[key] };                    
                }
                return false; // 不符合条件的返回false
              });
              Aarr1.push(arr);
            });
        console.log(Aarr1)
此时的数据结构是这样的

第二步。去除不需要的数据字段,上一步下来之后这个数组里面会有false,如果没有false或者上一步用的filter过滤器的话,这一步就不需要了

 // 去除false字段,储存到默认值状态,双重for循环去除二维数组中的不需要的数据
            Aarr1.forEach((item) => {
              for (let i = 0; i < item.length; i += 1) {
               if (!item[i]) { // 这个if主要是判断上面的map方法是否有false数据,将false去除
                  item.splice(i, 1);
                  i -= 1;
                }
              }
            });

第三步,嵌套+判断赋值

// 赋值
        Barr.forEach((item, index) => {
              // 解决办法              
            Aarr1.forEach((event, length) => {
                item.forEach((v, i) => {
                    event.forEach((m, n) => {
                        if (index === length && i === n) {
                            v.val = m[v.key];
                        }
                    });
                });
            });
        });
        console.log(Barr);

此时的最终数据就是想要的需求结果,对应的key有了Aar里面key名的val值

欢迎指导

猜你喜欢

转载自blog.csdn.net/m0_64207574/article/details/129096838