高级前端开发需要知道的 25 个 JavaScript 单行代码
<h2 data-first-child="">1. 不使用临时变量来交换变量的值</h2><p data-pid="HcU53fX1">例如我们想要将 <code>a</code> 于 <code>b</code> 的值交换</p>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>let a = 1, b = 2;
// 交换值
= ;
// 结果: a = 2, b = 1
</code></pre>
</div>
<p data-pid="JyfTRnnJ">这行代码使用数组<strong>解构赋值</strong>的方式来交换两个变量的值，无需定义新的临时变量。这个巧妙的技巧可让代码看起来更简洁明了。语法<code> = </code>通过解构右侧的数组并将其分配给左侧来实现交换它们的值。</p>
<h2>2. 对象解构，让数据访问更便捷</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const { name, age } = { name: '张三', age: 23 };
// 结果: name = '张三', age = 23
</code></pre>
</div>
<p data-pid="l3mvGoFe">这里使用对象<strong>解构赋值</strong>的方式将对象中的属性直接提取到新的变量中。这种方法简化了访问对象属性的过程，并增强了代码的可读性。</p>
<h2>3. 浅克隆对象</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const originalObj = { name: '张三', age: 24 };
const clonedObj = { ...originalObj };
// 结果: clonedObj = { name: '张三', age: 24 }
// 此时改变 clonedObj 的属性，将不会影响到原始对象 originalObj
</code></pre>
</div>
<p data-pid="UgWHRNT7">通过使用<strong>扩展运算符</strong> ( <code>...</code>) 创建<code>originalObj</code>的<strong>浅克隆</strong>对象。此技术将所有可枚举的自身属性从原始对象复制到新对象。</p>
<h2>4. 合并对象</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const obj1 = { name: '张三' };
const obj2 = { age: 22 };
const mergedObj = { ...obj1, ...obj2 };
// 结果: mergedObj = { name: '张三', age: 22 }
</code></pre>
</div>
<p data-pid="ncu623vk">与克隆类似，通过<strong>扩展运算符</strong>将<code>obj1</code>和合并<code>obj2</code>为一个新的对象。如果有重叠的属性，则最后一个对象的属性将覆盖前一个对象的属性。</p>
<h2>5. 清理数组</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arr = [ 0, 1, false, 2, '', 3 ];
const cleanedArray = arr.filter(Boolean);
// 结果: cleanedArray =
</code></pre>
</div>
<p data-pid="LsXjIpve">通过<code>Array.prototype.filter()</code>函数并使用<code>Boolean</code>函数作为回调。它将会从数组中删除所有假值（ <code>0</code>，<code>false</code>，<code>null</code>，<code>undefined</code>，<code>''</code>，<code>NaN</code>）。</p>
<h2>6. 将 NodeList 转换为数组</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const nodesArray = [ ...document.querySelectorAll('div') ];</code></pre>
</div>
<p data-pid="TEwCxo3g">通过<strong>扩展运算符</strong>将<code>NodeList</code>( <code>document.querySelectorAll</code>函数的返回值) 转换为 JavaScript 数组，从而能够使用数组的<code>map</code>方法<code>filter</code>去操作查找到的元素。</p>
<h2>7. 检查数组是否满足指定条件</h2>
<p data-pid="sjQtf5H4">例如我们要判断一个数组中是否存在负数</p>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arr = [ 1, 2, 3, -5, 4 ];
// 数组中是否有负数
const hasNegativeNumbers = arr.some(num => num < 0);
// 结果: hasNegativeNumbers = true
</code></pre>
</div>
<p data-pid="zseLEK1o"><code>Array.prototype.some()</code>函数用于检查数组中是否<strong>至少有一个元素</strong>，通过所提供的回调函数实现的测试（此处判断是否是负数，返回<code>true</code>表示通过）</p>
<p data-pid="_tfKM7ST">另外，还可以使用<code>Array.prototype.every()</code>来检查数组的所有元素是否<strong>全部通过测试</strong>（此处判断是否是正数）</p>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arr = [ 1, 2, 3, -5, 4 ];
// 数组元素是否全部为正
const allPositive = arr.every(num => num > 0);
// 结果: allPositive = false
</code></pre>
</div>
<h2>8. 将文本复制到剪贴板</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>navigator.clipboard.writeText('Text to copy');</code></pre>
</div>
<p data-pid="b57noxa9">通过使用 Clipboard API 以编程方式将文本复制到剪贴板。这是一种最新的复制方法，可让文本复制变得无缝且高效（但目前各大浏览器支持度还不是很高，需要考虑兼容性问题）。</p>
<h2>9. 删除数组重复项</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arr = ;
const unique = [...new Set(arr)];
// 结果: unique =
</code></pre>
</div>
<p data-pid="J_7EDMtJ">这里利用了<code>Set</code>对象存储的值会保持唯一，以及<strong>扩展运算符</strong>能将<code>Set</code>转换回数组的特性。这是一种优雅的删除数组中重复项的方式。</p>
<h2>10. 取两个数组的交集</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arr1 = ;
const arr2 = ;
// 取两个数组中公共的元素
const intersection = arr1.filter(value => arr2.includes(value));
// 结果: intersection =
</code></pre>
</div>
<p data-pid="hCfgCQU9">此示例通过使用<code>Array.prototype.filter()</code>函数去查找<code>arr1</code>与<code>arr2</code>中的公共元素。传入的回调函数会检查<code>arr2</code>是否包含<code>arr1</code>的每一个元素，从而得到两个数组的交集。</p>
<blockquote data-pid="_yUNA-KU">可以在这在线运行上述演示代码</blockquote>
<div class="RichText-LinkCardContainer">笔COOL，一个功能完备前端作品分享平台、使用便捷的在线HTML/CSS/JS代码编辑器，实时运行</div>
<h2>11. 求数组元素的总和</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arr = ;
// 求总和
const sum = arr.reduce((total, value) => total + value, 0);
// 结果: sum = 10
</code></pre>
</div>
<p data-pid="7rrEVr3d">此示例使用<code>Array.prototype.reduce()</code>方法将数组中所有的值全部累加起来。<code>reduce</code>方法接收一个回调函数和一个初始值（即前一个回调函数累加值的初始值），这个回调函数有两个参数：累加值<code>total</code>和当前值<code>value</code>。它将会遍历数组所有元素，将每个元素添加到总和中（总和初始为0）。</p>
<h2>12. 根据指定条件判断，是否给对象的属性赋值</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const condition = true;
const value = '你好，世界';
// 如果条件为真，则将 value 变量的值赋给 newObject.key 属性
const newObject = {...(condition && {key: value})};
// 结果: newObject = { key: '你好，世界' }
</code></pre>
</div>
<p data-pid="DwzKIxTT">此案例使用扩展运算符 (<code>...</code>) 与短路求值(<code>&&</code>)，将属性有条件地添加到对象中。 如果<code>condition</code>为真，则会将<code>{key: value}</code>扩展到对象中；否则不进行任何操作。</p>
<h2>13. 使用变量作为对象的键</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const dynamicKey = 'name';
const value = '张三';
// 使用一个动态的变量作为 key
const obj = {: value};
// 结果: obj = { name: '张三' }
</code></pre>
</div>
<p data-pid="y-BkdC-A">这种语法称为<strong>计算属性名</strong>，它允许使用变量作为对象的键。方括号内的<code>dynamicKey</code>表达式会计算其值，以将其用作属性名称。</p>
<h2>14. 离线状态检查器</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const isOnline = navigator.onLine ? '在线' : '离线';
// 结果: isOnline = '在线' 或 '离线'
</code></pre>
</div>
<p data-pid="ODwx2jo9">这段代码使用三元运算符检查浏览器的在线状态(<code>navigator.onLine</code>)，如果为真则返回<code>'在线'</code>，否则返回<code>'离线'</code>。这是一种动态检查用户网络连接状态的方法。</p>
<h2>15. 离开页面弹出确认对话框</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>window.onbeforeunload = () => '你确定要离开吗？';</code></pre>
</div>
<p data-pid="carzqQCg">这行代码与<code>window</code>的<code>onbeforeunload</code>事件挂钩，当用户离开页面时会弹出一个确认对话框，一般用于防止用户因未保存更改就关闭页面而导致数据丢失。</p>
<h2>16. 对象数组，根据对象的某个key求对应值的总和</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const arrayOfObjects = [{x: 1}, {x: 2}, {x: 3}];
// 指定要求和的 key值
const sumBy = (arr, key) => arr.reduce((acc, obj) => acc + obj, 0);
// 传入 'x'，求元素对象 key 为 'x' 的值的总和
sumBy(arrayOfObjects, 'x'));
// 结果: 6
</code></pre>
</div>
<p data-pid="yTRxBQqn"><code>sumBy</code>函数使用<code>Array.prototype.reduce()</code>对数组中元素特定键的值求和。这是一种根据给定键计算对象数组总和的灵活方法。</p>
<h2>17. 将 url 问号后面的查询字符串转为对象</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const query = 'name=John&age=30';
// 将字符串解析为对象
const parseQuery = query => Object.fromEntries(new URLSearchParams(query));
// 结果: parseQuery = { name: 'John', age: '30' }
</code></pre>
</div>
<p data-pid="EAmZlApr">此示例将一个查询字符串转换为了一个对象。其中<code>URLSearchParams</code>会进行字符串解析，它将返回一个可迭代对象，然后在通过<code>Object.fromEntries</code>将它转换为对象，从而使 URL 参数检索变得方便多了。</p>
<h2>18. 将秒数转换为时间格式的字符串</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const seconds = 3661; // 一小时是 3600 秒，多出 61 秒
const toTimeString = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);
toTimeString(seconds));
// 结果: '01:01:01'
</code></pre>
</div>
<p data-pid="IIzrgD7n">此示例将秒数转换为 HH:MM:SS 格式的字符串。它通过给定的秒数加上时间戳起始点来创建一个新的 Date 对象，然后将其转换为 ISO 字符串，并提取时间部分得到结果。</p>
<h2>19. 求某对象所有属性值的最大值</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>// 数学、语文、英语成绩
const scores = { math: 95, chinese: 99, english: 88 };
const maxObjectValue = obj => Math.max(...Object.values(obj));
// 最高分
maxObjectValue(scores));
// 结果: 99
</code></pre>
</div>
<p data-pid="jk6TuWg6">此示例用于在对象所有的属性值中找到最大值。其中<code>Object.values(obj)</code>将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为<code>Math.max</code>函数的参数进行最大值查找。</p>
<h2>20. 判断对象的值中是否包含有某个值</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const person = { name: '张三', age: 30 };
const hasValue = (obj, value) => Object.values(obj).includes(value);
hasValue(person, 30);
// 结果: true
</code></pre>
</div>
<p data-pid="qMiMpRiQ"><code>hasValue</code>函数会检查对象的值中是否存在指定的值。其中<code>Object.values(obj)</code>用于获取对象中所有的值的数组，然后通过<code>includes(value)</code>检查指定值是否在该数组中。</p>
<h2>21. 安全访问深度嵌套的对象属性</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const user = { profile: { name: '张三' } };
const userName = user.profile?.name ?? '匿名';
// 结果: userName = '张三'
</code></pre>
</div>
<p data-pid="Q-QFyYS-">此代码首先演示了如何使用可选链运算符 (<code>?.</code>) 安全地访问<code>user.profile</code>的<code>name</code>值。如果<code>user.profile</code>是<code>undefined</code>或<code>null</code>，它会短路并返回<code>undefined</code>，从而避免潜在的类型错误<code>TypeError</code>。</p>
<p data-pid="V0CC9Xct">然后，使用空值合并运算符 (<code>??</code>) 检查左侧是否为<code>null</code>或<code>undefined</code>，如果是，则使用默认值<code>'匿名'</code>。这可确保后备值不会是其他假值（如<code>''</code>或<code>0</code>）。这对于访问数据结构中<strong>可能不存在</strong>某些中间属性的深层嵌套属性非常有用。</p>
<p data-pid="xh47F20H">在 JavaScript 中，空值合并运算符 (<code>??</code>) 和逻辑或 (<code>||</code>) 都可以用于提供默认值，但它们处理假值的方式有所不同。</p>
<p data-pid="44WbmF0z">在上面的例子中，如果把<code>??</code>改为<code>||</code>，行为会稍微有些不同。<code>||</code>的左侧如果为假值，它将会返回右侧的值。JavaScript 中的假值包括<code>null</code>、<code>undefined</code>、<code>0</code>、<code>NaN</code>、<code>''</code>（空字符串）和<code>false</code>。这意味着<code>||</code>左边的值不仅仅是<code>null</code>或<code>undefined</code>，如果还是其他假值，那么都将返回右侧的值。</p>
<h2>22. 条件执行语句</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const isEligible = true;
isEligible && performAction();
// 如果 isEligible 为真，则调用 performAction()
</code></pre>
</div>
<p data-pid="3Xtffk9b">利用逻辑 AND ( <code>&&</code>) 运算符，函数<code>performAction()</code>仅会在<code>isEligible</code>结果为<code>true</code>时执行。这是一种无需<code>if</code>语句即可有条件地执行函数的简介语法。这对于根据某些条件执行函数非常有用，尤其是在事件处理或回调中。</p>
<p data-pid="kgIE7YWb">如果想要条件赋值，则可以这样写</p>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const isEligible = true;
let value = '';
// 需要将赋值语句用用括号括起来
isEligible && (value = '条件达成');
// 如果 isEligible 为真，则执行 (value = '条件达成') 语句
</code></pre>
</div>
<h2>23. 创建包含值为指定数字范围的数组</h2>
<p data-pid="gTXBBMjL">例如创建数字5以内所有正数的数组</p>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const range = Array.from({ length: 5 }, (_, i) => i + 1);
// 结果: range =
</code></pre>
</div>
<p data-pid="o0vaWubP"><code>Array.from()</code>从类数组或可迭代对象创建一个新数组。这里，它接受一个具有属性<code>length</code>和映射函数的对象。映射函数 ( <code>(_, i) => i + 1</code>) 使用索引 ( <code>i</code>) 生成从 1 到 5 的数字。下划线 ( <code>_</code>) 是一种惯例，表示未使用该参数。</p>
<h2>24. 提取文件扩展名</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const fileName = 'example.png';
const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);
// 结果: getFileExtension = 'png'
</code></pre>
</div>
<p data-pid="XB0I6R9X">这个案例实现了从字符串中提取文件扩展名。它先找到最后一次出现点号 (<code>.</code>) 位置，然后截取从该位置到末尾的字符串。位运算符 (<code>>>></code>) 确保了即使未找到点号 (<code>.</code>) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。</p>
<h2>25. 切换元素的 class</h2>
<div class="highlight">
<pre class="highlighter-prismjs language-js prismjs-lines-highlighted" tabindex="0"><code>const element = document.querySelector('.my-element');
const toggleClass = (el, className) => el.classList.toggle(className);
toggleClass(element, 'active');</code></pre>
</div>
<p data-pid="fMXvZz7X"><code>toggleClass</code>函数使用<code>classList.toggle()</code>方法从一个元素的 class 列表中添加或移除某个 class。如果该 class 存在，则删除，否则添加。这是一种根据用户交互或应用程序状态动态更新 class 的方法。非常适合实现响应式设计元素，例如菜单根据用户操作显示或隐藏。</p>
<p data-pid="KQOj5JdT">以上 25 个 JavaScript 单行代码，以简短高效的方式提供强大的功能。希望您今天能有所收获！</p>
<blockquote data-pid="7txVKaJf">在线运行上述演示代码</blockquote>
<div class="RichText-LinkCardContainer">笔COOL，一个功能完备前端作品分享平台、使用便捷的在线HTML/CSS/JS代码编辑器</div>
</div>
<div id="MySignature" role="contentinfo">
转载请注明出处: https://www.cnblogs.com/liuhangui/p/18251649<br><br>
来源：https://www.cnblogs.com/liuhangui/p/18251649
頁:
[1]