11个被忽视的JavaScript技巧

本文分享了11个在日常教程中不常被提及的JavaScript技巧。它们经常出现在我们的日常工作中，但却很容易被忽视。过滤唯一值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。包含对象、函数、数组时不适用。短路求值（Short-CircuitEvaluation）三元运算符是一种非常方便快捷的写一些简单逻辑语句的方法x>100?'Above100':'Below100';x>100?(x>200?'Above200':'Between100-200'):'Below100';但是有时候当逻辑复杂的时候，三元运算符的可读性会很难写出来。此时，我们可以使用逻辑与（&&）和逻辑或（||）运算符来改写我们的表达式。AND和OR运算符总是首先计算它们的操作数，只有当逻辑表达式的结果不能单独从左操作数的值确定时才计算它们的右操作数。这称为“短路评估”(1)工作原理AND(&&)运算符将返回第一个false/'falsy'值。当所有操作数都为真时，返回最后一个表达式的结果。letone=1,two=2,three=3;console.log(one&&two&&three);//Result:3console.log(0&&null);//Result:0or(||)operatorwillreturnthefirsttrue/'truthy'价值。当所有操作数都为假时，返回最后一个表达式的结果。letone=1,two=2,three=3;console.log(one||two||three);//Result:1console.log(0||null);//Result:null(2)当场景example在向服务器请求数据的过程中，我们在另一个位置使用了这个数据，但是获取数据的状态是未知的，比如我们访问了this.state的data属性。按照常规的方法，我们会先判断this.state.data的合法性，然后根据合法性来区分它们。if(this.state.data){returnthis.state.data;}else{return'FetchingData';}但是我们可以把这个逻辑处理简写成上面的方式。返回（this.state.data||'FetchingData'）;与这种方法相比，发现这种方法更加简洁方便。转换Boolean普通的布尔值只有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"转String类型，我们可以用+连接操作将数字类型的变量转换为字符串类型。constval=1+"";console.log(val);//Result:"1"console.log(typeofval);//Result:"string"将Number类型转换为上面的，我们可以使用加法运算符+将字符串类型的变量转换回数字类型。letint="15";int=+int;console.log(int);//Result:15console.log(typeofint);Result:"number"在某些上下文中，+将被解释为连接运算符，而不是一个加法运算符。当发生这种情况时（您希望返回一个整数，而不是一个浮点数），您可以使用两个波浪号：~~。（需要注意英文格式）波浪号~，被称为“按位非运算符”，相当于-n-1。所以~15=-16。使用两个~~可以有效的否定运算。这是因为-(-n-1)-1=n+1-1=n。即~-16=15constint=~~"15"console.log(int);//Result:15console.log(typeofint);Result:"number"快速求幂从ES7开始，我们可以使用求幂运算符**作为求幂的简写，它比之前的Math.pow(2,3)更快。这是一个非常简单实用的点，但大多数教程并没有具体介绍。console.log(2**3);//Result:8这不要和^符号混淆，^符号通常用来表示指数，但在JavaScript中是按位异或运算符。在ES7之前，求幂的简写主要靠位左移运算符<<，几种写法的区别。//下面的写法等同于Math.pow(2,n);2<<(n-1);2**n;fastFloattoInteger我们通常可以使用Math.floor()、Math.ceil()和Math.round()将float类型转换为integer类型。但是还有一种更快的方法可以使用|将浮点数截断为整数。（按位或运算符）。console.log(23.9|0);//结果:23console.log(-23.9|0);//结果:-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:1类中的自动绑定我们可以通过ES6添加的箭头函数实现类中的隐形绑定判断范围。根据前面的处理，我们需要显式绑定我们写的方法，类似this.myMethod=this.myMethod.bind(this)。当我们类中的方法很多的时候，就会增加很多绑定代码的编写。现在我们可以通过箭头函数来简化这个过程。importReact,{Component}fromReact;exportdefaultclassAppextendsComponent{constructor(props){super(props);this.state={};}myMethod=()=>{//隐式绑定}render(){return(<>

/>)}};截断数组如果要从数组末尾删除值，有比使用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]获取数组中的最后一个元素。数组方法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]格式化的JSON代码我们可能正在处理一些JSONJSON.stringify在相关处理中经常用到，但是你有没有发现它可以帮助缩进JSON？stringify()方法接受两个可选参数：替换函数和空格值，替换函数可以用来过滤显示的JSON。space值接受一个表示所需空格数的整数或一个字符串（例如'\t'以插入制表符），这可以使读取获取的JSON数据变得更加容易。console.log(JSON.stringify({alpha:'A',beta:'B'},null,'\t'));//结果://'{//"alpha":A,//"测试版“：B//”