今天分享幾個少見卻很有用的 JS 技巧
1. “返回”按鈕
使用 history.back() 可以建立一個瀏覽器“返回”按鈕。
<button onclick="history.back()">
返回
</button>
2. 數字分隔符
為了提高數字的可讀性，您可以使用下劃線作為分隔符：
const largeNumber = 1_000_000_000;
console.log(lahttp://www.cppcns.comrgeNumber); // 1000000000
3. 事件監聽器只執行一次
如果你想新增一個事件監聽器並且只執行一次，你可以使用 once 選項：
element.addEventListener('click',() => console.log('I run only once'),{
once: true
}); 4. console.log 變數包裝
您在 console.log() 的時候，將引數用大括號括起來，這樣可以同時看到變數名和變數值。
5. 從陣列中獲取最小值/最大值
您可以使用 Math.min() 或 Math.max() 結合擴充套件運算子來查詢陣列中的最小值或最大值。
const numbers = [6,8,1,3,9]; console.log(Math.max(...numbers)); // 9 console.log(Math.min(...numbers)); // 1
6. 檢查 Caps Lock 是否開啟
您可以使用 KeyboardEvent.getModifierState() 來檢測是否 Caps Lock 開啟。
const passwordInput = document.getElementById('password');
passwordInput.addEventListener('keyup',function (event) {
if (event.getModifierState('CapsLock')) {
// CapsLock 已經打開了
}
});
7. 複製到剪貼簿
您可以使用 Clipboard API 建立“複製到剪貼簿”功能：
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
} 8. 獲取滑鼠位置
您可以使用 MouseEvent 物件下 clientX 和 clientY 的屬性值，獲取滑鼠的當前位置座標資訊。
document.addEventListener('mousemove',(e) => {
console.log(`Mouse X: ${e.clientX},Mouse Y: ${e.clientY}`);
});
9. 縮短陣列
您可以設定 length 屬性來縮短陣列。
const numbers = [1,2,4,5] numbers.length = 3; console.log(numbers); // [1,3]
10. 簡寫條件判斷語句
如果僅在判斷條件為 true 時才執行函式，則可以使用 && 簡寫。
// 普通寫法
if (condition) {
doSomething();
}
// 簡寫
condition && doSomething();
11. console.table() 列印特定格式的表格
語法：
// [] 裡面指的是可選引數 console.table(data [,columns]);
引數：
data 表示要顯示的資料。必須是陣列或物件。
columns 表示一個包含列的名稱的陣列。
例項：
// 一個物件陣列，只打印 firstName
function Person(firstName,lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const john = new Person("John","Smith");
const jane = new Person("Jane","Doe");
const emily = new Person("Emily","Jones");
console.table([john,jane,emily],["firstName"]);
列印結果如下圖：
12. 陣列去重
const numbers = [2,2]; console.log([...new Set(numbers)]); // [2,4]
13. 將字串轉換為數字
const str = '404'; console.log(+str) // 404;
14. 將數字轉換為字串
連線空字串。
const myNumber = 403; console.log(myNumber + ''); // '403'
15. 從陣列中過濾所有虛值
const myArray = [1,undefined,NaN,null,'@denicmarko',true,false]; console.log(myArray.filter(Boolean)); // [1,"@denicmarko",3]
16. 妙用 includes
const myTech = '';
const techs = ['HTML','','Script'];
// 普通寫法
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
// do something
}
// includes 寫法
if (techs.includes(myTech)) {
// do something
}
17. 妙用 reduce 對陣列求和
const myArray = [10,20,30,40]; const reducer = (total,currentValue) => total + currentValue; console.log(myArray.reduce(reducer)); // 100
18. console.log() 樣式
您知不知道可以使用 CSS 語句在 DevTools 中設定 console.log 輸出的樣式：
19. 元素的 dataset
使用 dataset 屬性訪問元素的自定義資料屬性 ( data-* )：
<dTZURSiv id="user" data-name="John Doe" data-age="29" data-something="Some Data">
John Doe
</div>
<script>
const user = document.getElementById('user');
console.log(user.dataset);
// { name: "John Doe",age: "29",something: "Some Data" }
console.log(user.dataset.naTZURSme); // "John Doe"
console.log(user.dataset.age); // "29"
console.log(user.dataset.something); // "Some Data"
</script>
到此這篇關於今天分享幾個少見卻很有用的 技巧的文章就介紹到這了,更多相關JS 技巧內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！