js前后端交互常用到的知识

1.两个数组对象进行返回遍历添加原数组的字段（交互中非常常用的一点哦！）

​
//方法
 getInit() {
      var arr1 = [
        { name: "张三", age: 20 },
        { name: "李四", age: 22 },
        { name: "王五", age: 18 },
      ];
      var arr2 = [{ val: 90 }, { val: 80 }, { val: 95 }];
      for (var i = 0; i < arr1.length; i++) {
        arr1[i].val = arr2[i].val;
      }
      console.log(arr1, "arr1数据可靠性");
    },

​

2.遍历数组对象对比相同数据时候给原数据添加字段标识

var data1 = [
        { id: 1, name: "张三", age: 32 },
        { id: 2, name: "里斯", age: 28 },
        { id: 3, name: "王五", age: 45 },
        { id: 4, name: "里斯", age: 280 },
      ];
      var data2 = [28, 32, 120, 280];
      var close = { flag: "0" };
      var datas = data1;
      datas.forEach((element, index) => {
        data2.forEach((array) => {
          if (element.processModelId == array) {
            datas[index] = Object.assign({}, datas[index], close);
          }
        });
      });
      console.log(datas, "datas比对后的数据来源");

 3.交互时点击表格一行数据时需要向该条数据（row）添加一个公共的企业id（objId），非常常用的方法哦！！

 let data6 = [
        {
          id: 1,
          name: "里斯",
          class: "三班",
        },
        {
          id: 2,
          name: "力宏",
          class: "二班",
        },
      ];
      var datama = [];
      data6.map((item) => {
        datama.push(Object.assign({}, item, { objId: "85212254" }));
      });
      console.log(data6, "data6");

4.前端向后端传递多选list格式数据时，需要把每个对象里面添加一个字段  （例如每行数据添加一个age字段）

// 原来的数组
let arr = [
  { id: 1, name: 'Tom' },
  { id: 2, name: 'Jerry' }
];

// 使用 Array.map() 方法给每个对象添加一个属性 age 并赋值为 18
arr = arr.map(item => {
  return {
    ...item,
    age: 18
  };
});

// 打印结果
console.log(arr); // [{ id: 1, name: 'Tom', age: 18 }, { id: 2, name: 'Jerry', age: 18 }]

5.删除对象数组中指定字段数据的某一项数据

   var aim = "二班";
      var data12 = [
        {
          id: 1,
          name: "里斯",
          class: "三班",
        },
        {
          id: 2,
          name: "力宏",
          class: "二班",
        },
      ];
      for (var j = 0; j < data12.length; j++) {
        if (data12[j].class == aim) {
          data12.splice(j, 1);
          i--; //i需要自减，否则每次删除都会讲原数组索引发生变化
        }
      }
      console.log(data12, "找到删除item相同的数据项");

6.删除对象数组每一项的某一个字段（很少使用，但是很实用）

     var data16 = [
        {
          id: 1,
          name: "里斯",
          class: "三班",
        },
        {
          id: 2,
          name: "力宏",
          class: "二班",
        },
      ];
      for (var g = 0; g < data16.length; g++) {
        delete data16[g].class;
      }
      console.log(data16, "删除一个对象数组每一项的字段");

7.两个数组进行循环比较，找到相同id项进行每项赋值（********非常常用*******）

   // 对比id
    compareData() {
      const arr1 = [
        { materialId: 1, name: "铁粉", val: 25 },
        { materialId: 2, name: "增碳剂", val: 30 },
        { materialId: 3, name: "焦煤", val: 35 },
      ];
      const arr2 = [
        { materialId: 2, job: "增碳剂" },
        { materialId: 3, job: "焦煤" },
        { materialId: 4, job: "天然气" },
      ];
      arr1.forEach((item1) => {
        const item2 = arr2.find((item2) => item2.materialId === item1.materialId);
        if (item2) {
          item1.job = item2.job;
        }
      });
      console.log(arr1, "arr1");
    },

//方法二for循环

     for (var i = 0; i < arr1.length; i++) {
          for (var j = 0; j < arr2.length; j++) {
            if (arr1[i].rowId == arr2[j].rowId) {
              arr1[i].resultPresentation = arr2[j].resultPresentation
            }
          }
        }

8.改变后端返回数据的字段（级联下拉时非常常用哦）

 const newdata = res.data.map((item) => ({
          value: item.orgId,
          label: item.orgName,
          children: item.children
        }))
        this.cityList = newdata

9.判断数组中某个字段是否有相同项并返回

    checkData(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].type == arr[j].type) {
            return arr[i].type;
          }
        }
      }
    },