12 个非常有用的 JavaScript 技巧

在这篇文章中将给大家分享12个有关于javascript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。

<a></a>

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回<code>true</code>值。为了做这样的验证，我们可以使用<code>!!</code>操作符来实现是非常的方便与简单。对于变量可以使用<code>!!variable</code>做检测，只要变量的值为:<code>0</code>、<code>null</code>、<code>" "</code>、<code>undefined</code>或者<code>nan</code>都将返回的是<code>false</code>，反之返回的是<code>true</code>。比如下面的示例：

<code>function account(cash) {</code>

<code>this.cash = cash;</code>

<code>this.hasmoney = !!cash;</code>

<code>}</code>

<code>var account = new account(100.50);</code>

<code>console.log(account.cash); // 100.50</code>

<code>console.log(account.hasmoney); // true</code>

<code></code>

<code>var emptyaccount = new account(0);</code>

<code>console.log(emptyaccount.cash); // 0</code>

<code>console.log(emptyaccount.hasmoney); // false</code>

在这个示例中，只要<code>account.cash</code>的值大于<code>0</code>，那么<code>account.hasmoney</code>返回的值就是<code>true</code>。

这个技巧非常有用，其非常简单，可以交字符串数据转换成数字，不过其只适合用于字符串数据，否则将返回<code>nan</code>，比如下面的示例：

<code>function tonumber(strnumber) {</code>

<code>return +strnumber;</code>

<code>console.log(tonumber("1234")); // 1234</code>

<code>console.log(tonumber("acb")); // nan</code>

这个也适用于<code>date</code>，在本例中，它将返回的是时间戳数字：

<code>console.log(+new date()) // 1461288164385</code>

如果你有一段这样的代码：

<code>if (conected) {</code>

<code>login();</code>

你也可以将变量简写，并且使用<code>&amp;&amp;</code>和函数连接在一起，比如上面的示例，可以简写成这样：

<code>conected &amp;&amp; login();</code>

如果一些属性或函数存在于一个对象中，你也可以这样做检测，如下面的代码所示：

<code>user &amp;&amp; user.login();</code>

在es6中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性，可以使用<code>||</code>操作符，并且将将默认值当做第二个参数传入。如果第一个参数返回的值为<code>false</code>，那么第二个值将会认为是一个默认值。如下面这个示例：

<code>function user(name, age) {</code>

<code>this.name = name || "oliver queen";</code>

<code>this.age = age || 27;</code>

<code>var user1 = new user();</code>

<code>console.log(user1.name); // oliver queen</code>

<code>console.log(user1.age); // 27</code>

<code>var user2 = new user("barry allen", 25);</code>

<code>console.log(user2.name); // barry allen</code>

<code>console.log(user2.age); // 25</code>

这个技巧很简单，这个在处理一个很大的数组循环时，对性能影响将是非常大的。基本上，大家都会写一个这样的同步迭代的数组：

<code>for(var i = 0; i &lt; array.length; i++) {</code>

<code>console.log(array[i]);</code>

如果是一个小型数组，这样做很好，如果你要处理的是一个大的数组，这段代码在每次迭代都将会重新计算数组的大小，这将会导致一些延误。为了避免这种现象出现，可以将<code>array.length</code>做一个缓存：

<code>var length = array.length;</code>

<code>for(var i = 0; i &lt; length; i++) {</code>

你也可以写在这样：

<code>for(var i = 0, length = array.length; i &lt; length; i++) {</code>

当你需要检测一些属性是否存在，避免运行未定义的函数或属性时，这个小技巧就显得很有用。如果你打算定些一些跨兼容的浏览器代码，你也可能会用到这个小技巧。例如，你想使用<code>document.queryselector()</code>来选择一个<code>id</code>，并且让它能兼容ie6浏览器，但是在ie6浏览器中这个函数是不存在的，那么使用这个操作符来检测这个函数是否存在就显得非常的有用，如下面的示例：

<code>if ('queryselector' in document) {</code>

<code>document.queryselector("#id");</code>

<code>} else {</code>

<code>document.getelementbyid("id");</code>

在这个示例中，如果<code>document</code>不存在<code>queryselector</code>函数，那么就会调用<code>docuemnt.getelementbyid("id")</code>。

<code>array.prototype.slice(begin,end)</code>用来获取<code>begin</code>和<code>end</code>之间的数组元素。如果你不设置<code>end</code>参数，将会将数组的默认长度值当作<code>end</code>值。但有些同学可能不知道这个函数还可以接受负值作为参数。如果你设置一个负值作为<code>begin</code>的值，那么你可以获取数组的最后一个元素。如：

<code>var array = [1,2,3,4,5,6];</code>

<code>console.log(array.slice(-1)); // [6]</code>

<code>console.log(array.slice(-2)); // [5,6]</code>

<code>console.log(array.slice(-3)); // [4,5,6]</code>

这个小技巧主要用来锁定数组的大小，如果用于删除数组中的一些元素来说，是非常有用的。例如，你的数组有<code>10</code>个元素，但你只想只要前五个元素，那么你可以通过<code>array.length=5</code>来截断数组。如下面这个示例：

<code>console.log(array.length); // 6</code>

<code>array.length = 3;</code>

<code>console.log(array.length); // 3</code>

<code>console.log(array); // [1,2,3]</code>

<code>string.replace()</code>函数允许你使用字符串或正则表达式来替换字符串，本身这个函数只替换第一次出现的字符串，不过你可以使用正则表达多中的<code>/g</code>来模拟<code>replaceall()</code>函数功能：

<code>var string = "john john";</code>

<code>console.log(string.replace(/hn/, "ana")); // "joana john"</code>

<code>console.log(string.replace(/hn/g, "ana")); // "joana joana"</code>

如果你要合并两个数组，一般情况之下你都会使用<code>array.concat()</code>函数：

<code>var array1 = [1,2,3];</code>

<code>var array2 = [4,5,6];</code>

<code>console.log(array1.concat(array2)); // [1,2,3,4,5,6];</code>

然后这个函数并不适合用来合并两个大型的数组，因为其将消耗大量的内存来存储新创建的数组。在这种情况之个，可以使用<code>array.pus().apply(arr1,arr2)</code>来替代创建一个新数组。这种方法不是用来创建一个新的数组，其只是将第一个第二个数组合并在一起，同时减少内存的使用：

<code>console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];</code>

如果你运行<code>document.queryselectorall(“p”)</code>函数时，它可能返回dom元素的数组，也就是<code>nodelist</code>对象。但这个对象不具有数组的函数功能，比如<code>sort()</code>、<code>reduce()</code>、<code>map()</code>、<code>filter()</code>等。为了让这些原生的数组函数功能也能用于其上面，需要将节点列表转换成数组。可以使用<code>[].slice.call(elements)</code>来实现：

<code>var elements = document.queryselectorall("p"); // nodelist</code>

<code>var arrayelements = [].slice.call(elements); // now the nodelist is an array</code>

<code>var arrayelements = array.from(elements); // this is another way of converting nodelist to array</code>

对于数组元素的洗牌，不需要使用任何外部的库，比如lodash，只要这样做：

<code>var list = [1,2,3];</code>

<code>console.log(list.sort(function() { math.random() - 0.5 })); // [2,1,3]</code>

现在你学会了些有用的javascript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦，或者说这篇文章对你有所帮助。如果你有一些优秀的javascript小技巧，欢迎在评论中与我们一起分享。

本文来自云栖社区合作伙伴“linux中国”，原文发布时间为：2013-04-02.