Knowledge commonly used in js front-end and back-end interactions

1. Two array objects are returned and traversed to add the fields of the original array (a very common point in interaction!)

​
//方法
 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. When traversing the array object and comparing the same data, add field identification to the original data

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. When clicking on a row of data in the table during interaction, you need to add a public enterprise id (objId) to the data (row), which is a very common method! !

 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. When the front end transmits multi-choice list format data to the back end, it is necessary to add a field to each object (for example, add an age field to each row of data)

// 原来的数组
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. Delete a certain item of data in the specified field data in the object array

   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. Delete a field of each item of the object array (rarely used, but very practical)

     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. Perform cyclic comparison of two arrays, find the same id item and assign each item (********very common********)

   // 对比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. Change the field of data returned by the backend (very commonly used in cascading drop-down)

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

9. Determine whether a field in the array has the same item and return

    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;
          }
        }
      }
    },