前端工作小技巧集锦
最后更新:2021-10-12
检索目录
javascript
001 按指定长度切割字符串
"123456789".match(/[\S]{1,2}/g) //output:["12", "34", "56", "78","9"]
002 提取URL的queryParm 即URL地址的传参
function getParms(_url) {
// 匹配 x=x1
var pattern = /(\w+)=(\w+)/ig;
var parames = {};
_url.replace(pattern, function (a, b, c) { parames[b] = c; });
return parames;
}
console.log(getParms("https://mp.csdn.net/mp_blog/manage/column/allColumnList?a=1&b=2"))
//output:{ a: '1', b: '2' }
003 极简GUID生成器
const Guid = () => {
// 4位随机字符串
var R = () => {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return `${R()}-${R()}-${R()}-${R()}-${R()}`.toLocaleUpperCase();
};
// return "C460-0822-7537-EF70-6FC4"
004 await 处理reject状态值
await只能接收resolve状态值,如果Promise对象返回reject状态就被忽略了。
如果需要处理reject状态,就要加上try catch来捕捉
try {
var res = await getPhotoFromPlat()
if (res.success) {
photoUrl = res.data
} else {
alert(res.msg)
}
} catch (err) {
//处理reject状态的值
alert(JSON.stringify(err))
}
005 js阻塞 实现延时
for(var t = Date.now(); Date.now() - t <= 1500;)
//1500 即 1.5秒
006 所有元素加边框
document.querySelectorAll('*').forEach((elm)=>{
elm.style.outline='1px solid red'
})
007 取消事件冒泡
例如:多dom元素重叠,点击上层元素,会触发下层元素点击事件,改方法可以阻止触发
event.stopPropagation();
008 多字段组合排序
const _sort = function(arr, sortLis) {
const _reverse = function(arr) {
for (let i = 0; i < arr.length / 2; i++) {
const item = arr[i]
arr[i] = arr[arr.length - i - 1]
arr[arr.length - i - 1] = item
}
}
_reverse(sortLis) //反转待排序字段, 从后往前排
for (let i = 0; i < sortLis.length; i++) {
const sort_ = sortLis[i].split(' ')
const sortByStr = sort_[0] ///正在排序的字段
const sortBy = sort_[1] //按照升/降序排序
for (let j = 0; j < arr.length; j++) {
//冒泡排序
for (let k = 0; k < arr.length - 1 - j; k++) {
let val1 = arr[k][sortByStr]
let val2 = arr[k + 1][sortByStr]
if (sortBy === 'desc') {
//降序
if (val1 < val2) {
let tmp = arr[k]
arr[k] = arr[k + 1]
arr[k + 1] = tmp
}
} else {
//升序
if (val1 > val2) {
let tmp = arr[k]
arr[k] = arr[k + 1]
arr[k + 1] = tmp
}
}
}
}
}
return arr
}
009 列表指定索引插入元素
Array.prototype.insert = function (index, item) {
this.splice(index, 0, item);
};
css 相关
001 边框阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 参数 | 是否必需传 | 参数说明 |
|---|---|---|
| h-shadow | 必需的 | 水平阴影的位置。允许负值 |
| v-shadow | 必需的 | 垂直阴影的位置。允许负值 |
| blur | 可选 | 模糊距离 |
| spread | 可选 | 阴影的大小 |
| color | 可选 | 阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选 | 从外层的阴影(开始时)改变阴影内侧阴影 |
lodash 常用函数
001、isEqual(值1,值2) ,判断两个值是否相等。
看到这个功能说明,首先会想到 ==比较运算符判断两个值是否相等,不过这个函数主旨,对比的不是这种值,而是 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols这些类型的值。
比如:{a:1} == {a:1},返回的是 false,而实际业务,通常是希望它返回true的。那么isEqual正是你想要的,_.isEqual({a:1},{a:1})返回的就是true
var a={j:1,k:2}
var b={k:2,j:1}
var c={j:1,k:3}
var d={j:{l:"abc"},k:3}
_.isEqual(a,b) //return true
_.isEqual(a,c) //return false
_.isEqual(a,d) //return false
002、times(n,迭代方法):执行n次迭代方法并传入索引,返回一个由调用方法返回值,组成的列表。没有传迭代方法的话,直接返回索引。
_.times(4) // return [0,1,2,3]
_.times(4,string) // return ["0","1","2","3"]
_.times(4,(x)=>{return x*2}) // return [0, 2, 4, 6]
_.times(4,()=>{return "A"}) // return ["A", "A", "A", "A"]
_.times(26,(x)=>{return String.fromCodePoint(x+65)})
// return ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
### 003、some(
版权声明:本文为wosind原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。