整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例如我們想要將 a 于 b 的值交換
let a=1, b=2;
// 交換值
[a, b]=[b, a];
// 結果: a=2, b=1這行代碼使用數組解構賦值的方式來交換兩個變量的值，無需定義新的臨時變量。這個巧妙的技巧可讓代碼看起來更簡潔明了。語法[a, b]=[b, a]通過解構右側的數組并將其分配給左側來實現交換它們的值。
const { name, age }={ name: '張三', age: 23 };
// 結果: name='張三', age=23這里使用對象解構賦值的方式將對象中的屬性直接提取到新的變量中。這種方法簡化了訪問對象屬性的過程，并增強了代碼的可讀性。
const originalObj={ name: '張三', age: 24 };
const clonedObj={ ...originalObj };
// 結果: clonedObj={ name: '張三', age: 24 }
// 此時改變 clonedObj 的屬性，將不會影響到原始對象 originalObj通過使用擴展運算符 ( ...) 創建originalObj的淺克隆對象。此技術將所有可枚舉的自身屬性從原始對象復制到新對象。
const obj1={ name: '張三' };
const obj2={ age: 22 };
const mergedObj={ ...obj1, ...obj2 };
// 結果: mergedObj={ name: '張三', age: 22 }與克隆類似，通過擴展運算符將obj1和合并obj2為一個新的對象。如果有重疊的屬性，則最后一個對象的屬性將覆蓋前一個對象的屬性。
const arr=[ 0, 1, false, 2, '', 3 ];
const cleanedArray=arr.filter(Boolean);
// 結果: cleanedArray=[1, 2, 3]通過Array.prototype.filter()函數并使用Boolean函數作為回調。它將會從數組中刪除所有假值（ 0，false，null，undefined，''，NaN）。
const nodesArray=[ ...document.querySelectorAll('div')];通過擴展運算符將NodeList( document.querySelectorAll函數的返回值) 轉換為 JavaScript 數組，從而能夠使用數組的map方法filter去操作查找到的元素。
例如我們要判斷一個數組中是否存在負數
const arr=[ 1, 2, 3, -5, 4 ];
// 數組中是否有負數
const hasNegativeNumbers=arr.some(num=> num < 0);
// 結果: hasNegativeNumbers=trueArray.prototype.some()函數用于檢查數組中是否至少有一個元素，通過所提供的回調函數實現的測試（此處判斷是否是負數，返回true表示通過）
另外，還可以使用Array.prototype.every()來檢查數組的所有元素是否全部通過測試（此處判斷是否是正數）
const arr=[ 1, 2, 3, -5, 4 ];
// 數組元素是否全部為正
const allPositive=arr.every(num=> num > 0);
// 結果: allPositive=falsenavigator.clipboard.writeText('Text to copy');
通過使用 Clipboard API 以編程方式將文本復制到剪貼板。這是一種最新的復制方法，可讓文本復制變得無縫且高效（但目前各大瀏覽器支持度還不是很高，需要考慮兼容性問題）。
const arr=[1, 2, 2, 3, 4, 4, 5];
const unique=[...new Set(arr)];
// 結果: unique=[1, 2, 3, 4, 5]這里利用了Set對象存儲的值會保持唯一，以及擴展運算符能將Set轉換回數組的特性。這是一種優雅的刪除數組中重復項的方式。
const arr1=[1, 2, 3, 4];
const arr2=[2, 4, 6, 8];
// 取兩個數組中公共的元素
const intersection=arr1.filter(value=> arr2.includes(value));
// 結果: intersection=[2, 4]此示例通過使用Array.prototype.filter()函數去查找arr1與arr2中的公共元素。傳入的回調函數會檢查arr2是否包含arr1的每一個元素，從而得到兩個數組的交集。
可以在筆COOL上運行上述演示代碼
筆COOL，一個功能完備前端作品分享平臺、使用便捷的在線HTML/CSS/JS代碼編輯器，瀏覽器輸入 bi.cool 即可訪
const arr=[1, 2, 3, 4];
// 求總和
const sum=arr.reduce((total, value)=> total + value, 0);
// 結果: sum=10此示例使用Array.prototype.reduce()方法將數組中所有的值全部累加起來。reduce方法接收一個回調函數和一個初始值（即前一個回調函數累加值的初始值），這個回調函數有兩個參數：累加值total和當前值value。它將會遍歷數組所有元素，將每個元素添加到總和中（總和初始為0）。
const condition=true;
const value='你好，世界';
// 如果條件為真，則將 value 變量的值賦給 newObject.key 屬性
const newObject={...(condition && {key: value})};
// 結果: newObject={ key: '你好，世界' }此案例使用擴展運算符 (...) 與短路求值(&&)，將屬性有條件地添加到對象中。如果condition為真，則會將{key: value}擴展到對象中；否則不進行任何操作。
const dynamicKey='name';
const value='張三';
// 使用一個動態的變量作為 key
const obj={[dynamicKey]: value};
// 結果: obj={ name: '張三' }這種語法稱為計算屬性名，它允許使用變量作為對象的鍵。方括號內的dynamicKey表達式會計算其值，以將其用作屬性名稱。
const isOnline=navigator.onLine ? '在線' : '離線';
// 結果: isOnline='在線' 或 '離線'這段代碼使用三元運算符檢查瀏覽器的在線狀態(navigator.onLine)，如果為真則返回'在線'，否則返回'離線'。這是一種動態檢查用戶網絡連接狀態的方法。
window.onbeforeunload=()=> '你確定要離開嗎？';這行代碼與window的onbeforeunload事件掛鉤，當用戶離開頁面時會彈出一個確認對話框，一般用于防止用戶因未保存更改就關閉頁面而導致數據丟失。const arrayOfObjects=[{x: 1}, {x: 2}, {x: 3}];
// 指定要求和的 key值
const sumBy=(arr, key)=> arr.reduce((acc, obj)=> acc + obj[key], 0);
// 傳入 'x'，求元素對象 key 為 'x' 的值的總和
sumBy(arrayOfObjects, 'x'));
// 結果: 6sumBy函數使用Array.prototype.reduce()對數組中元素特定鍵的值求和。這是一種根據給定鍵計算對象數組總和的靈活方法。
const query='name=John&age=30';
// 將字符串解析為對象
const parseQuery=query=> Object.fromEntries(new URLSearchParams(query));
// 結果: parseQuery={ name: 'John', age: '30' }此示例將一個查詢字符串轉換為了一個對象。其中URLSearchParams會進行字符串解析，它將返回一個可迭代對象，然后在通過Object.fromEntries將它轉換為對象，從而使 URL 參數檢索變得方便多了。
const seconds=3661; // 一小時是 3600 秒，多出 61 秒
const toTimeString=seconds=> new Date(seconds * 1000).toISOString().substr(11, 8);
toTimeString(seconds));
// 結果: '01:01:01'此示例將秒數轉換為 HH:MM:SS 格式的字符串。它通過給定的秒數加上時間戳起始點來創建一個新的 Date 對象，然后將其轉換為 ISO 字符串，并提取時間部分得到結果。
// 數學、語文、英語成績
const scores={ math: 95, chinese: 99, english: 88 };
const maxObjectValue=obj=> Math.max(...Object.values(obj));
// 最高分
maxObjectValue(scores));
// 結果: 99此示例用于在對象所有的屬性值中找到最大值。其中Object.values(obj)將對象所有的屬性值提取為數組，然后使用展開運算符將數組的所有元素作為Math.max函數的參數進行最大值查找。
const person={ name: '張三', age: 30 };
const hasValue=(obj, value)=> Object.values(obj).includes(value);
hasValue(person, 30);
// 結果: truehasValue函數會檢查對象的值中是否存在指定的值。其中Object.values(obj)用于獲取對象中所有的值的數組，然后通過includes(value)檢查指定值是否在該數組中。
const user={ profile: { name: '張三' } };
const userName=user.profile?.name ?? '匿名';
// 結果: userName='張三'此代碼首先演示了如何使用可選鏈運算符 (?.) 安全地訪問user.profile的name值。如果user.profile是undefined或null，它會短路并返回undefined，從而避免潛在的類型錯誤TypeError。
然后，使用空值合并運算符 (??) 檢查左側是否為null或undefined，如果是，則使用默認值'匿名'。這可確保后備值不會是其他假值（如''或0）。這對于訪問數據結構中可能不存在某些中間屬性的深層嵌套屬性非常有用。
在 JavaScript 中，空值合并運算符 (??) 和邏輯或 (||) 都可以用于提供默認值，但它們處理假值的方式有所不同。
在上面的例子中，如果把??改為||，行為會稍微有些不同。||的左側如果為假值，它將會返回右側的值。JavaScript 中的假值包括null、undefined、0、NaN、''（空字符串）和false。這意味著||左邊的值不僅僅是null或undefined，如果還是其他假值，那么都將返回右側的值。
const isEligible=true;
isEligible && performAction();
// 如果 isEligible 為真，則調用 performAction()利用邏輯 AND ( &&) 運算符，函數performAction()僅會在isEligible結果為true時執行。這是一種無需if語句即可有條件地執行函數的簡介語法。這對于根據某些條件執行函數非常有用，尤其是在事件處理或回調中。
如果想要條件賦值，則可以這樣寫
const isEligible=true;
let value='';
// 需要將賦值語句用用括號括起來
isEligible && (value='條件達成');
// 如果 isEligible 為真，則執行 (value='條件達成') 語句例如創建數字5以內所有正數的數組
const range=Array.from({ length: 5 }, (_, i)=> i + 1);
// 結果: range=[1, 2, 3, 4, 5]Array.from()從類數組或可迭代對象創建一個新數組。這里，它接受一個具有屬性length和映射函數的對象。映射函數 ( (_, i)=> i + 1) 使用索引 ( i) 生成從 1 到 5 的數字。下劃線 ( _) 是一種慣例，表示未使用該參數。
const fileName='example.png';
const getFileExtension=str=> str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);
// 結果: getFileExtension='png'這個案例實現了從字符串中提取文件擴展名。它先找到最后一次出現點號 (.) 位置，然后截取從該位置到末尾的字符串。位運算符 (>>>) 確保了即使未找到點號 (.) ，操作也是安全的，因為在這種情況下仍然會返回一個空字符串。
const element=document.querySelector('.my-element');
const toggleClass=(el, className)=> el.classList.toggle(className);
toggleClass(element, 'active');toggleClass函數使用classList.toggle()方法從一個元素的 class 列表中添加或移除某個 class。如果該 class 存在，則刪除，否則添加。這是一種根據用戶交互或應用程序狀態動態更新 class 的方法。非常適合實現響應式設計元素，例如菜單根據用戶操作顯示或隱藏。
以上 25 個 JavaScript 單行代碼，以簡短高效的方式提供強大的功能。希望您今天能有所收獲！
在筆COOL上運行上述演示代碼
筆COOL，一個功能完備前端作品分享平臺、使用便捷的在線HTML/CSS/JS代碼編輯器，瀏覽器輸入 bi.cool 即可訪問
上一章，我們已經實現了從網頁代碼文件中提取文字，但是我們發現，提取的文字中有很多空白行，如下圖
這樣，篇幅可能很長很長。現在我們有一個需要，就是能不能將這些空白行去除掉？本章就來研究這個問題。
首先，我們先對程序進行一下優化處理，把上一張最后程序中的自定義函數“去除html代碼”，移動到通用函數庫中。
上一章最后的程序如下
移動后程序變成下面這個樣子
此時，自定義函數已經移到了通用函數庫中。于是，我們看到，優化后的程序更加簡單易懂，下面我們研究去除空行的問題。
按照以前的習慣，我們先對主程序進行下改造，改造后的主程序變成下面的模樣
上面紅線標注的這一行，就是我們新增加的內容。我們編寫了一個函數，名字叫做去除空行，詳細內容如下圖，下面我們研究一下這個函數
第四行，我們定義的這個函數以及傳入的參數
第五行，定義了回收內容的變量
第六行，用換行符把內容分割成列表
第七行，對列表內所有的行進行遍歷
第八行，對列表中的內容進行空格刪除，然后看看是不是為空，用這樣的方式判斷行內是否有內容。
第九行，對有內容的行進行回收。
第十行，返回結果
于是我們得到了完整的程序，如下圖
運行后的效果如下圖
于是我們看到，所有的空行沒有了。剩下的行都是有內容的行。
載說明：原創不易，未經授權，謝絕任何形式的轉載
學習制作自定義指令：構建安全的URL清理指令
Vue.js配備了一套默認指令，對于常見的使用情況非常重要。這些默認指令包括v-for、v-html和v-text。此外，Vue.js還賦予我們注冊定制指令以滿足特定需求的能力。
自定義指令通常包括生命周期鉤子，并且可以在“mounted”、“updated”和“beforeUnmount”等階段進行操作。這些鉤子接收應用指令的元素及其關聯值，使它們能夠對輸入執行特定的操作。
此外，還可以根據特定的生命周期鉤子（如'onUpdated'或'beforeUnmount'）有選擇地觸發函數
指令可以通過三種不同的方式進行注冊。它們可以在腳本設置（setup 函數）內部或設置函數（setup函數）之外進行注冊，也可以在應用程序初始化期間進行全局注冊。
函數內部注冊
在Vue.js中，以camelCase聲明并以‘v’為前綴的變量會自動被識別為指令。在上面的示例中，我們定義了 v-text-color 指令，它接受綁定的元素并根據提供的值設置文本顏色。
<script setup>
import { ref } from 'vue'
const msg=ref('Hello World!')
const vTextColor={
mounted: (el,binding)=> el.style.color=binding.value
}
</script>
<template>
<h1 v-text-color="`green`">{{ msg }}</h1>
<input v-model="msg">
</template>函數外部注冊
我們還可以使用 directives API選項在setup函數之外注冊指令。下面的代碼片段演示了如何實現這一點。
export default {
setup() {
/*...*/
},
directives: {
// enables v-textcolor in template
textcolor: {
/* ... */
}
}
}對于您打算在整個應用程序中經常重復使用的指令，建議將其全局注冊，如下所示：
const app=createApp({})
// make v-textcolor usable in all components
app.directive('textcolor', {
/* ... */
})既然我們已經探索了在Vue.js中注冊自定義指令的不同方法，那么讓我們繼續創建一個安全地清理提供的URL的指令。為了避免重復造輪子并確保URL解析的穩健性，我們將利用 @braintree/sanitize-url 包。該包經過了廣泛的測試，在開發者中得到了廣泛的采用，并且正在積極維護。
本質上，該指令的目的是獲取綁定的元素的值，即一個URL，并對其進行清理，確保其安全性。根據您偏好的軟件包管理器，您可以安裝'@braintree/sanitize-url'。在本示例中，我們將使用npm。
npm install -S @braintree/sanitize-url這是一個我們旨在清理的不安全URL的示例。
http://example.com/login?redirect=http://malicious-site.com/attack?payload=<script>alert('XSS Attack');</script>在這個例子中：
<script setup>
import { ref } from 'vue'
import { sanitizeUrl } from '@braintree/sanitize-url'
const msg=ref('Hello World!')
const url=ref('http://example.com/login?redirect=http://malicious-site.com/attack?payload=<script>alert('XSS Attack');</script>
')
const vSafeUrl={
mounted:(el,binding)=> {
el.setAttribute('href', sanitizeUrl(binding.value))
}
}
</script>
<template>
<h1>{{ msg }}</h1>
<a v-safe-url="`url`">Safe url</a>
</template>在Vue.js中對自定義指令的探索強調了它們在根據特定需求定制應用程序方面的出色適應性和實用性。本文中我們還了解了各種指令注冊方法，體現了Vue在定義其范圍和可重用性方面的靈活性。
由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
