独具匠心

Appearance

JavaScript常用数据处理方法 ​

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

javascript
// 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
// 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、防抖 ​

TIP

1、登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；
2、调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；
3、文本编辑器实时保存，当无任何更改操作一秒后进行保存。

javascript
// 防抖 在事件被触发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);
		}
	}
}
// 防抖 在事件被触发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、节流 ​

TIP

1、鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
3、浏览器播放事件，每个一秒计算一次进度信息等

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

3、用户信息脱敏显示 ​

TIP

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

javascript
// 节流 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
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
// 节流 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
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