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

1.JS匹配并清除字符串里全部空格

var a = '4444 3333 2222 1111';
var b = a.replace(/\s+/g,"");
console.log(b); 
//结果
'4444333322221111'

2.JS删除对象中的某个值

var obj = {
	name: 'zhangsan',
	age:25
}
delete obj.age;

3.JS控制input输入银行卡卡号，每四位数空一格，如：4444 3333 2222 1111

//以下内容通过jQuery.js实现，请自行引入
<input type="tel" id="bankCard" placeholder="">
<script>
	$("#bankCode").on("input",function(){
		var val = $(this).val().replace(/\s/g,"").replace(/(\d{4})/g,"$1");
		$(this).val(val);
	})
</script>
//到这里可以实现想要的效果，但是，如果从中间添加、中间删除光标会乱跳，可以通过一下方法解决该问题。
<input type="tel" id="bankCard" placeholder="">
<script>
	$("#bankCode").on("keyup",function(){
		var caret = this.selectionStart;//获取当前光标位置
		var value = this.value;//当前输入的的值
		var lt_sp = (value.slice(0,caret).match(/\s/g)||[]).length;//从左边沿到坐标之间的空格数
		var nospace = value.replace(/\s/g,"");//清除输入内容的空格
		var curNewVal = this.value = nospace.replace(/\D+/g,"").replace(/(\d{4})/g,"$1").trim();//重新插入空格  
		//trim()删除头尾空白符的字符串
		var curLt_sp = (curNewVal .slice(0,caret).match(/\s/g)||[]).length;//从左边沿到原坐标之间的空格数
		var this.selectionEnd = this.selectionStart = caret + curLt_sp - lt_sp; 
	})
</script>

4.JS正则验证月份

/^(0[1-9]|1[012])$/
备注： 正则基本语法/^  $/，第一位取0时，第二位取1-9，第一位取1时，第二位取0-2

5.JS限制表单可输入的最大字数，例如最大只能输入100位

$('body').on('input','#address',function(){
	var value = $(this).text().length;//获取输入的内容字数
	if(value > 100) {
		var char = $(this).text();//全部输入的内容
		char = char.subsrt(0,100);//截取字符串前100位数
		$(this).text(char);//文本框赋值
		$(this).blur();//输入到了最大值，使文本框失去焦点，具体项目中根据交互而定
	}
})

6.JS禁止浏览器的回退事件

<script language="javascript">
    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
    });
</script>

7.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;
   };
})();

//使用：检查是否支持transform
if(support_css3('transform')){

}else{

}

//方式二：
function isPropertySupported(property)
{
	return property in document.body.style;
}
//使用： 
//注意：判断背景色属性是，要用backgroundColor替换background-color
if(isPropertySupported('opacity')){

}else{

}

8.localStorage 和 sessionStorage 属性区别

localStorage ：

1.使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上。
2.localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
3.localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
4.localStorage 属性是只读的。

// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

sessionStorage ：

1.使用 sessionStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上。
2.localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
3.sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

// 存储
sessionStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

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

//对象转JSON字符串（兼容性： IE8兼容模式、ie7、ie6请不要使用此方法）
JSON.stringif(JS对象)； 

//JSON字符串转JS对象 （兼容性： IE8兼容模式、ie7、ie6请不要使用此方法）
JSON.parse(JSON字符串)；

//如果项目中引入有jQuery，此时JSON转JS对象
$.parseJSON(JSON字符串)；

10.JS中 serTimeout 和 setInterval 区别

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

serTimeout ()；//在延时后，只执行一次

setInterval ()；//在指定延时时间间隔会重复执行