zoukankan      html  css  js  c++  java
  • 记录一些常用的方法

    一些函数的封装

    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使用方法: 求和

    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);
    

    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;
              }
            }
          }
        })
    
  • 相关阅读:
    grub
    init
    内核的ramdisk
    kernel信息及其相关命令
    mvc和mvvm模式
    vue从零开始(一)
    echarts自动播放图形
    echarts自定义悬浮框的显示
    typescript入门
    echarts的最外层配置项
  • 原文地址:https://www.cnblogs.com/cl1998/p/14292634.html
Copyright © 2011-2022 走看看