JavaScript 简写神技

琦宝儿 發表於 2025-3-17 23:20:00

<p style="margin-bottom: 1rem; color: rgba(51, 51, 51, 1); font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; font-size: 16px; letter-spacing: normal; text-align: start" data-line="2">JavaScript 是一门强大且灵活的语言，拥有丰富的特性和语法糖。分享下 16 个最常用的 JavaScript 的简写技巧，掌握它们可以让我们编写出更简洁、更优雅的代码，并显著提升开发效率（增加摸鱼时间）。
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="4">1. 三元运算符简化条件判断</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 let result; if (someCondition) { result = 'yes'; } else { result = 'no'; } // 简写方式 const result = someCondition ? 'yes' : 'no'; </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="19">2. 空值合并运算符</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 const name = user.name !== null && user.name !== undefined ? user.name : 'default'; // 简写方式 const name = user.name ?? 'default'; </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="29">3. 可选链操作符</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 const street = user && user.address && user.address.street; // 简写方式 const street = user?.address?.street; </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="39">4. 数组去重</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 function unique(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } // 简写方式 const unique = arr => [...new Set(arr)]; </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="51">5. 快速取整</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 const floor = Math.floor(4.9); // 简写方式 const floor = ~~4.9; </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="61">6. 合并对象</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 const merged = Object.assign({}, obj1, obj2); // 简写方式 const merged = {...obj1, ...obj2}; </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="71">7. 短路求值</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 if (condition) { doSomething(); } // 简写方式 condition && doSomething(); </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="83">8. 默认参数值</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 function greet(name) { name = name || 'Guest'; console.log(`Hello ${name}`); } // 简写方式 const greet = (name = 'Guest') => console.log(`Hello ${name}`); </code></pre>
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="96">9. 解构赋值</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081832_1.png" width="640" height="212">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="107">10. 字符串转数字</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081837_2.png" width="640" height="180">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="117">11. 多重条件判断</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081841_3.png" width="718" height="306">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="131">12. 快速幂运算</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081846_4.png" width="640" height="180">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="141">13. 对象属性简写</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081850_5.png" width="640" height="180">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="151">14. 数组映射</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081854_6.png" width="660" height="274">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="164">15. 交换变量值</h3>
<img src="https://images.cnblogs.com/cnblogs_com/lzhdim/2440925/o_250113081859_7.png" width="640" height="244">
<h3 style="margin-top: 1.2em; margin-bottom: 16px; line-height: 1.2; color: rgba(0, 0, 0, 1); font-size: 1.331em; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; letter-spacing: normal; text-align: start" data-line="176">16. 动态对象属性</h3>
<pre><code style="font-family: "Fira Code", Menlo, Consolas, "Source Code Pro", monospace; font-size: 14px; padding: 0.5em; background: rgba(248, 248, 248, 1); border-radius: 3px; word-break: normal; display: block; overflow-x: auto">// 传统写法 const obj = {}; obj = value; // 简写方式 const obj = { [`${dynamic}name`]: value }; </code></pre>
<p style="margin-bottom: 1rem; color: rgba(51, 51, 51, 1); font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; font-size: 16px; letter-spacing: normal; text-align: start" data-line="189">欢迎补充。

</div>
<div id="MySignature" role="contentinfo">


 
<table cellpadding="0" cellspacing="0" class="field" style="background-color: #EEE; width: 100%">
<tbody>
<tr>
 <td align="center" width="110px"><img
 height="100px" src="https://images.cnblogs.com/cnblogs_com/lzhdim/636184/o_230607054137_lzhdim.png"
 width="100px"></td>
 <td align="left">
     Austin Liu  刘恒辉
     Project Manager and Software Designer 
     E-Mail：lzhdim@163.com 
     Blog：https://lzhdim.cnblogs.com 
    
 欢迎收藏和转载此博客中的博文，但是请注明出处，给笔者一个与大家交流的空间。谢谢大家。 
 </td>
</tr>
</tbody>
</table> 
来源：https://www.cnblogs.com/lzhdim/p/18668822

頁: [1]

琼殿技术论坛's Archiver

JavaScript 简写神技