前端小tips

工作中经常忘记的小tips

知识点

1.css鼠标变手指cursor: 'pointer'

2.页面打印window.print()

3.路由传参，且保存到本地onClick={() => {

  localStorage.setItem('taskId', record.id);

  history.push({

    pathname: '/fuzzing/task/defect/detail',

    query: {

      projectId: record.id,

    },

  });

}}

4.input中加问号图标<Input

  // onChange={InputWord}

  style={{

    borderRadius: 4,

    marginInlineEnd: 12,

  }}

  prefix={

    <SearchOutlined

      style={{

        color: 'rgba(0, 0, 0, 0.15)',

      }}

    />

  }

  placeholder="输入关键词"

/>

5.antdprotable改变空白页面

locale={{emptyText:<div className='emptyTable'><img src={emppng} alt=""/></div>}}

6.map

const res = [];

params.data.content.map(item => {

  const temp = {};

  temp['label'] = item.realName;

  temp['value'] = item.id;//主要为了传参为id

  temp['name'] = item.username;

  //定义一个搜索包含真实姓名和昵称

  temp['search'] = item.username+item.realName;

  // @ts-ignore

  res.push(temp)

  // const temps = {};

  // temps[''] = item.username;

  // authUserName.push(temp)

});

return res

7.定时器

useEffect(() => {  // 可以在函数组件内处理生命周期事件，默认情况，每次渲染都会调用该函数

  const t = setInterval(() => {

    setNow(moment())

  }, 1000)

  return () => {  // 每次卸载都执行此函数，清楚定时器

    clearTimeout(t)

  }

}, [])

8.随机数

Math.round((Math.random()*10-1+1)+1);

可得到[1,10]之间的随机整数

整数Math.round

9.shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

10.文字自动换行word-break:break-word

11.form.item里面只能有一个组件

12.时间

const week = ['天', '一', '二', '三', '四', '五', '六'];

const [time, setTime] = useState(

  `${moment().format('YYYY年MM月DD日 HH:mm:ss')} 星期${week[moment().day()]}`,

);

useEffect(() => {

  const timer = setInterval(() => {

    setTime(`${moment().format('YYYY年MM月DD日 HH:mm:ss')} 星期${week[moment().day()]}`);

  }, 1000);

  return () => {

    clearInterval(timer);

  };

}, []);

13.根据路由刷新

window.location.search

14.   localStorage.setItem('userId', String(res.data.userId));

15.const userId = localStorage.getItem('userId');

16.保留数组中最前出现的

function deWeight(arr) {

  for (let i = 0; i < arr.length - 1; i++) {

    for (let j = i + 1; j < arr.length; j++) {

      if (arr[i].key == arr[j].key) {

        arr.splice(j, 1);

        //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--

        j--;

      }

    }

  }

  return arr;

}

保留数组最后出现的 （非最新出现）

const output = Object.values(data?.reduce((a, item ) => {

  a[item.key] = item;

  return a;

}, {}));

17.删除数组中某个元素

var arr = ['a','b','c','d'],

    value = 'b'

arr = arr.filter(item => item != value)
18.两个数组合并

newRoute?.push.apply(newRoute, fuzzObj[0].routes);

19.数组中选择对象

const fuzzObj = routes[0].routes.filter(obj => obj.name == "模糊测试")

20.数组去重

const newArr = newRoute?.filter(function (item, index) {

  return newRoute?.indexOf(item) === index;  // 因为indexOf 只能查找到第一个

});

21.数组删除

假设 去掉name为小明的 这条数据

arr.splice(

arr.indexOf(arr.find((e) => { 

return e.name=== "小明"; }

)

), 1);

22.js 除法 取整

1.丢弃小数部分,保留整数部分

js:parseInt(7/2)

2.向上取整,有小数就整数部分加1

js: Math.ceil(7/2)

3,四舍五入.

js: Math.round(7/2)

4,向下取整

js: Math.floor(7/2)

22:git commit --no-verify -m "略过代码检测"

23 div居中

display: flex;

justify-content: center;

align-items: center;

24省略

white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    width: 150px;
    overflow: hidden;

25 ellipsis

26 数组删除

for (let i = menuList.length-1; i>=0 ; i--) {

  if (menuList.menuCode == "BFC_P_PROJECT_INTEGRATE" ||menuList.menuCode == "BFC_P_PROJECT_EDIT"||menuList.menuCode == "BFC_P_PROJECT_AUTHORIZATION") {

menuList.splice(i, 1);

  }

}