细数JavaScript中那些神乎其神的技巧

darkjune 7年前
   <p>闲来无事,整理一下JavaScript中那些神乎其神的技巧,假装大牛的样子</p>    <h2>1. 字符串转换为数字</h2>    <pre>  <code class="language-javascript">var a = "123";      console.log(+a);         // 123      console.log(typeof +a);  // number        // 同样可用于日期转换为数值:      var b = +new Date();     // 1468545682168</code></pre>    <h2>2. 数值向下取整</h2>    <pre>  <code class="language-javascript">var a = ~~3.14;   // 3      var b = 3.14>>0;  // 3      var c = 3.14|0;   // 3</code></pre>    <h2>3. 字符串转换为数值并取整<!-- more --></h2>    <pre>  <code class="language-javascript">var a = "3.14"|0;  // 3      var b = "3.14"^0;  // 3</code></pre>    <h2>4. 函数设置默认值</h2>    <pre>  <code class="language-javascript">function func(arg){          var arg = arg || "default";           // arg 为 undefined, null, "", 0, false, NaN 时最后都得到"default"      }</code></pre>    <h2>5. 变量值交换</h2>    <pre>  <code class="language-javascript">var a = 1,          b = 2;      a = [b, b = a][0];      console.log(a);  // 2      console.log(b);  // 1</code></pre>    <h2>6. 使用 for in 遍历对象取到属性名与属性</h2>    <pre>  <code class="language-javascript">var obj = {          a: 1,          b: 2      }      for(var i in obj) {          console.log("obj." + i + " = " + obj[i]);      }      // output: obj.a = 1      //         obj.b = 2</code></pre>    <h2>7. 截断数组</h2>    <pre>  <code class="language-javascript">var arr = [1, 2, 3, 4, 5, 6];      arr.length = 3;      console.log(arr);  // [1, 2, 3]</code></pre>    <h2>8. 提高遍历较大Enumerable数据的性能</h2>    <pre>  <code class="language-javascript">var arr = [1, 2, 3, 4, 5, 6, ...];      var len = arr.length;  // 缓存arr.length      for(var i = 0; i < len; i++) {          console.log(arr[i]);      }        // 或者(推荐使用)      for(var i = 0, a; a = arr[i++];) {          console.log(a);      }</code></pre>    <h2>9. 使用 && 替代单一条件判断</h2>    <pre>  <code class="language-javascript">// 你可能这样写过      if(!token) {          login();      }      // 其实这样也可以      !token && login();</code></pre>    <h2>10. 检测 对象/数组 中是否有指定 属性/元素</h2>    <pre>  <code class="language-javascript">var CURD = {          add: function() {},          delete: function() {},          edit: function() {}      }      console.log("add" in CURD);   // true      console.log("find" in CURD);  // false        var arr = [1, 2, 3];      console.log(1 in arr);  // true      console.log(6 in arr);  // false</code></pre>    <h2>11. 通过闭包调用setTimeout</h2>    <pre>  <code class="language-javascript">for(var i = 0; i < 10; i++) {          setTimeout(function(){              console.log(i);  // 10 10 10 ...          },500);      }        for(var i = 0; i < 10; i++) {          (function(i){              setTimeout(function(){                  console.log(i);  // 0 1 2 3 ...              },500)          })(i);      }</code></pre>    <p> </p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000008017702</p>    <p> </p>