一些常用的前端功能

这篇博客汇总了前端开发中的一些实用技巧,包括反转对象键值、删除空值属性、颜色转换、对象比较、文本处理、事件监听等。还探讨了JavaScript中的特殊值、键盘事件处理以及解决图片边框问题的方法。
摘要由CSDN通过智能技术生成

反转对象键值

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {})
var t = invert({name: 'jack'}) // {jack: 'name'}
console.log(t)

删除对象中的属性值为null或undefined的所有属性

const removeNullUndefined = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});
var t = removeNullUndefined({name: '', age: undefined, sex: null}) // { name: '' }
console.log(t)

颜色格式转换:6进制转换成rgb

const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
var t = hexToRgb('#00ffff'); // [0, 255, 255]
var t = hexToRgb('#0ff'); // [0, 255, 255]
console.log(t)

比较两个对象

const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))
isEqual({name: 'jack'}, {name: 'jack'}) // true
isEqual({name: 'jack'}, {name: 'jack1'}, {name: 'jack'}) // false

在某个文本中将里面的标签全部过滤掉

const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
var txt = stripHtml('<p>ddd</p><div>test</div>') // 'dddtest'
console.log(txt)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值