前端开发，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", "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;//当前支付页地址的keyvar 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://页面keysaveDatalnfor'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: 16color: ['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) {///如果大于225var 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'){//APPthat.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 的版本号
}

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

开发过程中的算法小技巧：
在开发过程中,总会在一些算法思维上卡壳,现在决定记录下来,希望熟能生巧,以后经过努力,克服这个不足. 1.多对象切换,count>=3,用数组遍历的方式: (下面是个自己思维卡壳第2次的例子,所 ...
【前端开发 | 实例】网页中实现 js 繁体简体切换
在开发网站等前端页面时,往往需要用到繁体字和简体字的一键切换,这个功能实现起来很简单. 首先我们封装好JS代码 // 网页简繁体转换 // 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正 ...
JS开发中常用的小技巧
1.获取指定范围内的随机数 1 2 3 function getRadomNum(min,max){ return Math.floor(Math.random() * (max - min ...
Pycharm常用的小技巧汇总，Python新手上路必备，快上车！
Pycharm作为Python开发最常用的IDE之一,不仅兼容性好,而且功能也相当丰富,比如调试.语法高亮.智能提示等等功能,它还支持web开发框架比如Django等,当你熟悉了它之后,开发效率是相当 ...
AI开发过程中常用开发命令及软件安装
来源:投稿作者:frank 编辑:学姐 <<打造舒适的AI环境>>系列总览: 分为硬件篇x1 跟软件篇x3 硬件篇1:主机八大件的选购软件篇1:AI开发过程中常用开发命令 ...
项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
PC设计开发过程中常用大小工具汇总
PC设计开发过程中常用大小工具汇总浏览器:Firefox Developer Edition / Google Chrome / 通讯:TIM(office QQ)/ 微信电脑版 / Foxmail ...
推荐几个web中常用js图表插件
推荐几个web中常用js图表插件作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart ...
javascript 获取滚动条高度+常用js页面宽度与高度
javascript 获取滚动条高度+常用js页面宽度与高度/ ********************* 取窗口滚动条高度****************** / function getScrol ...

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

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

最新文章

热门文章