这次主要分享日常教程中不常提到的11个JavaScript技巧。它们经常出现在我们的日常工作中，但却很容易被我们忽视。1.过滤唯一值Set类型是ES6新加入的。它类似于数组，但其成员的值都是唯一的，没有重复值。结合展开运算符（...）我们可以创建一个新数组来实现过滤原数组中重复值的功能。constuniqueArray=[1,2,3,3,5,5,1];constuniqueArray=[...newSet(数组)];console.log(uniqueArray);//[1,2,3,5]在ES6之前，如果我们要实现这个功能，需要多很多处理代码。该技术的适用范围是数组中值的类型有：undefined、null、boolean、string、number。涉及对象、函数、数组时不适用。2、短路求值（Short-CircuitEvaluation）三元运算符是一种非常方便快捷的写一些简单逻辑语句的方法，x>100?'Above100':'Below100';x>100?(x>200?'Above200':'Between100-200'):'Below100';但是有时候当逻辑复杂的时候，三元运算符的可读性会很难写出来。此时，我们可以使用逻辑与（&&）和逻辑或（||）运算符来改写我们的表达式。AND和OR运算符总是首先计算它们的操作数，只有当逻辑表达式的结果不能单独从左操作数的值确定时才计算它们的右操作数。这称为“短路评估”并与(&&)运算符一起返回第一个false/'falsy'值。当所有操作数都为真时，返回最后一个表达式的结果。letone=1,two=2,three=3;console.log(one&&two&&three);//Result:3console.log(0&&null);//Result:0或(||)运算符会返回第一个true/的值'真实'。当所有操作数都为假时，返回最后一个表达式的结果。letone=1,two=2,three=3;console.log(one||two||three);//Result:1console.log(0||null);//Result:null场景例子当我们从服务器在向端请求数据的过程中，我们在另一个位置使用这个数据，但是获取数据的状态是未知的，比如我们访问this.state的data属性。按照常规的方法，我们会先判断this.state.data的合法性，然后根据合法性来区分它们。if(this.state.data){returnthis.state.data;}else{return'FetchingData';}但是这个逻辑处理我们可以简写为return(this.state.data||'FetchingData');发现这种方法更加简洁方便。3.转换布尔类型普通的布尔类型值只有true和false，但是在JavaScript中我们可以将其他值视为'truthy'或'falsy'。除了0,"",null,undefined,NaN和false，我们可以认为其他的都是'truthy'。我们可以使用否定运算符！将一系列变量转换为“布尔”类型。constisTrue=!0;constisFalse=!1;constalsoFalse=!!0;console.log(isTrue);//Result:trueconsole.log(typeoftrue);//Result:"boolean"4.我们可以通过+转换String类型连接运算符将数字类型的变量转换为字符串类型。constval=1+"";console.log(val);//Result:"1"console.log(typeofval);//Result:"string"5.将Number类型转换为上面的类型，我们可以使用另外字符+将字符串类型变量转换回数字类型letint="15";int=+int;console.log(int);//Result:15console.log(typeofint);Result:"number"ina某些在这些上下文中，+将被解释为连接运算符，而不是加法运算符。当发生这种情况时（您希望返回一个整数，而不是一个浮点数），您可以使用两个波浪号：~~。（需要注意英文格式）波浪号~，被称为“按位非运算符”，相当于-n-1。所以~15=-16。使用两个~~可以有效的否定运算。这是因为-(-n-1)-1=n+1-1=n。也就是说~-16=15constint=~~"15"console.log(int);//Result:15console.log(typeofint);Result:"number"6.快速取幂从ES7开始，我们可以使用取幂运算符**是求幂的简写，比之前的Math.pow(2,3)更快。这是一个非常简单实用的点，但大多数教程并没有具体介绍。console.log(2**3);//Result:8这不要和^符号混淆，^符号通常用来表示指数，但在JavaScript中是按位异或运算符。在ES7之前，power的缩写主要依赖于位左移运算符<<，几种写法的区别//以下几种写法是等价的Math.pow(2,n);2<<(n-1);2**n;其中，需要注意的是，2<<3=16等价于2**4=167。为了快速将Float转换为Integer，我们通常可以使用Math.floor()、Math.ceil()和Math.round()将浮点型转换为整型。但是还有一种更快的方法可以使用|将浮点数截断为整数。（按位或运算符）。console.log(23.9|0);//Result:23console.log(-23.9|0);//Result:-23的行为取决于是处理正数还是负数，所以***只在某些情况下使用此快捷方式。如果n为正，则n|0有效向下舍入。如果n为负，它实际上向上舍入。更准确地说，这种操作的结果是直接删除小数点后的内容，将浮点数截断为整数，这与上面提到的其他方法不同。您也可以使用~~来实现相同的舍入效果，如上所述，实际上任何按位运算符都会将浮点数强制转换为整数。这些特殊操作之所以有效，是因为一旦强制转换为整数，该值就保持不变。使用场景按位或运算符可用于从整数末尾删除任意数量的数字。这意味着我们不必使用这样的代码在类型之间进行转换。letstr="1553";Number(str.substring(0,str.length-1));相反，我们可以使用以下方法来实现我们的函数console.log(1553/10|0)//Result:155console。log(1553/100|0)//Result:15console.log(1553/1000|0)//Result:18.类内自动绑定我们可以在类绑定作用域中使用ES6添加的箭头函数实现不可见。根据前面的处理，我们需要显式绑定我们写的方法，类似this.myMethod=this.myMethod.bind(this)。当我们类中的方法很多的时候，就会增加很多绑定代码的编写。现在我们可以通过箭头函数来简化这个过程。importReact,{Component}fromReact;exportdefaultclassAppextendsComponent{constructor(props){super(props);this.state={};}myMethod=()=>{//隐式绑定}render(){return(<>{this.我的方法（）}）}};9.截取数组如果你想从数组的末尾删除值，有比使用splice()更快的替代方法。例如，如果知道原数组的长度，就可以通过重新定义它的length属性来实现拦截。letarray=[0,1,2,3,4,5,6,7,8,9];array.length=4;console.log(array);//结果:[0,1,2,3]这是一个特别巧妙的解决方案。但是，slice()方法的运行时间更快。如果速度是您的主要目标，请考虑使用以下方法。letarray=[0,1,2,3,4,5,6,7,8,9];arrayarray=array.slice(0,4);console.log(array);//结果:[0,1,2,3]10.获取数组中的最新元素。数组方法slice()可以接受负整数。如果提供，它将从数组末尾而不是开头截取值。letarray=[0,1,2,3,4,5,6,7,8,9];console.log(array.slice(-1));//结果:[9]console.log(array.slice(-2));//结果:[8,9]console.log(array.slice(-3));//Result:[7,8,9]11.我们可能在处理JSON代码一些JSON相关的处理经常用到JSON.stringify，但是你知道它可以帮助缩进JSON吗？stringify()方法接受两个可选参数：替换函数和空格值，替换函数可以用于过滤显示的JSON。space值接受一个表示所需空格数的整数或一个字符串（例如'\t'以插入制表符），这可以使读取获取的JSON数据变得更加容易。console.log(JSON.stringify({alpha:'A',beta:'B'},null,'\t'));//结果://'{//"alpha":A,//"beta":B//}'总的来说，我希望当您看到这些提示时，您会发现它们和我第一次看到它们时一样有用。如果你发现了什么小技巧，也希望在留言中写下来，我们一起分享。
