前端开发，JavaScript实际开发过程中常用JS小技巧

QzjAuroraJun

已于 2022-07-05 17:36:12 修改

阅读量1.5k

点赞数 5

分类专栏： JavaScript ECMAScript6 浏览器兼容性问题文章标签： javascript 前端开发语言

于 2021-12-05 19:34:14 首次发布

本文链接：https://blog.csdn.net/MaybyYouLove/article/details/121732539

版权

JavaScript 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

ECMAScript6

6 篇文章 0 订阅

订阅专栏

浏览器兼容性问题

3 篇文章 0 订阅

订阅专栏

1.JS 阻止‘a’标签默认事件

//阻止a标签默认事件
var evt = evtwindow.event;/获取event对象 
if (evt.preventDefault) {
	evt.preventDefault(;//非IE浏览器
} else {
	evt.returnValue =false;//IE低版本
}

2.JS 判断当前是苹果系统还是安卓系统

if (/iPhone/.test(navigator.userAgent)){
	$(".btn:last").attr("href", "https://s.growingio.com/wPomzK");
} else if (/Android/.test(navigator.userAgent)){
	$(".btn:last").attr("href", "https://www.ch.com/download-app");
}

3.JS 高亮显示匹配内容
/**
*高亮显示匹配到的搜索参数
*/

heightLightSearchPara: function(str, key){
	var that = this;
	var reg = new RegExp("(" + key + ")" "g");
	var newstr =str.replace(reg, "<span style='background:#00ab6f;'>$1</span>"); 
	return newstr;
}

4.JS 实现模糊查询
1).indexof 方法

语法：stringObject.indexOf(searchvalue, fromindex)
参数：searchvalue必需。规定需检索的字符事值。fromindex可选的整数参数。规定在字符事中开始检索的位置，它的合法取值是0到
stringObject.length-1，如省略该参数，则将从字符事的首字符开始检素。
说明；该方法从头到民地检素李涉事stringObject，看它是否含有子串searhvalue。
开始检素的置在字符串中的 romindex 处或字符串中的开头(没有有指定fromindex时)，如果找到一个searchvalve,则返回 searchvalve
的这一次出现的位置,stringObject中的字符串位置是从0开始的，如果没有找到，则返回-1。

/**	
	*使用indexof方法实现模期查询
	*@param{Array!list进行查询的故组
	*@param(String) keyWord 查询的关键词
	*@return(Array) 查询的结果 
*/

function fuzzyQuery(list,keyWord)( 
	var am =1:
	for (var i = 0; i < list.length; i+ +) { 
		if (listnjJindexOf(keyWord) >= 0){
			arr.push(list):
			return airr;
		}
	}
}

2).spit 方法

语法：stringObject.split(separator,howmany)
参数：separator必须。字符串或正则表达式，从该参数指定的地方分stringOhiect。howmany可选，该参数可指定返回的数组的最大长度。
如果设置了该参数，返回的字符串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考的它的长度。
说明：该方法通过在separator指定的边界处将字符串stringObject分割成子串数组。说返回的数组中的子串不包活separator自身。如果stringObject中不存在separator，将返回一个只包合stringObject 的数组，故可以根据返回数组的长度来判断是否存在子字符串separator

/**
*使用spilt方法实现模湖查询
*@param {Arrayllist进行查询的数组
*@param {String) keyWord 查询的关键词
*@return (Arrayi 查询的结果 
*/
function fuzzyQuerw(list,keyWord)( 
	var arr =[]:
	for (var i - 0; i < list.length; i++){ 
		if (list[i].spit (keyWord).length>1){
		 	arr.push(list[i]);
		}
	}
	return arr;
}

3).match 方法
语法：stringObject.match(searchvalue)或stringObject.match(regexp)
参数：searchvalue 必需。规定要检索的字符事值。regexp必需。规定要匹面的模式的RegExp对象。如果该参数不是RegExp对象，则需要首先把它传递给RegExp 构造函数，将其转换为 RegExp 对象。
说明：该方法将在字符串stringObject内检索指定的值，或找到一个或多个正则表达式的匹配，如果没有找到任何匹配的文本，将返回null，否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息

/**
*使用match方法文现模糊查询
*@param{Arrav} list进行查询的数组
*@param(String)keyWord 查询的关键词
*@returm {Array) 查询的结果 
*/
function fuzzyQuerwlist,keyWord){ 
	var arr =[]:
	for {var i=0:i< list.length: 1+ +){
		 if (listl[i].match(keyWord)!= null) {
		 	arr.push(list[i]);
		}
	}
	return arr,
}

4).test方法(正则匹配)
语法：RegExpObject.test(string)
参数：string 必需，要检测的字符申。
说明：该方法用于检测一个字符串是否匹配某个模式。如果字符串string中含有与RegExpObject四配的文本，则返回true，否则返回false

/**
*使用test方法实现模糊查询
*@param {Array) list原数组
*@param(Strina)keWord 查询的关键词
*@returm{Array) 查询的结果 
*/
function fuzzyQuerwlist,keyWord) {
	var reg = new RegExp(keyWord): 
	var arr = []:
	for (var i= 0; i < list.length; i+ +){ 
		if (reg.test(list[i])) {
		 	arr.push(listl[i])
		}
	}
	return arr;
}

性能测试：
看了上面的简单介绍之后，我相信大家会发现其实四种方法在使用上都差不多，以下为测试用例和结果。
测试条件;一个长度为100的数组，每个方法测试50次，取平均值。 indexof方法耗费时间:0.048ms split
方法耗费时间:0.037ms match 方法耗费时间:0.178ms test 方法耗器时间:0.039ms

结论：
从上面测试结果可以看出在几百几千甚至几万条数据量的情况下，前端去处理都是没问题的，相比发送一个ajax请求去后台来说，前端还是具有很大优势的，能节省不少时间。

5.JS浏览器Cookie存储数据
JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。

什么是 Cookie?

Cookie 是一些数据，存诸干你申脑上的文本文件中。当web 服务器向浏览器发送web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie的作用就是用于解决"如何记录客户端的用户信息":

当用户访问web页面时，他的名字可以记录在cookie中在用户下一次访问该页面时，可以在cookie中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:
username=John Doe
当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

/**
*JS原生设置cookie
*@param name cookie的名称@param value cookie的值
*@param day cookie的过期时间
*escape()对字符串编码,以适用于所有的计算机*
*/
var setCookie = function (name,value,day){
	if(day!==0){ 
		//当设置的时间等于0时，不设置expires属性(cookie有效期)，cookie在浏览器关闭后删除
		var expires = day*24*60 *60 *1000;
		var date = new Date(+new Date(+expires);
		document.cookie = name +"="+escape(value)+";expires="+ date.toUTCString0;
	} else {
		document.cookie =name+"="+escape(value);
	};
}

/**
JS原生获取对应名称的cookie@param name cookie的名称
*@returns {null)不存在时，返回null
*/

var getCookie = function (name) { 
	var arr:
	var reg = new RegExp("(^)" + name + "=([^;]*)(|$)"); 
	if (arr = document.cookie.match(reg)) {
		return unescape(arr[2]);
	} else {
	return null;
	}
}

view.js 里的公共方法

view.prototype.setCookie()
setCookie: function (c name,value,expiredays,thisType){
	var exdate = new Date();
	if(thisType == 1) {
		exdate.setHours(exdate.getHours()+expiredays);//时
	} else if (thisType == 2) {
		exdate.setMinutes(exdate.getMinutes()+expiredays)://分
	} else if (thisType == 3)(
		exdate.setSeconds(exdate.getSeconds(+expiredays);//秒
	} else {
	exdate.setDate(exdate.getDate()+expiredays);//天数
	}
	document.cookie=c_name + "="+ escape(value) + ((expiredays == null) ? "" : ";domain=.ch.com;path=/;expires="+ exdate.toGMTString0);
}

view.prototype.getCookie()
getCookie: function (c_name) {
	if (document.cookie.length >0) {
		c_start = document.cookie.lastindexOf(c_name +"=") ;
		if (c_start != -1) {
			c_start =c_start +c_name.length + 1;
			c_end = document.cookie.indexOf(",", c_start);
			if (c_end == -1) {c end = document.cookie.length; }
			return unescape(document.cookie.substring(c_start, c_end)))
		}
		return "";
}

6.JS浏览器Storage存储数据
1）Window sessionStorage 属性

使用sessionStorage 创建一个本地存储的name/value对，name=“lastname”
value=“Smith”,然后检索"lastname"的值，并插入到id="result"的元素上

// 存储
sessionStorage.setltem("lastname", "Smith");
//检索
document.getElementByld("result").innerHTML = sessionStorage.getltem("lastname");

localStoraqe 和 sessionStorage 属性允许在浏览器中存储key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示：如果你想在浏览器窗口关闭后还保留数据，可以使用localStorage属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

2）Window localStorage 属性

使用localStorage创建一个本地存储的name/value 对，name=“lastname”
value=“Smith”,然后检索"lastname"的值，并插入到id="result"的元素上

// 存储
localStorage.setltem(“lastname”, “Smith”);
//检索
document.getElementByld(“result”).innerHTML = localStorage.getltem(“lastname”)

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 localStorage 属性是只读的。

提示：如果你只想将数据保存在当前会话中，可以使用sessionStorage 属性，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

案例：外卡支付升级需求案例(点击支付，存储用户填写全部数据到sessionStoraqe，支付失败，重新支付时，页面刷新自动获取存储内容并设置进去)

/**
外卡支付升级
*设置sessionStorage 存储用户填写的外卡信息ZiJun Qu
*/
function setSaveWaikaUserDatalnfo_pc(){
	sessionStorage.setltem("WaikaUserDatalnfo",");//sessionStorage 设置之前，清除
	
	var saveDatalnfo ={};//用户填写数据信息
	var indexKey = el.paymentPara.paymentKey;//当前支付页地址的key
	var toPayDirectForm=$('#toPayDirect).find"input'):
	//pc表单全部数据国家需要用存的数据去click-下
	//$('data-value=Chinal").click()
	var Address_ALL =$('#Address_ALL').text(;//PC端的账单详细地址 
	for(var i = 0; i < toPayDirectForm.length; i ++) {
		if(toPayDirectForm[i].name){
			saveDatalnfo[toPayDirectForm[i].name]=$(toPayDirectForm[i]).val();//表单内容
		}
	}
	saveDatalnfof'indexKey"=indexKey://页面key
	saveDatalnfor'Address ALL=Address ALL;//账单详细地址
	var saveDatalnfoJson =JSON.stringify(saveDatalnfo)://转JSON字符串
	sessionStorage.setltem("WaikaUserDatalnfo", saveDatalnfoJson); // 设置sessionStorage
}
/*
*外卡支付升级
*获取 sessionStorage 存储用户填写的外卡信息ZiJun Qu
*/
function getSaveWaikaUserDatalnfo_PC(){
	el.getSaveUserDatalnfo = $.parseJSON(sessionStorage.getltem("WaikaUserDatalnfo'));//转对象 
	if(el.getSaveUserDatalnfo){
		el.isSavelndexKey =el.getSaveUserDatalnfo.indexKey://存储sessionStorage 的支付页地址
	}
}
/*
*外卡支付升级
*支付失败页点击，重新支付，返回支付页设置用户之前填写的数据 ZiJun Qu
*/
function setUserDatalnfo_pc(){
	$('#cardNumber".val(el.getSaveUserDatalnfo.cardNumber);//设置卡号 
	var cardNolnput=$(#cardNumber");
	var CardNo=globalParam.isMobile?$'#M_CardNumber').val0:$'#cardNumber').val0://用户输入时的卡号 
	var userNameData ="://持卡人姓名
	cardNoKeyup(cardNolnput,CardNo);//识别卡种
	
	var PayChannel =$('#PayChannel').val();//当前卡号的支付渠道
	$('#cardHolderName').val(el.getSaveUserDatalnfo.cardHolderName);//设置持卡人姓名 
	//名字长度超过6位，取前6位展示，后面展示...
	if (el.qetSaveUserDatalnfo.cardHolderName.length >6){
		userNameData =el.getSaveUserDatalnfo.cardHolderName.substring(0,6)+'...';
		$('#cardHolderName).val(el.getSaveUserDatalnfo.Name); 
		el.J_UserName.text(userNameData);//卡片上名字
	}else {
		el.JUserName.text(el.getSaveUserDatalnfo.cardHolderName);
	}
	
	$('#J-DatePirick').val(el.getSaveUserDatalnfo.year + '-'+ el.getSaveUserDatalnfo.month);//设置有效期
	$('#J UseCardTime').text(el.getSaveUserDatalnfo.month+'/'+el.getSaveUserDatalnfo.year.substring(2,4));//卡片上有效期
	$('#cvc').val(el.getSaveUserDatalnfo.cvc);//设置密码 
	var starVal=el.getSaveUserDatalnfo.cvc.replace(/./g,'*) 
	var html = [];
	for (var i = 0; i < starVal.length; i++) {
		html.push('<td>*</td>');
	}
	
	$('.starBox').find('.star').html('<table cellpadding="0" cellspacing="0" border="0"><tr>'+ html.join(") + '</tr></table>');
	$('.starBox').find('.txt').html(el.getSaveUserDatalnfo.cvc);
	$('#J_Password").html(starVal);//设置密码

	$('#shopperEmailAddress').val(el.getSaveUserDatalnfo.shopperEmailAddress);//设置邮箱	
	$('#postalCode').val(el.getSaveUserDatalnfo.postalCode);//设置邮编
	
	$('#toPayDirect .country).find('[data-value=""+ el.getSaveUserDatalnfo.BillingCountry +""]).click(;//设置账单国家
	$('#city").val(el.getSaveUserDatalnfo.city);//设置账单城市
	$('#Address_ALL').text(el.getSaveUserDatalnfo.Address_ALL)://设置账单详细地址 
	Address_ALLBlur(el.getSaveUserDatalnfo.Address_ALL);//有账单详细地址，清除水印
}

7.JS快速实现深拷贝

let obj = {
	name:'1张三丰'， 
	age: 22, 
	messige: { 
		sex: '男'. 
		score: 16
	color: ['red', 'purple', 'qing']
}
let be = 0:

function kao(be,obj) {
	/// key代表obj的键，obj[key]代表的值
	// newObj[key] =obj[key];// 返现问题啦，如果obj[key]是复杂数据类型，就不可以赋值\
	// 如果obj[key]是数组，那么需要继续遍历
	//再如果obilkey]是对象，那么又需要遍历
	// 否则newObj[key]= obj[key] 
	for (var key in obj) {
		if (obj[key] instanceof Array){// 如何判断是不是数组
			be[key] =  []; //确保是 数组
			kao(be[key], obj[keyl) // forin 也可以遍历数组
		} else if (obj[key] instanceof Object) {
			be[key] = {};
			kao(be[key], obj[key]);
		} else {
			be[key] = obj[key];
		}
	}
	
kao(be,obj);
obj.messige.score = 9999999999;

console.log(obj); //messige: {sex: "男", score: 9999999999}
console.log(be); //messige: {sex:"男",score: 16}

8.JS中的setTimeout和setinterval到底有啥区别?

setTimeout会保证在指定好的延时时间后执行，但是setinterval则不会这样。
如果function中的代码有耗时载操作，那么使用setTimeout方法递归，则可能会增加总递归的时间。
而使用setInterval方法，如果程序中耗时比延时间隔长，则会立刻回调函数。

setTimeout()
在延时后的只执行一次

setinterval()
这个方法会在指定的延时间隔重复执行

9.JS对象与JSON字符串相互转换

JSON.stringify( JS对象);//对象转JSON字符串ie8(兼容模式)、ie7、ie6 不要使用此方法。
JSON.parse (JSON字符串);//JSON字符串转对象ie8(兼容模式)、ie7、ie6 不要使用此方法。
$.parseJSON(JSON字符串); //如果引入勒jqJSON转字符串，保证各浏览器兼容

例:

var saveDatalnfoJson =JSON.stringify(saveDatalnfo)
// 设置sessionStorage
sessionStorage.setltem("WaikaUserDatalnfo",saveDatalnfoJson);

10.JS判断当前浏览器是否支持某个属性

/**
*判断当前浏览器，是否支持某个css属性
*/
var support_css3 = (function() {
	var div =document.createElement('div'),
	vendors = 'Ms O Moz Webkit'.split('), 
	len = vendors.length;
	
	return function(prop){
		if ( prop in div.style ) return true;
		
		prop = prop.replace(/^[a-z]/, function(val) { 
			return val.toUpperCase();
		});
		
		while(len--){
			if ( vendors[len] + prop in div.style ) { 
				return true:
			}
		}
		return false;
	};
})();

support_css3('transform');//调用

11.JS设置禁用浏览器回退操作

// 设置禁止浏览器回退操作（一）
history.pushState(null, null,document.url);
window.addEventListener("popstate', function (){ 
	history.pushState(null, null, document.URL);
});

//禁止浏览器的回退功能（二）
$(function() {
　　if (window.history && window.history.pushState) {
　　 $(window).on('popstate', function () {
　　 window.history.pushState('forward', null, '#');
　　 window.history.forward(1);
　　});
　　}
window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
　　 window.history.forward(1);
})

12.JS限制表单可输入最大字数

//外卡支付，账单地址处使用
$('body').on('input','#M_Address ALL', function() {
	//限制M端，账单地址最大只能输入225个字
	var fizeNum =$(this).text0.length;//获取输入字数 
	if(fizeNum >225) {///如果大于225
		var char = $(this).text();
		char =char.substr(0,225);//截取字符串(前225)
		$(this).text(char);
		$(this).blur();
	}
});

13.JS银行卡输入每四位空一位

input银行卡输入框，四位一空格项目中遇到输入银行卡的input框，并且要求是4位一空，四位一空的问题比较容易

<input type="tel" id="bankCard" placeholder="">

<script>
	$("#bankCard").on("input" function(
		var val=$(this).val0.replace(^s/g,"").replace(/(\d{4))/g,"$1 ");
		$(this).val(val);
	});
</script>

jquery请自己引入;
但是空了之后，从中间添加，中间删除光标就会乱跳，以下方法可以完美解决这个问题:

<input type="tel" id="bankCard" placeholder="" >

<script>
	$(*#bankCard").on("keyup",function() {
		//获取当前光标的位置
		var caret = this.selectionStart;
		
		//获取当前的value 
		var value = this.value;
		
		//从左边沿到坐怀之间的空格数
		var sp = (value.slice(0,caret).match(/\s/g)|| []).length;
		
		//去掉所有空格
		var nospace = value.replace(/\s/g, ");
		
		//重新插入空格
		var curVal = this.value = nospace.replace(/\D+/g."").replace(/(\d{4}/g."$1").trim();
		
		//从左边沿到原坐标之间的空格数
		var curSp = (curVal.slice(0,caret).match(/\s/g)||[]).length;
		
		//修正光标位置
		this.selectionEnd = this.selectionStart = caret + curSp - sp;
	}
</script>

14.JS中文字符转unicode编码

/**
*当前文字转换为unicode编码格式
*@param str
*@returns {string)
*/
function decToHex(str) {
	var res = [];
	for(var i=0; i<str.length; i++) {
		res[i] = ("00"+str.charCodeAt(i).toString(16)).sllice(-4); 
		return "\\u"+res.join("u");
}
function hexToDec(str) {
	str=str.replace(/\\/g,"%");
	retunn unescape(str);
}

列: 原话:"请输入您的详细地址” 转码:decToHex(请输入您的详细地址”);
传成:\u8bf7\u8f931151651u6038117684\u8be6\u7ec6\u5730115740JS使申
转成:\8bf7\8f93\5165\60a8\7684\8be6\7ec6\5730\5740 CSS使用
解码:hexToDec(\u8bf7\u8f93\u5165\u60a8\u7684\u8be6\u7ec6\u5730ku5740
PS:转出来的格式U123这样的，S里面使用的，如果要在CSS里用(比如伪元素的content，则需要写成123，不要那个，不然测范器无法识别出来，会把\u123直接展示到伪元素那里)

15.JS正则匹配，剔除字符串中全部空格

var a = '4444 3333 2222 1111" 
var b = a.replace(/s+/g,"");

b=4444333322221111;

16.JS 判断当前JS运行环境是M还是小程序还是APP

var ua = navigator.userAgent.toLowerCase();
that.runver = null:

if(ua.match(/Mobile/i)=='mobile') {//M端
	that.runver = 3;
}
if(ua.match(/miniProgram/i)=='miniprogram'){//微信小程序
	that.runver = 6
}:
if(ua.match(AlipayClient/i)=='alipayclient'){//支付宝小程序
	that.runver = 7;
}
if(ua.match(/chapp/i)=='chapp'){//APP
	that.runver = 2:
}

17.动态获取当前页面sea-master5.js 文件版本号（可扩展为任意JS文件）

/**
*2020.05.20 ZiJun Qu
*动态获取当前sea-master5.js文件版本号
*/
function getThisCtrolNum() {
	var this_Scripts = document.getElementsByTagName('script');//获取全部script标签 
	var this_ScriptsSrc = '';
	var this_HasCtrolNumJS = '';//当前含有版本号的sea-master5.js 
	var this CtrolNum=";//当前的这个版本号
	
	for (var i = 0; i < this Scripts.length; i++){
		this_ScriptsSrc = this_Scripts[i].getAttribute('src');//每一个script 标签的src属性，用于判断 
		if (thi_ScriptsSrc && this_ScriptsSrc.indexOf('sea-master5') > -1) {
			thi_HasCtrolNumJS = this_Scriptsil.getAttribute('src')://当前sea-master5.js
		}
	}
	return this_CtrolNum = /sea-master5.js\?vs\=\d+/.exec(this_HasCtrolNumJS) && /sea -master5.js\?vs\=d+/.exec(this_HasCtrolNumJS)[0] && /sea-master5.is\?vs=d+/.exec(this_HasCtrolNumJS[0].split('vs=')[1]:/当前sea-master5.s 的版本号
}

QzjAuroraJun

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端开发，JavaScript实际开发过程中常用JS小技巧

1.JS 阻止‘a’标签默认事件//阻止a标签默认事件var evt = evtwindow.event;/获取event对象 if (evt.preventDefault) { evt.preventDefault(;//非IE浏览器} else { evt.returnValue =false;//IE低版本}2.JS 判断当前是苹果系统还是安卓系统if (/iPhone/.test(navigator.userAgent)){ $(".btn:last").attr("href"
复制链接

扫一扫