一些有用的javascript函数

作者：不爱喝橙子汁

1. /**
2. * 类型检测函数
3. * 为typeof关键字的增强版，可以准确判断null，date类型
4. * 原理是使用V8引擎最初的toString方法观察数据类型
5. * @author 不爱喝橙子汁
6. * @version 1.0.0
7. * @param {Object} obj 任意对象，例如null，undefined，date
8. * @return {String} 类型的全小写字符串
9. */
10. function type(obj) {
11.    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
12. }

复制代码

1. /**
2. * 节流
3. * 在给定时间内只有第一次的操作会返回结果
4. * 结合了防抖的思路：在delay时间内生成定时器，一旦到了delay的时间就返回结果
5. * 当用户只点击了一次的时候，在delay时间后得到结果
6. * 当用户点击了多次的时候，在delay时间后得到第一次的结果，其余的被节流阀忽视掉
7. * @author 不爱喝橙子汁
8. * @version 1.0.0
9. * @param {Function} fn 要包装的回调函数
10. * @param {number} delay 延迟时间，单位ms，默认500
11. * @return {Function} 被节流函数劫持的新的函数
12. */
14. function throttle(fn, delay = 500) {
15.   let last = 0;
16.   let timer = null;
17.   
18.   return function () {
19.     let args = arguments;
20.     let now = +new Date();
21.     let context = this;
23.     if (now - last < delay) {
24.       clearTimeout(timer);
25.       timer = setTimeout(() => {
26.         last = now;
27.         fn.apply(context, args);
28.       }, delay);
29.     } else {
30.         last = now;
31.         fn.apply(context, args);
32.     }
33.   }
34. }

复制代码

1. /**
2. * 防抖
3. * 在delay时间后得到结果
4. * 如果没等到delay的时间一直触发则永远也得不到结果
5. * @author 不爱喝橙子汁
6. * @version 1.0.0
7. * @param {Function} fn 要包装的回调函数
8. * @param {number} delay 延迟时间，单位ms，默认500
9. * @return {Function} 被防抖函数劫持的新的函数
10. */
11. function debounce(fn, delay = 500) {
12.   let timer = null;
13.   return function () {
14.     let args = arguments;
16.     if(timer) {
17.         clearTimeout(timer);
18.     }
20.     timer = setTimeout(() => {
21.       fn.apply(this, args);
22.     }, delay);
23.   }
24. }

复制代码

1. /**
2. * 获取地图上两点间距离。单位：米
3. * @param {lat1} 第一个点的纬度
4. * @param {lon1} 第一个点的经度
5. * @param {lat2} 第二个点的纬度
6. * @param {lon2} 第二个点的经度
7. * @author 不爱喝橙子汁
8. */
9. export function getDistance(lat1, lon1, lat2, lon2) {
10.   const radLat1 = (lat1 * Math.PI) / 180.0;
11.   const radLat2 = (lat2 * Math.PI) / 180.0;
12.   const a = radLat1 - radLat2;
13.   const b = (lon1 * Math.PI) / 180.0 - (lon2 * Math.PI) / 180.0;
14.   let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
15.   s = s * 6378137;
16.   s = Math.round(s * 10000) / 10000;
17.   return s;
18. }

复制代码

1. // 把若干数组按指定的字段名进行分组
2. function groupBy(list, propName) {
3.   return list.reduce((acc, item) => {
4.     const key = item[propName];
5.     if (!acc[key]) {
6.       acc[key] = [];
7.     }
8.     acc[key].push(item);
9.     return acc;
10.   }, {});
11. }

复制代码

1. // 深拷贝对象
2. function deepClone(obj) {
3.   if (obj === null) return null;
4.   if (typeof obj !== 'object') return obj;
5.   if (obj instanceof Date) {
6.     let date = new Date();
7.     date.setTime(obj.getTime());
8.     return date;
9.   }
10.   if (obj instanceof RegExp) {
11.     let re = new RegExp(obj.source);
12.     re.lastIndex = obj.lastIndex;
13.     return re;
14.   }
15.   let newObj = new obj.constructor();
16.   for (let key in obj) {
17.     if (obj.hasOwnProperty(key)) {
18.       newObj[key] = deepClone(obj[key]);
19.     }
20.   }
21.   return newObj;
22. }

复制代码

1. /**
2. * 提取若干数组中指定字段组合成一个新数组
3. */
4. function extractProps(arr, prop) {
5.   return arr.map((item) => item[prop]);
6. }

复制代码

1. /**
2. * 提取对象中的指定的属性，返回一个新对象
3. */
4. function pickProps(obj, props) {
5.   if (typeof obj !== 'object') {
6.     return obj;
7.   }
8.   const newObj = {};
9.   props.forEach((prop) => {
10.     newObj[prop] = obj[prop];
11.   });
12.   return newObj;
13. }

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

热心回复！

感谢，下载保存了

谢谢楼主提供！

感谢，下载保存了

东西不错很实用谢谢分享

感谢分享，学习下。

谢谢分享，辛苦了

新版吗？好像是停更了吧。

过来提前占个楼

鼓励转贴优秀软件安全工具和文档！

过来提前占个楼

这个有用。