JavaScript里最常用的十种代码简写技巧
<p style="text-align:center"><img src="https://simg.open-open.com/show/8a96cc11a15a3bb57a6d1628a9b1e73c.jpg"></p> <p>今天小编我给大家整理了一份10个程序员常用的代码简写技术,看懂一种是入门,全懂就是大神,你能知道几个呢?</p> <h2>1.三元操作符</h2> <p>当想写if…else语句时,使用三元操作符来代替。</p> <pre> <code class="language-javascript">const x = 20;let answer;if (x > 10) {</code></pre> <p>简写:</p> <pre> <code class="language-javascript">const answer = x > 10 ? 'is greater' : 'is lesser';</code></pre> <p>也可以嵌套if语句:</p> <pre> <code class="language-javascript">const big = x > 10 ? " greater 10" : x</code></pre> <h2>2.短路求值简写方式</h2> <p>当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句。</p> <p><img src="https://simg.open-open.com/show/9c0faf0fb6e7b2c15c56adcbcd6b4594.jpg"></p> <p>或者可以使用短路求值方法:</p> <pre> <code class="language-javascript">const variable2 = variable1 || 'new';</code></pre> <h2>3.声明变量简写方法</h2> <pre> <code class="language-javascript">let x;let y;let z = 3;</code></pre> <p>简写方法:</p> <pre> <code class="language-javascript">let x, y, z=3;</code></pre> <h2>4.if存在条件简写方法</h2> <pre> <code class="language-javascript">if (likeJavaScript === true)</code></pre> <p>简写:</p> <pre> <code class="language-javascript">if (likeJavaScript)</code></pre> <p>只有likeJavaScript是真值时,二者语句才相等</p> <p>如果判断值不是真值,则可以这样:</p> <pre> <code class="language-javascript">let a;if ( a !== true ) {// do something...}</code></pre> <p>简写:</p> <pre> <code class="language-javascript">let a;if ( !a ) {// do something...}</code></pre> <h2>5.JavaScript循环简写方法</h2> <pre> <code class="language-javascript">for (let i = 0; i < allImgs.length; i++)</code></pre> <p>简写:</p> <pre> <code class="language-javascript">for (let index in allImgs)</code></pre> <p>也可以使用Array.forEach:</p> <p><img src="https://simg.open-open.com/show/9e5ad5f7c66135b7ad430f3c2472080f.jpg"></p> <h2>6.短路评价</h2> <p>给一个变量分配的值是通过判断其值是否为null或undefined,则可以:</p> <pre> <code class="language-javascript">let dbHost;if (process.env.DB_HOST) {</code></pre> <p>简写:</p> <pre> <code class="language-javascript">const dbHost = process.env.DB_HOST || 'localhost';</code></pre> <h2>7.十进制指数</h2> <p>当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字:</p> <pre> <code class="language-javascript">for (let i = 0; i < 10000; i++) {}</code></pre> <p>简写:</p> <p><img src="https://simg.open-open.com/show/9cc1c329c5bfcc77d55e492e99e70e59.jpg"></p> <h2>8.对象属性简写</h2> <p>如果属性名与key名相同,则可以采用ES6的方法:</p> <pre> <code class="language-javascript">const obj = { x:x, y:y };</code></pre> <p>简写:</p> <pre> <code class="language-javascript">const obj = { x, y };</code></pre> <h2>9.箭头函数简写</h2> <p>传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。</p> <pre> <code class="language-javascript">function sayHello(name) { console.log('Hello', name);</code></pre> <p>简写:</p> <pre> <code class="language-javascript">sayHello = name => console.log('Hello', name);</code></pre> <h2>10.隐式返回值简写</h2> <p>经常使用return语句来返回函数最终结果,一个单独语句的箭头函数能隐式返回其值(函数必须省略</p> <p>{}为了省略return关键字)为返回多行语句(例如对象字面表达式),则需要使用()包围函数体。</p> <p><img src="https://simg.open-open.com/show/477ba4b524f981912fae567c8f924d89.jpg"></p> <p>简写:</p> <p><img src="https://simg.open-open.com/show/72f6514c2cee71cb0b0bc24aee113e7d.jpg"></p> <p> </p> <p>来自:http://www.techug.com/post/10-shorthand-tips-for-javascript-coding.html</p> <p> </p>
本文由用户 MartinaNico 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!