ES6解决问题的代码总结

如何分辨设备是移动设备还是桌面设备？

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 ]