前端在开发中使用的技巧和问题记录

避险

find 数组对象

find 出来的数据直接修改会改变原数据
因为是引用类型是同一个地址，如果不想修改请拷贝一份

JS

使用 && 替代 if

&& 返回值 ： 
true && 'val' // val
false && 'val' // false

左为true 的时候返回右边的值
左为false的时候返回左边的值

//可以根据这一特性 当 if 使用
isTrue && Fun()

？？空值合并

逻辑操作符，左侧为null和undefined时，才返回右侧的数

null ?? 12 // 12
undefined ?? 12 // 12

true ??  12 // true
false ??  12 //false 
12 ?? 23 // 12
//可用于 判 arr.length==0
0 ?? 23 //0
1 ?? 22 //1

!! 判断真值

!!true //true
!!false //false
!!undefined // false
!!null //false

let a=[]
let b=[1,4]
!!a //true
!!a.length //false
!!b //true
!!b.length //true

!. 和 ?.

?. 可选链操作符表示对象后面的属性null或undefined不报错
!. 非空断言操作符表示对象后面的属性一定不是null或undefined

URL 编码解码（）

decodeURIComponent()能够解码使用 encodeURIComponent()编码的所有字符，即它可以解码任何特殊字符的编码

//编码
encodeURIComponent(JSON.stringify(data))

//解码
JSON.parse(decodeURIComponent(option.mapList))

使用 switch 替代 if else

let type=1
if(type==1){
    
    
	...
}else if(type==2){
    
    
    ...
}
...
//使用switch
switch(type){
    
    
	case type==1:
		...
		break;
	case type==2:
		...
		break;
}

//
        // switch (iKey) {
    
    
        //   case 'writable':
        //     if (dataList[i].iswritable) {
    
    
        //       trueArr[iKey].push(dataList[i][iKey]);
        //     }
        //     break;

        //   case 'required':
        //     if (dataList[i].isrequired) {
    
    
        //       trueArr[iKey].push(dataList[i][iKey]);
        //     }

        //     break;
        //   case 'visible':
        //     trueArr[iKey].push(dataList[i][iKey]);
        //     break;
        // }
        dataList[i]['is' + iKey] && trueArr[iKey].push(dataList[i][iKey]);
...

根据数量换行中英文

const getSubstringFun = (data, maxc = 4, maxe = 4) => {
    
    
    let arr = []
    for (let index = 0; index < data.length; index++) {
    
    
        const itemD = data[index];
        if (arr.length) {
    
    
            let arrFindIndex = arr.findIndex((item) => {
    
    
                const chineseCount = item.match(/[\u4e00-\u9fa5]/g)?.length || 0;//中文数量
                const nonChineseCount = item.match(/[^\u4e00-\u9fa5]/g)?.length || 0;//非中文数量

                let e = maxc - chineseCount
                let c = maxe - nonChineseCount
                if (chineseCount) {
    
    
                    return (chineseCount <= maxc + (Math.floor(c / 2))) && (nonChineseCount <= maxe + (e * 2))
                } else {
    
    
                    return (nonChineseCount <= maxe + (e * 2))
                }
            })
            if (arrFindIndex != -1) {
    
    
                arr[arrFindIndex] += itemD
            } else {
    
    
                arr[arr.length] = itemD + '';
            }
            console.log(itemD, "===itemD===");
        } else {
    
    
            arr[0] = itemD + '';
        }
    }
    console.log(arr, "===arr====");
    return arr
}


getSubstringFun('sjk上的飞机和 54 fsdf45', 5, 8)//['sjk上的飞机和 54 fs', 'df45']

获取后端返回数据使用 [] or {}

永远不要相信后端返回的数据,当后端返回值为null undefined 时候可以这样

//返回数组
 let res = (await resFun()).data || [] 
 //返回对象
 let res = (await resFun()).data || {
    
    }

获取最后一位数字

const num=12312312
const num2='655234234'

console.log(num%10) //2
console.log(num2%10) //4

俩数组对象的交集（一个）

目标：获取a中有b的 id相同 a的数据

    let a=[
      {
    
    
        id:1,
        title:"测试1"
      },
      {
    
    
        id:2,
        title:"测试2"
      },
    ]
    let b=[
      {
    
    
        id:1,
        age:12
      },
      {
    
    
        id:4,
        age:123
      },
    ]
    let c= a.find((o: any) => b.find((x:any)=>x.id==o.id))
    console.log(c);
    //   {
    
    
    //    id:1,
    //    title:"测试1"
    //  },

多个数组对象根据 id相同的 key累加合并成一个

  let arr1 = [
    { id: 1, name: '是啥' },
    { id: 2, name: '是啥2' },
    { id: 3, name: '是啥3' },
  ]
  let arr2 = [
    { id: 1, name: '深爱的' },
    { id: 2, name: '深爱的2' },
    { id: 3, name: '深爱的3' },
  ]
  let arr3 = [
    { id: 1, name: '大三' },
    { id: 2, name: '大三2' }
  ]
  //通过操作变成
  let arr4 = [
    { id: 1, name: '是啥', name1: '深爱的', name2: '大三' },
    { id: 2, name: '是啥2', name1: '深爱的2', name2: '大三2' }
  ]


  const arrToTemp = (...asg: any) => {
    let targetKey = asg[asg.length - 1]
    let target = asg[asg.length - 2]
    if (!target || typeof target == 'object') {
      target = 'id'
    }
    if (!targetKey || typeof targetKey == 'object' || targetKey == 'id') {
      target = 'name'
    }
    let temp: any = []
    for (const asgItem of asg) {
      if (Array.isArray(asgItem)) {
        for (const asgTarGetItem of asgItem) {
          let tempIn = temp.findIndex((o: any) => o[target] == asgTarGetItem[target])
          if (tempIn != -1) {
            temp[tempIn][targetKey + ((Object.keys(temp[tempIn]).length) - 1)] = asgTarGetItem[targetKey]
          } else {
            temp.push({
              [target]: asgTarGetItem[target],
              [targetKey]: asgTarGetItem[targetKey],
            })
          }
        }
      }
    }
    return temp
  }
  console.log(arrToTemp(arr1, arr2, arr3, 'id', 'name'), "====合并结果====");
  //====合并结果====
// [
//     {
//         "id": 1,
//         "name": "是啥",
//         "name1": "深爱的",
//         "name2": "大三"
//     },
//     {
//         "id": 2,
//         "name": "是啥2",
//         "name1": "深爱的2",
//         "name2": "大三2"
//     },
//     {
//         "id": 3,
//         "name": "是啥3",
//         "name1": "深爱的3"
//     }
// ]

数据处理

根据s1 $后的数子匹配arr中id 然后获取改数据的name 拼成一个数组

  var arr = [{ name: "x", id: 11 }, { name: "y", id: 22 }, { name: "z", id: 112233 },{ name: "h", id: 23 }]
  // ["x","y","z"]
  var s1 = "$11 / $22 * $ 112233 - $ 12 + $23"
  var s2 = "$11 / $22 / $ 112233"

  const tostrArr = (temp, arr) => {

    let tarr = temp.split(/\/ | \* | \- | \+/g).map((item) => {
      item = item.replace("$", "");
      item.trim()
      return item
    })

    let tarArr = []
    for (const key of tarr) {
      let findname = arr.find((o) => o.id == key)
      if (findname) tarArr.push(findname.name)
    }
    console.log(tarArr);
    return tarArr

  }
  tostrArr(s1, arr)
  tostrArr(s2, arr)

字符串根据中英文按条件截取

const getSubstringFun = (data:any, n:number) => {
    
    
    let arr: any = []
    for (let index = 0; index < data.length; index++) {
    
    
        const itemD: any = data[index];
        if (arr.length) {
    
    
            let arrFindIndex = arr.findIndex((item: any) => {
    
    
                const chineseCount = item.match(/[\u4e00-\u9fa5]/g)?.length || 0;//中文数量
                const nonChineseCount = item.match(/[^\u4e00-\u9fa5]/g)?.length || 0;//非中文数量
                return chineseCount + (nonChineseCount / 2) <= n
            })
            if (arrFindIndex!=-1) {
    
    
                arr[arrFindIndex] += itemD
            } else {
    
    
                arr[arr.length] = itemD + '';
            }
        } else {
    
    
            arr[0] = itemD + '';
        }

    }
    return arr
}


    let str = "钨钢平头铣刀-SJD"
    getSubstringFun(str, 8)

Vue

React

工具

lodash

是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数（数组对象去重，深拷贝，浅拷贝，防抖，节流，数组分割…）

loadsh中文文档

数组对象去重

var list= [{
    
     'x': 1, 'y': 2 }, {
    
     'x': 2, 'y': 1 }, {
    
     'x': 1, 'y': 2 }];
list = _.uniqWith(list, _.isEqual)
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

时间转年月日

  /**
   * @description:
   * @param {*} start 开始时间
   * @param {*} end  结束时间
   * @return {*} 如果只填写一个就是结束时间，开始时间就是当前时间
   */
  const day2ymrStr2 = (sdate, edate) => {
    
    
    let day2ymrStr = '';
    let date1 = new Date(edate);
    let date2 = new Date(sdate);
    if (!edate) {
    
    
      date1 = new Date();
    } 
    let y = 0,
      m = 0,
      d = 0;
    let y1 = date1.getFullYear();
    let m1 = date1.getMonth();
    let d1 = date1.getDate();
    let y2 = date2.getFullYear();
    let m2 = date2.getMonth();
    let d2 = date2.getDate();
    if (d2 > d1) {
    
    
      m1 = m1 - 1;
      d1 = d1 + 30; //这里每个月按30天计算,也可以根据月份计算天数
    }
    if (m2 > m1) {
    
    
      y1 = y1 - 1;
      m1 = m1 + 12;
    }
    d = d1 - d2 + 1;
    m = m1 - m2;
    y = Math.abs(y1 - y2);
    if (y != 0) day2ymrStr += y + '年';
    if (m != 0) day2ymrStr += m + '个月';
    if (d != 0) day2ymrStr += d + '天';
    if (isNaN(d) || isNaN(m) || isNaN(y)) {
    
    
      return 0 + '天';
    }
    return day2ymrStr;
  };

  console.log(day2ymrStr2('2021-03-01','2022-03-04'));//1年4天
  console.log(day2ymrStr2('2021-03-01'));//1年10天

前端在开发中使用的技巧和问题记录

避险

find 数组对象

JS

使用 && 替代 if

？？空值合并

!! 判断真值

!. 和 ?.

URL 编码解码（）

使用 switch 替代 if else

根据数量换行中英文

获取后端返回数据使用 [] or {}

获取最后一位数字

俩数组对象的交集 （一个）

多个数组对象 根据 id相同的 key累加 合并成一个

数据处理

根据s1 $后的数子匹配arr中id 然后获取 改数据的name 拼成一个数组

字符串根据中英文按条件截取

Vue

React

工具

lodash

数组对象去重

时间转年月日

猜你喜欢

俩数组对象的交集（一个）

多个数组对象根据 id相同的 key累加合并成一个

根据s1 $后的数子匹配arr中id 然后获取改数据的name 拼成一个数组