前端工作JS相关小技巧集锦


最后更新: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版权协议,转载请附上原文出处链接和本声明。