20种常见的JavaScript速记技巧
作者| Amitav Mishra
翻译|微风依旧
规划|田
这篇文章发表在jscurious.com
任何编程语言的速记技巧都可以帮助你写出更简洁的代码,让你用更少的代码达到你的目标。让我们一个一个来看看JavaScript的速记技巧。
1.声明变量
2.给多个变量赋值
我们可以使用数组解构为一行中的多个变量赋值。
3.三元算子
我们可以在这里用三进制(条件)运算符保存5行代码。
4.分配默认值
如果期望值不正确,我们可以使用或(||)短路操作为变量指定默认值。
5.使用()进行短路操作
如果只在变量为真的情况下调用函数,可以短路写。
当您想要在“反应”中有条件地渲染组件时,此短路很有用。例如:
6.交换两个变量
为了交换两个变量,我们通常使用第三个变量。我们可以用数组解构赋值来交换两个变量。
7.箭头功能
参考:JavaScript Arrow函数
https://jscurious.com/javascript-arrow-function/
8.模板字符串
我们通常使用运算符来连接字符串变量。使用ES6的模板字符串,我们可以用一种更简单的方式实现这一点。
9.多行字符串
对于多行字符串,我们通常使用运算符和一个新的换行符(\n)。我们可以用更简单的方法使用(`)。
10.多条件检查
对于多值匹配,我们可以将所有值放在一个数组中,然后使用或方法。
11.对象属性副本
如果变量名与对象的属性名相同,那么我们只需要在object语句中声明变量名,而不需要同时声明键和值。JavaScript自动将键作为变量名,将值作为变量值。
12.将字符串转换成数字
有一些内置方法,如和,可用于将字符串转换为数字。我们也可以通过简单地在字符串前提供一元运算符()来实现这一点。
13.重复一个字符串几次
要将一个字符串重复n次,可以使用循环。但是通过这个方法,我们可以在一行代码中完成它。
提示:想发100次“对不起”来道歉吗?用repeat()方法试试。如果您想一次在新行上重复该字符串,可以在该字符串后添加一个\n。
14.指数幂
我们可以用这个方法得到一个数的幂。有一个较短的语法来实现,就是双星(* *)。
15.双非位运算符(~ ~)
双位运算符是方法的缩写。
来自 Caleb 的评论的改进:双非位运算符仅对32位整数有效,例如(2**31)-1=2147483647。因此,对于任何大于2147483647的数字,双非位运算符(~ ~)都会给出错误的结果,在这种情况下,建议使用Math.floor()方法。
16.找出数组中的最大值和最小值
我们可以使用for循环遍历数组中的每个值,然后找到最大值或最小值。我们还可以使用Array.reduce()方法来查找数组中的最大值和最小值。
但是有了扩展符号,我们可以一行实现。
17.For循环
为了遍历一个数组,我们通常使用传统的循环。我们可以用它来遍历数组。为了得到每个值的索引,我们可以使用一个循环。
我们还可以使用循环来遍历对象属性。
参考:JavaScript中遍历对象和数组的不同方法
https://js好奇.com/different-way-to-iterate-through-objects-and-array-in-JavaScript/
18.合并数组
19.深度复制多级对象
为了深度复制多级对象,我们需要遍历每个属性,检查当前属性是否包含对象。如果当前属性包含一个对象,则以当前属性值作为参数递归调用相同的方法(例如,嵌套对象)。
如果我们的对象不包含函数、未定义的、NaN或日期值,我们可以使用和。
如果有单级对象,比如没有嵌套对象,那么我们也可以使用extender实现深度复制。
来自评论的改进:如果你的对象包含函数的值,undefined或NaN,JSON.parse(JSON.stringify(obj))将无效。因为当你是JSON.stringify对象时,包含function、undefined或NaN值的属性将从对象中移除。因此,当您的对象只包含字符串和数值时,您可以使用。
参考:JSON.parse()和JSON.stringify()
https://js好奇.com/difference-by-JSON-parse-and-JSON-stringify/
20.获取字符串中的字符
作者介绍
Amitav Mishra是一个前端Web开发人员,喜欢写JavaScript、Angular、React、HTML、CSS等相关的博客。你可以在jscurious.com看到这些博客。
