记录一些常用的方法

一些函数的封装

1.根据模板处理数据

后端反的数据

处理成循环的数组

方法1:

先把后端返回的数据处理成可以循环的数组进行双向绑定,再把循环的数组处理成后端需要的字段进行提交

  let data = [
    {drugName:'',drugFrequency:'',drugUse:''},
    {drugName:'',drugFrequency:'',drugUse:''},
    {drugName:'',drugFrequency:'',drugUse:''},
  ]
  let dataTemplate = ['drugName','drugFrequency','drugUse']
  const  mergeObject = (function(arr,arr2){
    let newObje = {}
    for(let i = 0; i < arr.length; i++){
        var data = arr[i]//每行的数据
        for(let j = 0 ; j < arr2.length; j++){
            // newData2.childName 1 = data.childName
            newObje[`${arr2[j]}${i+1}`] = data[arr2[j]]// 给模板进行行赋值;
        }
    }
    return newObje
})
  let muban =  mergeObject(data,dataTemplate)

方法二:

     // 处理成数组对象
     let list  = [{},{},{},{},{}]
     for(let key in res){
     let newkey =  key.substr(0, key.length - 1);
       for(let i = 0; i < 5; i++){
         if(!list[i].hasOwnProperty(newkey)){
           list[i][newkey] = ""
         }
       }
     }
    // console.log(list)

     // 还原成后端提交规定的字段
     let obj ={}
     let newList = [...list]
      newList.forEach((item, index) => {
      for(let val in item){
        obj[val + (index +1)] = item[val]
      }
    })
    // console.log(obj)

2.数组去重 对象 || id相同的对象

indexOf() , reduce()

方法一:
易读

  let arrRe = [
    {id:1, name: '张三', age: 18},
    {id:1, name: '张三', age: 18},
    {id:2, name: '李四', age: 14},
    {id:2, name: '李四', age: 14},
  ]
const arrFnc = (function(arr){
  let arrId = []// 获取所有id
  let newArr = []
  // 第一遍循环取出所有的id,并且取出重复的id
  for (let i = 0; i < arr.length; i++) {
    if(arrId.indexOf(arr[i].id) == -1){
      arrId.push(arr[i].id)
    }
  }
  // 第二遍循环拿着存放的id去查找传过来的arr数组
  for(let i = 0; i < arrId.length; i++){
    for(let j = 0; j < arr.length; j++){
      if(arrId[i] == arr[j].id){
        // debugger
        newArr[i] = arr[j]
      }
    }
  }
  return newArr
})
  let dataarr = arrFnc(arrRe)

reduce语法补充:
reduce使用方法: 求和

var numbers = [15, 2, 1, 5, 6];
// preVal: 输出的是第一项的值或上一次叠加的结果，curVal: 正在被处理的元素，
sum = numbers.reduce(function(preVal,curVal){
  return preVal + curVal // 0 + 15; 15 + 2; 17 + 1; 18 + 5; 23 + 6;
},0)  // 0 传递给函数的初始值
console.log(sum) // 29

方法二:

let arrRe = [
  {id:1, name: '张三', age: 18},
  {id:1, name: '张三', age: 18},
  {id:2, name: '李四', age: 14},
  {id:2, name: '李四', age: 14},
]
let hash = {};
data3 = arrRe.reduce(function(preVal, curVal) {
hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);// 如果hash没有这个属性,就push到preVal里
return preVal
}, []);// 默认传个空数组
console.log(333,data3);

方法三:

new Map() has() set()

//定义常量 res,值为一个Map对象实例
const res = new Map();

//返回arr数组过滤后的结果，结果为一个数组
//过滤条件是，如果res中没有某个键，就设置这个键的值为1
return arr.filter(function(a){
    return !res.has(a.id) && res.set(a.id, 1);
});

3.找出两个数组对象相同的属性值, 如果一样就合并

find() , Object.assign() , Object.fromEntries() , forEach() , map()

方法一

A.map(item =>{
const matched = B.find(({chineseName}) => chineseName == item.name);
if(matched){
	Object.assign(item,{icon:matched.icon})
}
})

方法二

const _B = Object.fromEntries(B.map(({ chineseName, ...rest }) => [chineseName, rest]));
A.forEach(item => {
    const matched = _B[item.name];
    if (matched) {
        Object.assign(item, { icon: matched.icon });
    }
});

4.判断对象是否在数组里面

indexOf()

 let list = [
        { name: "张三" },
        { name: "李四" },
        { name: "王五" },
        { name: "赵六" },
      ]
 let val = { name: '张三' }
 const isExist = (function(list,val){
  return JSON.stringify(list).indexOf(JSON.stringify(val)) != -1
})
 let isData = isExist(list,val)// true

5.根据数组的值 来过滤数组对象

filter() , indexOf()

 let list = [
      { name: "张三" },
      { name: "李四" },
      { name: "王五" },
      { name: "赵六" },
    ]
 let appointList = ['张三', '李四']
 const fncAppoint = function(list,appointList){
  return list.filter(item => appointList.indexOf(item.name) != -1)
}
 let Appoint = fncAppoint(list,appointList)

6.处理树数组对象

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性

    var data = [
    {target1:31},
    {target1:32},
    {target1:33},
    {target1:34},
    {target2:41},
    {target2:42},
    {target2:43},
    {target2:44},
    {target3:51},
    {target3:52},
    {target3:53},
    {target3:54}
    ];
    var tindex = 0;
    var list = [];
    //第一步找出target1出现几次，表示有几个对象,顺便给list的对象index值赋了
    data.forEach(item => {
      if (item.target1) {
        list.push({
          "index": tindex,
        })
        tindex += 1;
      }
    })
    //第二部开始拼，最终结果是list
    data.forEach(item => {
      //循环对象
      for (let key in item) {
        for (var i = 0; i < list.length; i++) {
          //判断对象是否有这个属性，如果有就是已经赋值过了。
          if (!list[i].hasOwnProperty(key)) { //如果list数组对象没有这个key 就添加进去
            list[i][key] = item[key]
            break;
          }
        }
      }
    })

7.for await...of 循环同步调用接口

async function fetchData(url) {
  let response = await fetch(url);
  return response.json();
}

async function fetchAllData(urls) {
  for await (let url of urls) {
    let data = await fetchData(url);
    console.log(data);
  }
}

let urls = ['url1', 'url2', 'url3'];
fetchAllData(urls);

css

inset:10px;

CSS 属性 inset 为简写属性，对应于 top、right、bottom 和 left 属性。其与 margin 简写属性具有相同的多值语法。

# display: grid;
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
align-content: center;