js方法的应用（前端写法）

---

1、获取地址栏上某个参数值

/**
 * @description 获取地址栏上某个参数值
 * @param {string} key 参数名
 * @return {string} 返回参数值
 */
function getUrlParam(key) {
	let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
	let r = window.location.search.substr(1)
		.match(reg);
	if (r != null)
		return unescape(r[2]);
	return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、转换带T的时间格式

举例：formDateT(‘2019-01-01T08:01:01’)
结果：2019-01-01 08:01:01

/**
 * @description 转换带T的时间格式
 * @param {string} data 日期
 * @return {string} 返回YYYY-MM-DD HH:MM:SS格式的日期
 */
function formDateT(data){
  if (!data) return;
  let dates = new Date(data).toJSON();
  return new Date(+new Date(dates) + 8 * 3600 * 1000)
    .toISOString()
    .replace(/T/g, " ")
    .replace(/\.[\d]{3}Z/, "");
};
1
2
3
4
5
6
7
8
9
10
11
12
13

3、 时间戳转换成，YYYY-MM-DD HH:MM:SS格式

举例：formatDate(1641417514502)
结果：2022-01-06 05:18:34

/**
 * @description 时间戳转换成，YYYY-MM-DD HH:MM:SS格式
 * @param {number} date 时间戳
 * @return {string} 返回YYYY-MM-DD HH:MM:SS格式的日期
 */
function formatDate(date){
  if (!date) return;
  let time = new Date(date);
  return (
    time.getFullYear() +
    "-" +
    (time.getMonth() + 1).toString().padStart(2, "0") +
    "-" +
    time.getDate().toString().padStart(2, "0") +
    "\xa0" +
    time.getHours().toString().padStart(2, "0") +
    ":" +
    time.getMinutes().toString().padStart(2, "0") +
    ":" +
    time.getSeconds().toString().padStart(2, "0")
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4、计算两个时间相差的天、小时、分、秒

举例：timediff(“2022-01-06 05:18:34”, “2022-01-06 07:10:34”)
结果：0天1小时52分0秒

/**
 * @description 计算两个时间相差的天、小时、分、秒
 * @param {string} startDate 开始日期
 * @param {string} endDate 结束日期
 * @return {string} 返回相差的天、小时、分、秒
 */
function timediff(startDate, endDate){
  if (!startDate || !endDate) return;
  //时间差的毫秒数
  let date3 = new Date(endDate).getTime() - new Date(startDate).getTime();
  //计算出相差天数
  let days = Math.floor(date3 / (24 * 3600 * 1000));
  //计算出小时数
  let leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
  let hours = Math.floor(leave1 / (3600 * 1000));
  //计算相差分钟数
  let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
  let minutes = Math.floor(leave2 / (60 * 1000));
  //计算相差秒数
  let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
  let seconds = Math.round(leave3 / 1000);

  return days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5、获取字符串中的数字和运算符，并分别组成新的数组

/**
 * @description 获取字符串中的运算符和数字，并分别组成新的数组
 * @param {string} str 待拆解的字符串
 * @returns {{operator:Array,digital:Array}} operator，运算符；digital，数字
 * @example getWord('12+34.5-67+0.899-138.6')
 */
function getWord(str){
    const reg = /×|-|[/]|[+]|==|!=|>=|>|<=|<|\|\|/; // 以+,-,*,/和==,!=,>,>=,<,<=,||运算符分割
    let operator = []
    str.split('').forEach(e => {
        reg.test(e) && operator.push(e)
    })
    return {
        digital: str.split(reg),
        operator: Array.from(new Set(operator))
    }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6、百度地图经纬度转腾讯/高德

当百度的经纬度用在腾讯或高德地图中时，会出现误差，所以需要将经纬度进行转换

/**
 * @desc 百度转腾讯/高德
 * @param {number} lng - 百度地图经度
 * @param {number} lat - 百度地图维度
 * @returns {object} 返回转换后的经纬度
 */
function bMapTransqqMap(lng, lat){
  let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
  let x = lng - 0.0065;
  let y = lat - 0.006;
  let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  let lngs = z * Math.cos(theta);
  let lats = z * Math.sin(theta);
  return {
    longitude: lngs,
    latitude: lats,
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7、防抖(闭包)

(1) 代码

/**
 * @description 防抖(闭包)
 * @param {Function} fn 防抖之后，待执行的事件
 * @param {number}  time 防抖时间
 * @return {Function}
 */
export function debounce (fn, time) {
    // 等待的时间默认200ms
    let delay = time || 200;
    let timer = null;
    return function () {
        const _this = this;
        // 保存调用时传来的参数
        const args = arguments;
        // 每次事件被触发时，都清除之前的旧定时器
        if (timer) {
            clearTimeout(timer);
        }
        // 函数延迟执行
        timer = setTimeout(function () {
            fn.apply(_this, args);
        }, delay);
    };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

(2) 举例

<template>
  <div>
    <button @click="changeValue">点击防抖</button>
    <span>累计：{{ printValue }}</span>
  </div>
</template>

<script>
// 导入防抖方法
import { debounce } from "@/utils/util";

export default {
  name: "example",
  data() {
    return {
      printValue: 0,
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    changeValue: debounce(function () {
      // 此处写实际要执行的功能逻辑
      this.printValue++;
    }, 500),
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29