如何分辨设备是移动设备还是桌面设备？
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? 'Mobile'
: 'Desktop';
// 例如
detectDeviceType(); // "Mobile" or "Desktop"
如何获取当前页面的滚动位置？
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
// Example
getScrollPosition(); // {x: 0, y: 200}
如何平滑滚动到页面顶部？
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
// Example
scrollToTop();
如何创建一个包含当前 URL 参数的对象？
const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
// Examples
getURLParameters('http://url.com/page?n=Adam&s;=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}
如何将一组表单元素编码为一个对象？
const formToObject = form =>
Array.from(new FormData(form)).reduce(
(acc, [key, value]) => ({
...acc,
[key]: value
}),
{}
);
// Example
formToObject(document.querySelector('#form'));
如何获取两个日期之间的天数间隔？
const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / (1000 * 3600 * 24);
// Example
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
脱敏处理
在一些涉及到用户隐私情况下，可能会遇到对用户的手机号身份证号之类的信息脱敏，但是这个脱敏数据的规则是根据用户信息要脱敏字段动态的生成的，此时我们动态拼接正则来实现一个动态脱敏规则
const encryptReg = (before = 3, after = 4) => {
return new RegExp('(\\d{' + before + '})\\d*(\\d{' + after + '})');
};
let str='410111111111904721'
let str2='17343212325'
console.log(str2.replace(encryptReg(2,2),'$1******$2'))//17******25
console.log(str.replace(encryptReg(),'$1****$2'))// 410****4721
数组分组
开发移动端的时候，遇到一个首页菜单改版的需求，首页菜单根据权限控制显隐，而菜单每页展示八个小菜单，超过八个做 swipe 滑动切换，当时项目用了 vant 做的 UI 框架，菜单那模块就选择了他的轮播插件，菜单做成了一个扁平化的 list 配置，首先根据权限过滤出所有有权限的菜单项，然后每八个一分组，处理成一个二维数据来遍历菜单
const arrayGroupBySize = (arr, size = 2) => {
const result = [];
for (let i = 0, len = arr.length; i < len; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
};
console.log(arrayGroupBySize(['张三','李四','王五']))
//(2) [Array(2), Array(1)]
扁平化数组
let requestArr=arrayGroupBySize(['张三','李四','王五'])
//扁平化数组
console.log(requestArr.flat())
数组去重：
可以使用 JavaScript 中的Set轻松删除重复项
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]
