「必须收藏」周末学到的 10 个 JS 实用的小技巧
趁着周末偷偷学习的 10 个 JS 实用小技巧，大家一起来学习一下吧～
同步阻塞法实现sleep函数
const sleep = delay => {
const start = new Date().getTime();
while (new Date().getTime() < start + delay) {
continue;
};
};
console.log(1);
sleep(3000);
console.log(2);
利用 new URL 解析 URL
const parseURL = (url = '') => {
const res = new URL(url);
res.queryParams = key => {
if (key) {
return res.searchParams.get(key)
};
const params = {};
const paramGroup = res.search.replace(/^\?/,'').split('&');
paramGroup.forEach(param => {
const [key, val] = param.split('=');
params[key] = val;
});
return params;
};
return res;
};
parseURL('https://www.example.com/a/b?c=1&d=2');
一行代码实现星级评分
const getRate = (rate = 0) => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate);
getRate(3);用位运算提升效率
// ｜ 取整
let num1 = 1.7;
num1 = num1 | 0;
// >> 取半
let num2 = 6;
num2 = num2 >> 1; // 3
// << 加倍
let num3 = 6;
num3 = num3 << 1; / / 12
// ^ 交换值
let num4 = 10;
let num5 = 20;
num4 ^= num5;
num5 ^= num4;
num4 ^= num5; // num4 === 2, num5 === 1
// & 判断奇数
let num6 = 10;
let num7 = 11;
num6 & 1 === 1; // true
num7 & 1 === 1; // false
// ~ 判断是否存在
const data = '123456';
const key = '3';
const keyIsExist = !!~data.indexOf(key); // true
// 是否 2 的整数幂
const isPowerOf2 = num => (num & (num - 1)) === 0;
isPowerOf2(8) // true
isPowerOf2(7) // false
判断是否是千分符字符
const numberIsThousand = str => /^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(str);
numberIsThousand('100,000,000,000') // true
numberIsThousand('100,000,000,00') // false
复制文本到剪切板
const copyToClipboard = content => {
const clipboardData = window.clipboardData;
if (clipboardData) {
clipboardData.clearData();
clipboardData.setData('Text', content);
return true;
} else if (document.execCommand) {
const el = document.createElement('textarea');
el.value = content;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
return true;
}
return false;
};copyToClipboard('hello world');
一行代码生成指定长度的数组
const List = len => [...new Array(len).keys()];
const list = List(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
判断数据类型
const type = data => {
let toString = Object.prototype.toString;
const dataType =
data instanceof Element
? 'element' // 为了统一DOM节点类型输出
: toString
.call(data)
.replace(/\[object\s(.+)\]/, '$1')
.toLowerCase()
return dataType
};
type({}); // object
正则判断字符重复次数不超过两次
const strIsRepeatThan2 = (str = '') => /^(?!.*(.).*\1{2})[\da-zA-Z].+$/.test(str);
strIsRepeatThan2('123456'); // true
strIsRepeatThan2('1234566'); // true
strIsRepeatThan2('12345666'); // false
正则匹配可以只有 0 但开头不能是 0 的数字
const getCorrectNumber = (str = '') => /^(\d|[1-9]\d*)$/.test(str);
getCorrectNumber('0'); // true
getCorrectNumber('011'); // false
getCorrectNumber('101'); // true
评论