知识沉淀
存一个在线的，以后方便自己查询（后期也会补充）
方法篇
判断对象为空
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false
作者：芝士加
链接：https://juejin.cn/post/7145623660680708104
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
数组去重
const uniqueArr = (arr) => [...new Set(arr)];
console.log(uniqueArr(["前端","js","html","js","css","html"]));
// ['前端', 'js', 'html', 'css']
从url获取参数并转为对象
const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
)
getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
// {q: 'js+md', newwindow: '1'}
生成随机十六进制
const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b
将 RGB 转换为十六进制
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255);
// #ffffff
文字复制到剪贴板
const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('单行代码 前端世界')
获取选定的文本
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
// 返回选中的内容
查询某天是否为工作日
const isWeekday = (date) => date.getDay() % 6 !== 0;
isWeekday(new Date(2022, 03, 11))
// true
计算数组平均值
const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
average([1,9,18,36]) //16
函数防抖与节流
// 防抖
// fn 需要防抖的函数，delay 为定时器时间
function debounce(fn,delay){
let timer = null // 用于保存定时器
return function () {
// 如果timer存在 就清除定时器，重新计时
if(timer){
clearTimeout(timeout);
}
//设置定时器，规定时间后执行真实要执行的函数
timeout = setTimeout(() => {
fn.apply(this);
}, delay);
}
}
// 节流
function throttle(fn) {
let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null
return function () {
if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行
timer = setTimeout(() => {
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)
// 表示可以执行下一次循环了。
timer = null;
}, 1000);
};
}
将一个字符串变成数字
常规操作
let str = '2'
console.log(Number(str)) //2
es6新语法操作一
let str = '2'
console.log(~~str) //2
解析： ~是按位取反运算,~~ 用来作双非按位取反运算
~~ 的作用是去掉小数部分,对于正数，向下取整；对于负数，向上取整；与Math.floor()不同的是，它只是单纯的去掉小数部分，不论正负都不会改变整数部分
非数字取值为0，它具体为
~~null; // => 0
~~undefined; // => 0
--NaN; // => 0
~~0; // => 0
~~{}; // => 0
~~[]; // => 0
~~(1/0); // => 0
~~false; // => 0
~~true; // => 1
~~1.9; // => 1
~~-1.9; // => -1
es6新语法操作二
let str = '2'
console.log(+str) //2
解析：JS中的 '+' 号
当用作单目操作符的时候，+操作符不会对Number类型产生影响。但如果应用在字符串类型上，会将其转换为数字：
使用篇
使用自定义字体
@font-face {
font-family: ZCOOL_KuHei_Regular;
src: url('~@/styles/!font/ZCOOL_KuHei_Regular.ttf');
}
page {
font-family: ZCOOL_KuHei_Regular;
}
使用自定义图标
使用注释
/**
* 方法解释
* @param {object} self - 调用方法的vue实例.
* @param {object} error - 错误对象.
* @param {string} errorMessage - 出错提醒信息.
* @return {string} 处理后的错误信息文本.
* @example
* errorTip(this, e, '登陆失败')
*/
... test example
