前端日常开发常用技巧与方法
CSS部分
盒子边倾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止点击事件/鼠标事件“穿透”
1 |
|
用来控制元素在移动设备上使用滚动回弹效果
1 |
|
可解决在IOS中使用overflow:auto 形成的滚动条,滚动不流畅的情况
文字渐变效果
1 |
|
css三角形
1 |
|
JS部分
JavaScript中检测数组的方法
(1)、typeof操作符
这种方法对一些常用的类型检查没有问题,但对array和null 都判断为object
(2)、instanceof操作符
这个操作符是检测对象的原型链是否指向构造函数的prototype对象的
(3)、对象的constructor属性
1 |
|
(4)、Object.prototype.toString
1 |
|
(5)、Array.isArray()
常用的字符串操作
- 字符串转化toString()
- 字符串分隔split()
- 字符串替换replace()
- 获取长度length
- 查询子字符串 indexOf
- 返回指定位置的字符串或字符串编码 charAt charCodeAt
- 字符串匹配 match
- 字符串拼接concat
- 字符串的切割或提取slice() substring() substr()
- 字符串大小写转化 toLowerCase toUpperCase
- 字符串去空格 trim() 用来删除字符串前后的空格
其中第9中三者的区别如下:
(1)slice(), 参数可以是负数,负数表示从字符串最后一个位置开始切割到对应结束位置
(2)substring(),参数不可为负数,切割第一个位置到第二个位置的字符串
(3)substr(), 参数不可为负数,第一个参数是开始位置,第二个参数为切割的长度
字符串去重
const str = ‘11122223333’
const arr = str.split(‘’)
const uniqueStr = […new Set(arr)].join(‘’)
常用的数组操作
1、Array.map()
此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
2、Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数,没有返回值,注意和map方法区分
3、Array.filter()
此方法是将满足条件的元素作为一个新数组返回
4、Array.every()
此方法将数组所有元素进行判断返回一个布尔值,如果所有元素都符合判断条件,则返回true,否则返回false
5、Array.some()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件,则返回true,所有元素都不满足则返回false
6、Array.reduce()
此方法为所有元素调用返回函数
7、Array.push()
在数组最后面添加新元素
8、Array.shift()
删除数组第一个元素
9、Array.pop()
删除数组最后一个元素
10、Array.unshift()
在数组最前面增加元素
11、Array.isArray()
判断是否为一个数组
12、Array.concat()
数组拼接
13、Array.toString()
数组转化为字符串
14、Array.join()
数组转化为字符串,并用第一个参数作为连接符
15、Array.splice(开始位置,删除个数,元素)
####常用对象方法
1、Object.assign()
用于克隆,两个参数,将第二个对象分配到第一个中
2、Object.is()
用于判断两个值是否相同
//注意,该函数与==运算符不同,不会强制转换任何类型, 应该更加类似于===,但值得注意的是它会将+0和-0视作不同值
3、Object.keys()
用于返回对象可枚举的属性和方法的名称,返回一个属性或方法名称的字符串数组。
4、Object.defineProperty()
劫持变量的set和get方法,将属性添加到对象,或修改现有属性的特性
1 |
|
5、Object.defineProperties()
可添加多个属性,与Object.defineProperty()对应,
6、isPrototypeOf
1 |
|
安卓监听可视区域变化,让输入框移动至可视区域
1 |
|
vue中平滑滚动到某个位置
this.$refs.rule.scrollIntoView({ block: ‘start’, behavior: ‘smooth’ })
好用的JavaSrcipt库与模块(包)
日期时间处理库
1、monent.js
2、day.js
day相对于monent要轻量许多
高精度数学运算
1 |
|
实用工具库
Lodash
lodash 是一个 JavaScript 实用工具库,提供一致性,及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦,从而简化了 JavaScript、 数字、对象、字符串等
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!