JavaScript常用数据处理方法

JavaScript常用数据处理方法

1、手机号、证件号隐藏中间某几位

// str字符串变量   start开始第几位之后替换  end第几位结束   middle中间替换的内容
forMate(str, start, end, middle) {
	if (start < end) {
		var len = Math.abs(start - end);
		var text = "";
		for (var i = 0; i < len; i++) {
			text += middle;
		}
		return str.substring(0, start) + text + str.substring(end);
	}
	return false;
}
//forMate("12345678901",3,7,"*");						//123****8901
//forMate("12345619990927542X",6,14,"*");				//410381********542X

2、防抖

1、登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；

2、调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；

3、文本编辑器实时保存，当无任何更改操作一秒后进行保存。

// 防抖 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。(触发立即执行)
debounce(func, wait, immediate) {
	let timeout;
	return function () {
		const context = this;
		const args = [...arguments];
		if (timeout) clearTimeout(timeout);
		if (immediate) {
			const callNow = !timeout;
			timeout = setTimeout(() => {
				timeout = null;
			}, wait)
			if (callNow) func.apply(context, args)
		}
		else {
			timeout = setTimeout(() => {
				func.apply(context, args)
			}, wait);
		}
	}
}

3、节流

1、鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；

2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；

3、浏览器播放事件，每个一秒计算一次进度信息等

// 节流 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
throttle(func, delay) {
	let timer = null
	return function () {
		if (!timer) {
			timer = setTimeout(() => {
				func.apply(this, arguments)
				// 或者直接 func()
				timer = null
			}, delay)
		}
	}
}

3、用户信息脱敏显示

1、str字符串变量 start开始第几位之后替换 end第几位结束 middle中间替换的内容

// 节流 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
forMate(str, start, end, middle) {
	if (!str) {
		return '--'
	}
	if (start < end) {
		var len = Math.abs(start - end);
		var text = "";
		for (var i = 0; i < len; i++) {
			text += middle;
		}
		return str.substring(0, start) + text + str.substring(end);
	}
	return false;
}
//forMate("17635477842",8,11,"*");						//1763547****
//forMate("41038119990927542X",6,14,"*");				//410381********542X