前端常用技巧

数值快速取整

var num = '01';
alert(~~num);

只支持32位以内的数据，超过范围就会得出错误的结果 遇到非数值会返回0 小数点会被直接删掉直接返回整数

另外可以也实用 |0 来实现

23.4|0 // 23
 
-19.6|0 // 19

只保留两位小数

const NumericalProcessing = (val) => {
 let num = +val;
 if (isNaN(num)) num = 0;
  num = (Math.round(num * 10000) / 10000.0).toFixed(2);
 return num;
};
 
const num = NumericalProcessing(100)
console.log(num)

转化为百分比

const NumericalProcessing = (val) => {
 let num = +val;
 if (isNaN(num)) num = 0;
 num = `${(Math.round(num * 10000) / 100.0).toFixed(2)}%`;
 return num;
};

快速生产长字符串

let res =  '超长'.repeat(150) ;

去除字符串中的HTML标签

const content = _.trim(txt.replace(/<[^>]+>/gim, ''));

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
 

金额格式化

(999999999).toLocaleString(); // 999,999,999
 
// 还可以加参数，进行更优雅的做法
const options = {
  style: 'currency',//  style: 'currency'注释掉就没有 ￥ 符号
  currency: 'CNY',
};
(999999).toLocaleString('zh-CN', options); // ¥999,999.00
 

数组 — 过滤空值

注意：0也会过滤

const groceries = ['apple', null, 'milk', undefined, 'bread', '',0];
 
const cleanList = groceries.filter(Boolean);
 
console.log(cleanList);
 
// 'apple', 'milk', 'bread';
 

数组 — 交集、差集、并集、补集

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
var sa = new Set(a);
var sb = new Set(b);
// 交集
let intersect = a.filter(x => sb.has(x));
// 差集
let minus = a.filter(x => !sb.has(x));
// 补集
let complement = [...a.filter(x => !sb.has(x)), ...b.filter(x => !sa.has(x))];
// 并集
let unionSet = Array.from(new Set([...a, ...b]));
console.log("a与b的交集：", intersect);
console.log("a与b的差集：", minus);
console.log("a与b的补集：", complement);
console.log("a与b的并集：", unionSet);

下载二进制文件

// blobData 后台返回的文件流二进制数据
// fileName 自定义文件名称
// suffixName 文件后缀名
// fileType 文件后缀名对应的type值
function exportFile(blobData, fileName, suffixName, fileType) {
    let blob = new Blob([blobData], { type: fileType })
    let downloadElement = document.createElement('a')
    let href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download =  fileName+ suffixName // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
}
//示例：
exportFile(blobData, '订单明细', '.xls', 'application/vnd.ms-excel');
 

下载base64格式的图片

   //下载图片
      download() {
        let imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh........';
        this.downloadFile('测试.png', imgData);
      },
      //下载
      downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);
 
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
 
        // aLink.dispatchEvent(evt);
        //aLink.click()
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
      },
      //base64转blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
 
        let uInt8Array = new Uint8Array(rawLength);
 
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      },
 

下载重命名

/**
 * 下载
 * @param  {String} url 目标文件地址
 * @param  {String} filename 想要保存的文件名称
 */
function courseDownload(url, filename) {
    getBlob(url, function(blob) {
        saveAs(blob, filename);
    })
}
function getBlob(url,cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
        if (xhr.status === 200) {
            cb(xhr.response);
        }
    };
    xhr.send();
}
/**
 * 保存
 * @param  {Blob} blob
 * @param  {String} filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement('a');
        var body = document.querySelector('body');
 
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
 
        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);
 
        link.click();
        body.removeChild(link);
 
        window.URL.revokeObjectURL(link.href);
    }
}
 

useImperativeHandle

useImperativeHandle是react官方为了简便我们的ref操作，同时还可以让子组件返回给父组件自身的状态和方法去调用

useRef将ref绑定到某个子组件标签上，用以获取整个子组件的方法和参数
useImperativeHandle: 可以自定义暴露给父组件的方法或者变量

父组件

import React, { useState, useRef } from 'react'
import ChildList from './ChildList'
 
export default () => {
    let parentRef = useRef(null)
    const [name, setName] = useState('li')
    return <div>
        <ChildList parentRef={parentRef} name={name}></ChildList>
        <button onClick={() => {
            console.log("parentRef", parentRef)
        }}>获取子组件</button>
    </div>
}
 

子组件

import React, { useImperativeHandle, forwardRef } from 'react'
 
export default forwardRef((props, ref) => {
    console.log("ref", ref)
    useImperativeHandle(ref, () => {
        return {
            childFn
        }
    })
    console.log(ref)
    const childFn = () => {
        console.log('子组件方法')
    }
    return <div>
        <div ref={ref} />
    </div>
})
 

useUpdateEffect

useUpdateEffect 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行。

function useUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);
  useEffect(() => {
  // 测试
    console.log(11)
    if (didMountRef.current) fn();
    else didMountRef.current = true;
  }, inputs);
}
 

useUpdateEffect(() => {
  // 测试
    console.log(22)
}, [user]);
 

moment常用方法

moment常用方法:
moment().endOf('day') // 今天的23:59:59.999
moment().endOf('year') // 今年的 12 月 31 日 23:59:59.999,还可以填month,week,hour等
 
moment().add(1, 'months') // 当前月份加一月,如今天2021-05-25,得到就是2021-06-25
moment().add(1, 'year') // 当前年加一年,如今天2021-05-25,得到就是2022-05-25
moment().subtract(1, 'months') // 当前月份减一月,如今天2021-05-25,得到就是2021-04-25
moment().subtract(1, 'year') // 当前年减一年,如今天2021-05-25,得到就是2020-05-25
 
var a = moment('2021-05-18');
var b = moment('2020-04-16');
a.diff(b, 'years') // 1,b-a的年份
a.diff(b, 'days') // 2,b-a的日期
 
moment().date() // 25今天的日期
moment().day() // 2 今天是星期几
moment().year() // 2021 今年的年份
moment().year(2022) // 2022-05-25 设置年份为2022

模拟接口

  const waitTime = (time = 2000) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };
 
cosnt search =async () => {
 
    await waitTime()
}
 

模拟鼠标点击

const a = document.querySelector('a[href="#1"]');
if (a) a.dispatchEvent(new MouseEvent('click', {bubbles: true}));

获取字符串字节数/字符数

//返回字符串的总字节数 
let byteleng = strval.replace(/[^\x00-\xff]/g,'**').length;

复制内容到剪切板

import "./App.css";
import {useRef} from 'react';
function App() {
  const myInput=useRef(null);
  function handleClickCopy() {
    const copyText=myInput.current.value;
    if(copyText){
      const copyInput=document.createElement('input');
      copyInput.setAttribute('value', copyText);
      document.body.appendChild(copyInput);
      copyInput.select();
      try{
        document.execCommand('copy');
        document.body.removeChild(copyInput);
        console.log('复制成功');
      }catch(err){
        console.log(err, '浏览器不兼容');
        document.body.removeChild(copyInput);
      }
    }else{
      console.log('请输入内容');
    }
 
  }
  return (
    <div className="App">
      <header className="App-header">
        <input type="text" ref={node=>{myInput.current=node;}}/>
        <button onClick={handleClickCopy}>点击复制</button>
      </header>
    </div>
  );
}
 
export default App;

函数组合通用函数

 
//通用函数
function compose() {
  var args = arguments;
  var start = args.length - 1;
  return function () {
    var i = start - 1;
    var result = args[start].apply(this, arguments);
    while (i >= 0){
      result = args[i].call(this, result);
      i--;
    }
    return result;
  };
}
 
 
function addHello(str){
    return 'hello '+str;
}
function toUpperCase(str) {
    return str.toUpperCase();
}
function reverse(str){
    return str.split('').reverse().join('');
}
 
var composeFn=compose(reverse,toUpperCase,addHello);
 
console.log(composeFn('ttsy'));  // YSTT OLLEH
 
//上述过程有三个动作，「hello」、「转换大写」、「反转」，可以看到通过 compose 将上述三个动作代表的函数合并成了一个，最终输出了正确的结果。
 

对象解构重命名

: 是重命名

= 是默认值

通过上面对 obj 对象的结构，会得到 a1、b2、c3 和 d4 这 4 个变量，同时由于 obj 里面没有 d 属性，所以 d4 会被赋予默认值 default。

const obj = {
  a: 1,
  b: 2,
  c: 3
}
 
const { a: a1, b: b2, c: c3, d: d4 = "default" } = obj
 
console.log(a1,b2,c3,d4)

获取URL中的查询参数

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

生成随机字符串

const randomString = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

将数组中的元素随机排序

const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);

将对象转换为查询字符串

const objectToQueryString = (obj) => Object.keys(obj).map(key => key + '=' + obj[key]).join('&');