当前位置: 首页 > 科技观察

在大多数教程中你都找不到的11个JavaScript技巧

时间:2023-03-16 22:24:46 科技观察

1..过滤唯一值ES6中引入了Set对象类型,与展开操作一起...,我们可以使用它来创建一个新数组,该数组只有唯一值。在ES6之前,隔离唯一值会涉及比这多得多的代码。这个技巧适用于包含原始类型的数组:undefined、null、boolean、string和number。(如果你有一个包含对象、函数或其他数组的数组,你需要不同的方法!)2.AND-OR三元运算符是一种快速编写简单(有时不那么简单)条件语句的方法,如如下:但有时使用三元运算符可能会很复杂。相反,我们可以使用“and”&&和“or”||以更简洁的方式编写表达式。逻辑运算符。这通常被称为“做空”或“做空操作”。它是如何工作的假设我们只想返回两个或多个选项中的一个。使用&&将返回第一个条件为假的值。如果每个操作数的计算结果为真,则返回最后计算的表达式。使用||将返回第一个条件为真的值。如果每个操作数的计算结果为假,则返回最后计算的表达式。例1假设我们要返回一个变量的长度,但不知道变量的类型。我们可以使用if/else语句来检查foo是否是可接受的类型,但这会变得非常冗长。或者运行可以帮助我们简化事情:return(foo||[]).length如果变量foo为真,它将被返回。否则,返回一个长度为0的空数组。示例2您在访问嵌套对象属性时遇到过问题吗?您可能不知道对象或其子属性之一是否存在,这可能会导致令人沮丧的错误。假设我们想访问this.state中一个名为data的属性,但是在我们的程序成功返回一个get请求之前,data是未定义的。根据我们使用它的位置,调用this.state.data可能会阻止我们的应用程序运行。为了解决这个问题,我们可以进一步判断:if(this.state.data){returnthis.state.data;}else{return'FetchingData';}但是这样看起来很重复。“或”运算符提供了一种更简洁的解决方案:return(this.state.data||'FetchingData');一个新特性:OptionalChaining以前在Object属性链的调用中,很容易因为某个属性不存在导致后面出现Cannotreadpropertyxxxofundefined错误。那么可选链就是加?。这样的操作符,它会先判断之前的值,如果是null或者undefined,就会结束调用,返回undefined。例如,我们可以将上面的例子重构为this.state.data?.()。或者,如果我们主要关心状态是否已定义,我们可以返回this.state?.data。该提案目前处于第1阶段,作为一项实验功能。你可以在这里阅读它,你现在可以通过将@babel/plugin-proposal-optional-chaining添加到你的.babelrc文件来使用你的JavaScript和Babel。3.转换为布尔值除了常规的布尔值true和false之外,JavaScript将所有其他值都视为'truthy'或'falsy'。除非另有定义,否则JavaScript中的所有值都是'truthy',除了0、""、null、undefined、NaN,当然还有false,它们都是'falsy'我们可以通过使用取反运算符Togglebetweentrue轻松做到这一点和假的。它还将类型转换为“布尔值”。4.转换为字符串要快速将数字转换为字符串,我们可以使用连接运算符+后跟一组空引号""。5.转换为数字使用加法运算符+可以快速达到相反的效果。这也可以用于将布尔值转换为数字如下连接运算符,而不是加法运算符。当发生这种情况时(您希望返回一个整数,而不是一个浮点数),您可以使用两个波浪号:~~。连续使用两个波有效地否定了操作,因为—(—n—1)—1=n+1—1=n。也就是说~—16等于15。constint=~~"15"console.log(int);//Result:15console.log(typeofint);Result:"number"虽然想不到很多用例,按位NOT运算符也可用于布尔值上面:~true=-2和~false=-1。6.更好的性能运算从ES7开始,你可以使用指数运算符**作为幂的简写,这比写Math.pow(2,3)更快。这是非常简单的东西,但它在列表中,因为没有多少教程更新了这个运算符。console.log(2**3);//Result:8这不应与通常用于表示指数的^符号混淆,但在JavaScript中它是按位异或运算符。在ES7之前,只有以2为底的幂的简写,使用按位左移运算符<