分享12个非常实用的JavaScript小技巧

在本文中，我将分享关于JavaScript的12个技巧。这些提示可能会帮助你解决实际工作中的一些问题。

使用！运算符转换布尔值。

有时候我们需要检查一个变量是否存在，或者这个值是否有有效值，如果存在，我们就会返回一个真值。要做这个验证，我们可以用！操作员非常方便和简单。可以用于变量！只要变量的值为：0、null、“”、undefined或NaN，变量将返回false，否则将返回true。例如，以下示例：

函数帐户(现金){ this.cash=cashthis.hasMoney=！现金；} var账户=新账户(100.50)；console . log(account . cash)；//100.50 console . log(account . hasmoney)；//true var emptyAccount=新帐户(0)；console . log(empty account . cash)；//0 console . log(emptyaccount . hasmoney)；//false在本例中，只要account.cash的值大于0，account.hasMoney返回的值就是true。

使用将字符串转换为数字。

这个技巧非常有用，它非常简单，它可以把字符串数据转换成数字，但是它只适合字符串数据，否则它会返回NaN，比如下面这个例子：

函数to number(strNumber){ return strNumber；} console . log(to number(' 1234 ')；//1234 console . log(to number(' ACB '))；//NaN这也适用于Date。在这种情况下，它将返回一个时间戳编号：

复制代码如下： console . log(new date())//1461288164385和条件字符。

如果您有这样一段代码：

if(conected){ log in()；}您也可以缩写变量并将其与函数连接，例如上面的示例，可以缩写如下：

复制代码如下： connected log in()；

如果对象中存在某些属性或函数，也可以进行这种检测，如以下代码所示：

复制代码如下： user . log in()；

使用| |运算符。

ES6中有一个默认参数功能。要在较旧的浏览器中模拟此功能，您可以使用| |运算符并传入默认值作为第二个参数。如果第一个参数返回的值为false，则第二个值将被视为默认值。如下例所示：

函数用户(姓名、年龄){ this.name=name || '奥利弗奎恩'；this.age=age | | 27} var user1=新用户()；console . log(user 1 . name)；//奥利弗奎恩控制台. log(user 1 . age)；//27 var user2=新用户('巴里艾伦'，25)；console . log(user 2 . name)；//巴里艾伦控制台. log(user 2 . age)；//25缓存数组。循环中的长度。

这个技巧很简单，在处理大数组循环的时候，对性能的影响会很大。基本上，每个人都会编写一个同步迭代数组，如下所示：

for(var I=0；i array.lengthI){ console . log(array[I])；}如果是小阵，这个很好。如果您正在处理一个大数组，那么这段代码将在每次迭代中重新计算数组的大小，这将导致一些延迟。为了避免这种现象，可以缓存array.length:

变量长度=array.lengthfor(var I=0；一、长度；I){ console . log(array[I])；}你也可以这样写：

for(var i=0，length=array.length一、长度；I){ console . log(array[I])；}检测对象中的属性。

当您需要检测某些属性的存在并避免运行未定义的函数或属性时，这个技巧非常有用。如果你计划订购一些交叉兼容的浏览器代码，你也可以使用这个技巧。例如，如果您想使用document.querySelector()来选择一个id并使其与IE6浏览器兼容，但IE6浏览器中不存在此功能，那么使用此运算符来检测此功能是否存在是非常有用的，如下例所示：

if('文档中的query selector '){ document . query selector(' id ')；} else { document . getelementbyid(' id ')；}在本例中，如果文档中不存在querySelector函数，将调用document . getelementbyid(' id ')。

获取数组中的最后一个元素。

Array.prototype.slice (begin，end)用于获取begin和end之间的数组元素。如果不设置结束参数，数组的默认长度将被视为结束值。但是有些学生可能不知道这个函数也可以接受负值作为参数。如果将一个负值设置为begin的值，则可以获得数组的最后一个元素。例如：

var数组=[1，2，3，4，5，6]；console . log(array . slice(-1))；//[6]console . log(array . slice(-2))；//[5，6]console . log(array . slice(-3))；//[4，5，6]数组截断。

这个技巧主要是用来锁定数组的大小，如果用来删除数组中的一些元素的话非常有用。例如，您的数组有10个元素，但您只需要前五个元素，因此您可以通过array.length=5截断数组。如下例所示：

var数组=[1，2，3，4，5，6]；console . log(array . length)；//6 array . length=3；console . log(array . length)；//3 console.log(数组)；//[1，2，3]全部替换。

函数String.replace()允许您用字符串或正则表达式替换字符串。这个函数本身只替换第一次出现的字符串，但是您可以在正则表达式中使用/g来模拟函数replaceAll():

var string=' john johnconsole . log(string . replace(/HN/，' ana ')；//' joana John ' console . log(string . replace(/HN/g，' ana ')；//“joana joana”合并数组。

如果要合并两个数组，通常使用Array.concat()函数：

var array1=[1，2，3]；var array2=[4，5，6]；console . log(array 1 . concat(array 2))；//[1,2,3,4,5,6];那么这个函数就不适合合并两个大数组，因为它会消耗大量内存来存储新创建的数组。在这种情况下，Array.pus()。可以使用apply(arr1，arr2)来代替创建新数组。此方法不用于创建新数组，而仅用于组合第一个和第二个数字并减少内存使用：

var array1=[1，2，3]；var array2=[4，5，6]；console . log(array 1 . push . apply(array 1，array 2))；//[1,2,3,4,5,6];将节点列表转换为数组。

如果运行document.queryselectorall ("p ")函数，它可能会返回一个DOM元素数组，即NodeList对象。但是这个对象没有数组的功能，比如sort()，reduce()，map()，filter()等。为了在其上使用这些本机数组函数，有必要将节点列表转换为数组。您可以使用[].slice.call(元素)来实现：

var elements=document . queryselectorall(' p ')；//NodeList var arrayElements=[]. slice . call(elements)；//现在NodeList是一个数组var arrayElements=Array.from(元素)；//这是将nodelist转换为数组元素重排的另一种方式。

对于重排数组元素，您不需要使用任何外部库，如Lodash，只需执行以下操作：

var list=[1，2，3]；console . log(list . sort(function(){ math . random()-0.5 })；//[2，1，3]摘要。

现在，您已经学习了一些有用的JavaScript技巧。希望这些小技巧能帮你解决工作中的一些烦恼，或者这篇文章能帮到你。如果你有一些优秀的JavaScript技巧，请在评论中与我们分享。