JavaScript一些优雅小技巧不得不知

一般这些小技巧都是经常用的，就算你不经常用也要知道，为什么呢，还不是你要看别人的代码呢，总不能看一行百度一下，关键时刻百度可是没啥用的。

1.数字字符串快速转换数字

 

var a = "3";
console.log(a * 1); // 3
console.log(+a);   // 3 这个方法最长用
console.log(a.valueOf()); // 3

有的时候后台来的字符串，你在前端函数swich已经写好了，都是数字。。。尴尬了。。这个时候只要这样就解决了

switch (+data.value){
}

2.Boolean函数判断其是true还是false

Boolean(x) // 就这么用，会返回true或者false

实现某功能：挑出数组中的所有真值

// 下边功能实现是跳出数组里所有true值
function compact(arr) {
	return arr.filter(Boolean)
}
var num = [0, 1, false, 2, "", "a", "n"];
console.log(compact(num))
// Boolean 是一个函数 Boolean(1)会返回true,Boolean(“”)会返回false
// 在filter里会自己传参.
// 上方filter函数是简写的，不简写是这个样子的
function compact(arr) {
	return arr.filter(function(item){
		return Boolean(item)
	})
}

3.短路运算符的妙用

看一下下边这段代码，会有一种豁然开朗的感觉

typeof config.btn === 'string' && (config.btn = [config.btn]);

前边是一个检测类型，没有if也不判断。后边就是个执行语句；

关键点就在于这个&&

&&为取假运算，从左到右依次判断，如果遇到一个假值，就返回假值，以后不再执行，否则返回最后一个真值
||为取真运算，从左到右依次判断，如果遇到一个真值，就返回真值，以后不再执行，否则返回最后一个假值

再回到代码上，就是当前边的检测类型函数为真时，就会继续执行。也就是config.btn如果是个字符串就执行后边这个，把config.btn变成数组，不过不是字符串的话后边的就不执行了。代码的意思就很明显了，不管你传来了字符串还是数组最后都变数组，我后边好做处理，就不用if else去判断了，可以说非常高效了。

另一个应用就是默认参数，和防止参数不传；应用某变量又担心他没被赋值。

譬如：

function sendClass (val){
	var data=val || "默认";
// 如果val有值就不用默认。没有传就用默认
}
// 防止undefined
var data=people || [];

4. 利用 | 0 取整 和& 1判断奇数偶数

// 利用 | 0 取整
var dd = -3.52;
console.log(dd | 0)
// 判断奇数偶数
var numA = 8;
console.log(!!(numA & 1))

5.强制给函数传参数，否则抛出错误

// 强制参数 ;否则就抛出错误
var man = () => {
	throw new Error ('少参数了傻屌!');
}
var too = (bar = man()) => {
	// 这里如果不传入参数，就会执行man函数报出错误
	
}
too("aaaa") //有参数不报错
too（）//报错
// ES6里的可以在函数参数赋值默认参数，这次是赋值函数执行，
// 也可以看出这个函数的执行过程，先看看有没有参数，没有再去找默认设定了什么，就是利用这个原理

6.执行一次的函数，第二次执行不一样

遇到这样的需求，需要频繁执行某个函数，函数里有很多的swich或者if elseif，执行一次后，就会每次都走一条线而且多次走某个分支，这时候用这个方法

/*
	在某个场景下我们的函数中有判断语句，这个判断依据在整个项目运行期间一般不会变化，
	所以判断分支在整个项目运行期间只会运行某个特定分支，那么就可以考虑惰性载入函数
*/
// 利用执行一次函数后,就改写这个函数,下次来的时候就不用判断了,就直接执行,节约了资源
function todo (){
  if(a===b){
	   console.log(11111111)
  }else{
	  console.log(22222222)
  }
}
// 改写成这个样子 ,要的是这个编程思路,同样的思路也可以做执行一次的函数.也就是说执行一次就改写它
function todo (){
   if(a===b){
	   todo=function(){
		   console.log(11111111)
	   }
	   
   }else{
		todo=function(){
			 console.log(22222222)
	   }
} 

要的是这个编程思路,同样的思路也可以做执行一次的函数.也就是说执行一次就改写它

7.改写掉难看的swich

平常看到的是这样子的

switch (value){
	case "a":
		fn1()
	break;
	case "b":
		fn2()
	break;
	case "c":
		fn3()
	break;
	case "d":
		fn4()
	break;
}

大家都知道一个对象要取出来可以obj.sth或者obj[sth]，现在就利用后一种写法

var obj={
	a:fn1,
	b:fn2,
	c:fn3,
	d:fn4
}
obj[value]();

如果是取值那就直接obj[value]就更简单了，熟练了非常好用

今天就到这里，有不对的地方希望有人帮忙指正