前端常用的技巧（自用）

1、单行函数篇

解析url里的参数

/**
 * @param {Object} url 目标url
 * @param {Object} name 需要获取的参数名
 */
const getParams = (url, name) => new URLSearchParams(url).get(name);

将对象转换为参数

const objectToQueryParams = obj => Object.entries(obj).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');

获取变量类型

const getType = value => Object.prototype.toString.call(value).slice(8, -1);

字符串反转

const reversedString = str => str.split('').reverse().join('');

字符串截取

const ellipsisString = (str, maxLength) => str.length > maxLength ? `${str.slice(0, maxLength)}...` : str;

判断邮箱

const isEmail = email => /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(email);

判断闰年

const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);

判断系统是否为深色主题

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

计算俩个日期之间的间隔

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)

2、代码优化篇

多个if优化

// 优化前
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
// 优化后
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

switch优化

// 优化前
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // And so on...
}
// 优化后
var data = {
  1: test1,
  2: test2,
  3: test
};
data[something] && data[something]();

解构赋值

//优化前
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
//优化后
const { test1, test2, test3 } = this.data;

find优化

// 优化前
const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]
function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'test1' && data[i].name === name) {
            return data[i];
        }
    }
}
// 优化后（注意：当没有符合条件的元素时候会返回undefined）
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

el-tree过滤方法

// data: el-tree的数据
const filterTreeByReportState = (searchValue: string,data:any[]) => {
  const craftTreeData: ProjectCraftTreeNodeModel[] = JSON.parse(
    JSON.stringify(data)
  );
  const filterFunc = (node) => {
    // 检查当前节点的标签是否包含过滤文本
    return node.name.toLowerCase().includes(searchValue);
  };
  const buildFilteredTree = (nodes) => {
    return nodes
      .filter(filterFunc) // 过滤出匹配的节点
      .map((node) => {
        // 复制当前节点，但不包括子节点
        const newNode = { ...node };

        // 如果节点有子节点，则递归构建子树
        if (node.children) {
          newNode.children = buildFilteredTree(node.children);
        }

        return newNode;
      });
  };
  return buildFilteredTree(craftTreeData);
};